chore: add week 10 data section ⚒️

juniorxsound · Nov 8, 2023 · 5cf47ad · 5cf47ad
1 parent c9f4b1a
commit 5cf47ad
Show file tree

Hide file tree

Showing 13 changed files with 265 additions and 0 deletions.
diff --git a/.github/workflows/sync.yaml b/.github/workflows/sync.yaml
@@ -37,6 +37,11 @@ jobs:
           cd ./classes/week-8/animated-highlights-r3f
           npm install
           npm run build
+      - name: Build Week 10 - Data, Controls, Interactions
+        run: | # Week 8 - Animated Highlights
+          cd ./classes/week-10/data-controls-interactions-r3f
+          npm install
+          npm run build
   # Minimal test of the GitHub Action
   # (only runs on pushes to the `main` branch)
   # Glitch Project: https://glitch.com/edit/#!/github-action

diff --git a/classes/week-10/data-controls-interactions-r3f/.gitignore b/classes/week-10/data-controls-interactions-r3f/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/classes/week-10/data-controls-interactions-r3f/README.md b/classes/week-10/data-controls-interactions-r3f/README.md
@@ -0,0 +1 @@
+# ITP Visual Journalism Fall 2023 - Interactions & Controls & Data
diff --git a/classes/week-10/data-controls-interactions-r3f/index.html b/classes/week-10/data-controls-interactions-r3f/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ITP Visual Journalism Fall 2023 - Week 10</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/classes/week-10/data-controls-interactions-r3f/package.json b/classes/week-10/data-controls-interactions-r3f/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "data-controls-interactions-r3f",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.80.4",
+    "@react-three/fiber": "^8.13.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.155.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@types/three": "^0.155.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "vite": "^4.3.8"
+  },
+  "engines": {
+    "node": "16.x"
+  }
+}
diff --git a/classes/week-10/data-controls-interactions-r3f/public/earth.jpg b/classes/week-10/data-controls-interactions-r3f/public/earth.jpg
diff --git a/classes/week-10/data-controls-interactions-r3f/src/App.css b/classes/week-10/data-controls-interactions-r3f/src/App.css
@@ -0,0 +1,18 @@
+body {
+  /* Reseting the default here */
+  margin: 0;
+}
+
+#article_wrapper {
+  position: relative;
+  background-color: grey;
+  height: 100vh; /* Length of the interactive scroll article */
+}
+
+#canvas_wrapper {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/classes/week-10/data-controls-interactions-r3f/src/App.jsx b/classes/week-10/data-controls-interactions-r3f/src/App.jsx
@@ -0,0 +1,15 @@
+import Scene from "./Scene";
+
+// We add a CSS file here so we can style components
+import "./App.css";
+
+function App() {
+  return (
+    <div id="article_wrapper">
+      {/* 3D scene container */}
+      <Scene />
+    </div>
+  );
+}
+
+export default App;
diff --git a/classes/week-10/data-controls-interactions-r3f/src/Earth.jsx b/classes/week-10/data-controls-interactions-r3f/src/Earth.jsx
@@ -0,0 +1,13 @@
+import { useTexture } from "@react-three/drei";
+
+function Earth() {
+  const earthTexture = useTexture("/earth.jpg");
+  return (
+    <mesh>
+      <sphereGeometry args={[1, 32, 32]} />
+      <meshStandardMaterial map={earthTexture} />
+    </mesh>
+  );
+}
+
+export default Earth;
diff --git a/classes/week-10/data-controls-interactions-r3f/src/LocationMarker.jsx b/classes/week-10/data-controls-interactions-r3f/src/LocationMarker.jsx
@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { Html } from "@react-three/drei";
+
+function LocationMarker({ position, name }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  return (
+    <>
+      <mesh
+        onClick={() => {
+          if (!isExpanded) setIsExpanded(true);
+        }}
+        onPointerLeave={() => {
+          if (isExpanded) setIsExpanded(false);
+        }}
+        position={position}
+      >
+        {isExpanded && (
+          <Html>
+            <div
+              style={{
+                padding: "10px",
+                background: "red",
+                borderRadius: "5px",
+                color: "white",
+                minWidth: "200px",
+              }}
+            >
+              <h1>{name}</h1>
+              <p>
+                {name} - here we can add more details dynamically from the data
+                - or by stitching other data!
+              </p>
+            </div>
+          </Html>
+        )}
+        <sphereGeometry args={[isExpanded ? 0.01 : 0.005]} />
+        <meshBasicMaterial color="red" />
+      </mesh>
+    </>
+  );
+}
+
+export default LocationMarker;
diff --git a/classes/week-10/data-controls-interactions-r3f/src/Scene.jsx b/classes/week-10/data-controls-interactions-r3f/src/Scene.jsx
@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import { Vector3 } from "three";
+import { Canvas } from "@react-three/fiber";
+import {
+  Environment,
+  OrbitControls,
+  PerspectiveCamera,
+} from "@react-three/drei";
+
+import LocationMarker from "./LocationMarker";
+import Earth from "./Earth";
+
+// This function converts geographic coordinates (latitude and longitude) into a 3D vector.
+function latLongToVector3(lat, lon, radius) {
+  // Convert latitude and longitude from degrees to radians
+  const phi = (lat * Math.PI) / 180;
+  const theta = ((lon - 180) * Math.PI) / 180;
+
+  // Calculate the x, y, and z coordinates using the spherical to Cartesian coordinates conversion formulas
+  const x = -(radius * Math.cos(phi) * Math.cos(theta));
+  const y = radius * Math.sin(phi);
+  const z = radius * Math.cos(phi) * Math.sin(theta);
+
+  return new Vector3(x, y, z);
+}
+
+function Scene() {
+  // We use state to store our data points
+  const [dataPoints, setDataPoints] = useState([]);
+
+  // We fetch our data and do any pre-processing needed to organize it
+  useEffect(() => {
+    fetch(
+      "https://raw.githubusercontent.com/eesur/country-codes-lat-long/master/country-codes-lat-long-alpha3.json"
+    ).then((res) => {
+      res.json().then((data) => {
+        const { ref_country_codes } = data;
+
+        const filteredData = ref_country_codes.filter(
+          (item) => item.latitude && item.longitude
+        );
+        const mappedData = filteredData.map(
+          ({ longitude, latitude, country }) => {
+            return {
+              position: latLongToVector3(latitude, longitude, 1),
+              name: country,
+            };
+          }
+        );
+        setDataPoints(mappedData);
+      });
+    });
+  }, []);
+
+  return (
+    <div id="canvas_wrapper">
+      <Canvas>
+        <PerspectiveCamera position={[0, 0, 3]} makeDefault near={0.0001} />
+        <OrbitControls />
+
+        <Environment preset="sunset" resolution={256} background blur={1} />
+        <color args={["black"]} attach="background" />
+
+        {/* Lights 💡 */}
+        <ambientLight intensity={0.5} color="white" />
+        <spotLight
+          position={[0, 15, 0]}
+          angle={0.3}
+          penumbra={1}
+          castShadow
+          intensity={2}
+          shadow-bias={-0.0001}
+        />
+
+        <Earth />
+
+        {/* Data points turned into geometry with it's own interaction 📌 */}
+        {dataPoints.map((item, index) => (
+          <LocationMarker
+            key={index}
+            position={item.position}
+            name={item.name}
+          />
+        ))}
+      </Canvas>
+    </div>
+  );
+}
+
+export default Scene;
diff --git a/classes/week-10/data-controls-interactions-r3f/src/main.jsx b/classes/week-10/data-controls-interactions-r3f/src/main.jsx
@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);
diff --git a/classes/week-10/data-controls-interactions-r3f/vite.config.js b/classes/week-10/data-controls-interactions-r3f/vite.config.js
@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [react()],
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		# ITP Visual Journalism Fall 2023 - Interactions & Controls & Data