hover effects exercices ok

pages/course/hover-effect/css-pseudo-class.tsx

@@ -15,6 +15,8 @@ import { ExerciseAccordion } from '@/component/ExerciseAccordion';
 import Link from 'next/link';
 import { TakeHome } from '@/component/TakeHome';
 import { Graph9 } from '@/viz/exercise/HoverFirstTreemapSolution/Graph';
+import { Graph10 } from '@/viz/exercise/HoverDeathByStateSolution/Graph';
+import { Graph11 } from '@/viz/exercise/HoverDeathByStateFixSolution/Graph';
 
 const previousURL = '/course/hover-effect/introduction';
 const currentURL = '/course/hover-effect/css-pseudo-class';
@@ -158,10 +160,14 @@ export default function Home() {
             ),
             content: <ExerciseDoubleSandbox exercise={exercises[2]} />,
           },
+          {
+            title: <span>Fix the mess!</span>,
+            content: <ExerciseDoubleSandbox exercise={exercises[3]} />,
+          },
         ]}
       />
 
-      <Graph9 />
+      <Graph11 />
     </LayoutCourse>
   );
 }
@@ -264,4 +270,26 @@ const exercises: Exercise[] = [
     practiceSandbox: 'exercise/HoverDeathByStatePractice',
     solutionSandbox: 'exercise/HoverDeathByStateSolution',
   },
+
+  {
+    whyItMatters: (
+      <>
+        <p>
+          When something can be achieved with CSS only, always ditch Javascript!
+        </p>
+      </>
+    ),
+    toDo: (
+      <>
+        <ul>
+          <li>
+            Fix the previous exercise: instead of using a js state, use a css
+            pseudo class for the hover effect!
+          </li>
+        </ul>
+      </>
+    ),
+    practiceSandbox: 'exercise/HoverDeathByStateFixPractice',
+    solutionSandbox: 'exercise/HoverDeathByStateFixSolution',
+  },
 ];

viz/exercise/HoverDeathByStateFixPractice/Graph.tsx

@@ -0,0 +1,37 @@
+const width = 500;
+const height = 300;
+const sampleSize = 100000;
+
+const data = generateDataset(sampleSize);
+
+export const Graph = () => {
+  // Start with a state here!
+
+  return (
+    <svg width={500} height={300}>
+      {/* Map through data, render one circle per item, use the state for the hover effect */}
+    </svg>
+  );
+};
+
+// -
+// -
+// -
+// - function to Generate Data
+// -// -
+// -
+// -
+
+type DataPoint = { x: number; y: number };
+
+function generateDataset(n: number): DataPoint[] {
+  const dataset: DataPoint[] = [];
+
+  for (let i = 0; i < n; i++) {
+    const x = Math.floor(Math.random() * width);
+    const y = Math.floor(Math.random() * height);
+    dataset.push({ x, y });
+  }
+
+  return dataset;
+}

viz/exercise/HoverDeathByStateFixPractice/index.js

@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { Graph } from './Graph';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<Graph />, rootElement);

viz/exercise/HoverDeathByStateFixPractice/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "d3": "7.1.1",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

viz/exercise/HoverDeathByStateFixSolution/Graph.tsx

@@ -0,0 +1,34 @@
+import styles from './graph.module.css';
+
+const width = 500;
+const height = 300;
+const sampleSize = 100000;
+
+const data = generateDataset(sampleSize);
+
+export const Graph = () => {
+  return (
+    <svg width={500} height={300}>
+      {data.map((d, i) => {
+        return <circle cx={d.x} cy={d.y} r={4} className={styles.circle} />;
+      })}
+    </svg>
+  );
+};
+
+// -
+// - function to Generate Data
+// -
+type DataPoint = { x: number; y: number };
+
+function generateDataset(n: number): DataPoint[] {
+  const dataset: DataPoint[] = [];
+
+  for (let i = 0; i < n; i++) {
+    const x = Math.floor(Math.random() * width);
+    const y = Math.floor(Math.random() * height);
+    dataset.push({ x, y });
+  }
+
+  return dataset;
+}

viz/exercise/HoverDeathByStateFixSolution/graph.module.css

@@ -0,0 +1,10 @@
+.circle {
+  fill-opacity: 0.1;
+  fill: blue;
+  cursor: pointer;
+}
+
+.circle:hover {
+  fill-opacity: 1;
+  fill: red;
+}

viz/exercise/HoverDeathByStateFixSolution/index.js

@@ -0,0 +1,6 @@
+// File used to render something in codesandbox only
+import ReactDOM from 'react-dom';
+import { Graph } from './Graph';
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<Graph />, rootElement);

viz/exercise/HoverDeathByStateFixSolution/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "d3": "7.1.1",
+    "react-dom": "17.0.2",
+    "react-scripts": "4.0.0"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

viz/exercise/HoverDeathByStatePractice/Graph.tsx

@@ -1,28 +1,39 @@
-import { scaleLinear } from 'd3';
-
-const MARGIN = {};
+import { useState } from 'react';
 
 const width = 500;
 const height = 300;
+const sampleSize = 100000;
 
-export const Graph = () => {
-  const boundsWidth = '';
-  const boundsHeight = '';
+const data = generateDataset(sampleSize);
 
-  const xScale = 'TODO';
-  const yScale = 'TODO';
+export const Graph = () => {
+  // Start with a state here!
 
   return (
     <svg width={500} height={300}>
-      {/* SVG background */}
-      <rect />
-
-      {/* Bounds area */}
-      <g>
-        <rect fill="lightgrey" />
-        <circle />
-        <circle />
-      </g>
+      {/* Map through data, render one circle per item, use the state for the hover effect */}
     </svg>
   );
 };
+
+// -
+// -
+// -
+// - function to Generate Data
+// -// -
+// -
+// -
+
+type DataPoint = { x: number; y: number };
+
+function generateDataset(n: number): DataPoint[] {
+  const dataset: DataPoint[] = [];
+
+  for (let i = 0; i < n; i++) {
+    const x = Math.floor(Math.random() * width);
+    const y = Math.floor(Math.random() * height);
+    dataset.push({ x, y });
+  }
+
+  return dataset;
+}

viz/exercise/HoverDeathByStateSolution/Graph.tsx

@@ -1,32 +1,45 @@
-import { scaleLinear } from 'd3';
-
-const MARGIN = {
-  top: 30,
-  right: 30,
-  bottom: 100,
-  left: 100,
-};
+import { useState } from 'react';
 
 const width = 500;
 const height = 300;
+const sampleSize = 100000;
 
-export const Graph = () => {
-  const boundsWidth = width - MARGIN.left - MARGIN.right;
-  const boundsHeight = height - MARGIN.top - MARGIN.bottom;
+const data = generateDataset(sampleSize);
 
-  const xScale = scaleLinear().domain([0, 100]).range([0, boundsWidth]);
-  const yScale = scaleLinear().domain([0, 100]).range([boundsHeight, 0]);
+export const Graph = () => {
+  const [hovered, setHovered] = useState<number | null>(null);
 
   return (
     <svg width={500} height={300}>
-      <rect width={width} height={height} fill="lightgrey" fillOpacity={0.3} />
-
-      <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>
-        <rect width={boundsWidth} height={boundsHeight} fill="lightgrey" />
-
-        <circle cx={xScale(33)} cy={yScale(33)} r={10} fill="blue" />
-        <circle cx={xScale(66)} cy={yScale(66)} r={10} fill="green" />
-      </g>
+      {data.map((d, i) => {
+        return (
+          <circle
+            cx={d.x}
+            cy={d.y}
+            r={hovered === i ? 4 : 2}
+            fill={hovered === i ? 'red' : 'blue'}
+            onMouseOver={() => setHovered(i)}
+            fillOpacity={0.4}
+          />
+        );
+      })}
     </svg>
   );
 };
+
+// -
+// - function to Generate Data
+// -
+type DataPoint = { x: number; y: number };
+
+function generateDataset(n: number): DataPoint[] {
+  const dataset: DataPoint[] = [];
+
+  for (let i = 0; i < n; i++) {
+    const x = Math.floor(Math.random() * width);
+    const y = Math.floor(Math.random() * height);
+    dataset.push({ x, y });
+  }
+
+  return dataset;
+}