sandbox circle

pages/course/axis/axis-variations.tsx

@@ -45,12 +45,23 @@ export default function Home() {
         }
       />
 
-      <h2>Left axis</h2>
-
       <h2>Gallery</h2>
       <p>
         Show a gallery with the various axis styles available in the gallery.
       </p>
+      <p>
+        I need a first series of button: linear / ordinal / bandwidth / time /
+        any = type of scale
+      </p>
+      <p>Then a second series: left / bottom </p>
+      <p>
+        Then it shows all the example in the gallery using this setup with a set
+        of images
+      </p>
+      <p>
+        When user clicks on an image, it opens the sandbox so user has the code
+        ready to copy paste.
+      </p>
     </LayoutCourse>
   );
 }

pages/course/axis/axis-with-d3.tsx

@@ -75,6 +75,40 @@ export default function Home() {
       <CodeBlock
         code={`
 const axesRef = useRef(null);
+  `.trim()}
+      />
+      <p>
+        This ref is used to target a specific svg element where the axis will be
+        drawn:
+      </p>
+      <CodeBlock
+        code={`
+<g
+  width={boundsWidth}
+  height={boundsHeight}
+  ref={axesRef}
+  transform={...do the translate}
+/>`.trim()}
+      />
+      <p>
+        And then a <code>useEffect</code> is used to call the d3 functions that
+        render the axis.
+      </p>
+      <CodeBlock
+        code={`
+useEffect(() => {
+  const svgElement = d3.select(axesRef.current);
+  svgElement.selectAll("*").remove();
+  const xAxisGenerator = d3.axisBottom(xScale);
+  svgElement
+    .append("g")
+    .attr("transform", "translate(0," + boundsHeight + ")")
+    .call(xAxisGenerator);
+
+  const yAxisGenerator = d3.axisLeft(yScale);
+  svgElement.append("g").call(yAxisGenerator);
+}, [xScale, yScale, boundsHeight]);
+
   `.trim()}
       />
     </LayoutCourse>

pages/course/introduction/introduction-to-react.tsx

@@ -7,6 +7,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/component/UI/tabs';
 import { ScatterplotHoverHighlightPseudoClassDemo } from '@/viz/ScatterplotHoverHighlightPseudoClass/ScatterplotHoverHighlightPseudoClassDemo';
 import { TreemapHoverEffectDemo } from '@/viz/TreemapHoverEffect/TreemapHoverEffectDemo';
 import { LineChartSyncCursorDemo } from '@/viz/LineChartSyncCursor/LineChartSyncCursorDemo';
+import { Caption } from '@/component/UI/Caption';
+import { CodeSandbox } from '@/component/CodeSandbox';
 
 const previousURL = undefined;
 const currentURL = '/course/introduction/introduction-to-react';
@@ -36,9 +38,9 @@ export default function Home() {
           <>
             <p>
               React is a <b>JavaScript library</b> used for creating dynamic and
-              interactive user interfaces through reusable components. Developed
-              by Facebook, it simplifies the process of managing application
-              state and updating the user interface efficiently.
+              interactive user interfaces through <b>reusable components</b>.
+              Developed by Facebook, it simplifies the process of managing
+              application state and updating the user interface efficiently.
             </p>
             <p>
               This lesson will offer a concise overview of React and its key
@@ -48,26 +50,124 @@ export default function Home() {
         }
       />
 
+      {/* -
+-
+-
+-
+-
+-
+-
+- */}
       <h2>Why React?</h2>
-      <p>Explain why react is great?</p>
+      <p>
+        React was introduced in 2013, transforming the landscape of web
+        development.
+      </p>
+      <p>
+        Prior to its <b>component-based architecture</b>, building web
+        applications was complex and cumbersome.
+      </p>
+
+      <div className="flex flex-col items-center mt-8 mb-12">
+        <img
+          src="/img/react-website.png"
+          style={{ width: '100%', maxWidth: 400 }}
+          alt="Screenshot of the React website front page"
+        />
+        <Caption>
+          If you make charts for the web and don't know react, you're missing
+          out!
+        </Caption>
+      </div>
+      <p>
+        This is particularly evident in applications that involve{' '}
+        <b>data visualization</b>. The ability to create reusable components,
+        like a <code>Scatterplot</code> component, that can be utilized
+        throughout your app, is a game-changer for your development process.
+      </p>
+      <p>
+        <br />
+      </p>
+      <p>
+        If you're building a data visualization application, React offers
+        everything you need:
+      </p>
       <ul>
         <li>
-          Widespread, full of doc. Show a graph that compares with others.
+          Robust <b>state management</b>, perfectly suited for dynamic data.
+        </li>
+        <li>
+          A <b>component-driven approach</b>, ideal for creating interactive
+          visualizations.
         </li>
-        <li>Great state management: exactly what we need</li>
         <li>
-          Based on the concept of component: exactly what we need for dataviz
+          Extensive community support and comprehensive <b>documentation</b>.
         </li>
       </ul>
-
+      {/* -
+-
+-
+-
+-
+-
+-
+- */}
       <h2>Expected knowledge</h2>
       <p>
-        Explain that this is not a react course. If you know nothing about
-        react, you gonna struggle here. So learn somewhere first.
+        This course focuses on <strong>Data Visualization</strong> using React.
+      </p>
+      <p>
+        We won’t cover the basics of React, as that’s a vast topic deserving its
+        own dedicated course! For a solid introduction, check out this{' '}
+        <a
+          href="https://www.codecademy.com/learn/learn-react-introduction"
+          target="_blank"
+        >
+          intro by Codecademy
+        </a>
+        .
+      </p>
+      <p>
+        Basically, you should just be able to understand what's happening in
+        this sandbox:
+      </p>
+      <div className="full-bleed my-4 max-w-7xl mx-auto">
+        <CodeSandbox vizName="SvgCircle" />
+      </div>
+      <p>
+        However, you don’t need to be a React expert to take this course. Even
+        seasoned developers will find valuable insights here: creating
+        visualizations with React and D3 involves specialized knowledge that
+        differs significantly from typical UI development.
+      </p>
+      <p>
+        Lastly, you don’t need prior experience with D3 to get started! We’ll
+        use it sparingly and provide a thorough explanation of how it works.
       </p>
+
+      {/* -
+-
+-
+-
+-
+-
+-
+- */}
+      <h2>Alternatives</h2>
+      <p>Talk about Vue and </p>
+
       <p>
-        Explain that building viz is a very specific need, thus this course.
+        Link: https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190
       </p>
+
+      <div className="flex flex-col items-center mt-8 mb-12">
+        <img
+          src="/img/js-lib-download-npm-trend.png"
+          style={{ width: '100%', maxWidth: 900 }}
+          alt="schema showing the number of download evolution of the main JS libraries"
+        />
+        <Caption>React is big</Caption>
+      </div>
     </LayoutCourse>
   );
 }

util/lessonList.tsx

@@ -238,7 +238,7 @@ export const lessonList: Lesson[] = [
     ),
     readTime: 4,
     link: '/course/axis/bottom-axis',
-    status: 'not available',
+    status: 'wip',
     moduleId: 'axis',
   },
   {
@@ -253,7 +253,7 @@ export const lessonList: Lesson[] = [
     ),
     readTime: 4,
     link: '/course/axis/axis-variations',
-    status: 'not available',
+    status: 'wip',
     moduleId: 'axis',
   },
   {
@@ -268,7 +268,7 @@ export const lessonList: Lesson[] = [
     ),
     readTime: 4,
     link: '/course/axis/axis-with-d3',
-    status: 'not available',
+    status: 'wip',
     moduleId: 'axis',
   },
 

viz/HTMLCircle/App.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+export function App() {
+  const [color, setColor] = useState('black');
+
+  return (
+    <div style={{ textAlign: 'center', marginTop: '50px' }}>
+      <div
+        style={{
+          width: '100px',
+          height: '100px',
+          borderRadius: '50%',
+          backgroundColor: color,
+          margin: '0 auto',
+        }}
+      ></div>
+      <div style={{ marginTop: '20px' }}>
+        <button onClick={() => setColor('blue')}>Blue</button>
+        <button onClick={() => setColor('red')} style={{ marginLeft: '10px' }}>
+          Red
+        </button>
+      </div>
+    </div>
+  );
+}

viz/HTMLCircle/index.js

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

viz/HTMLCircle/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "pie-chart-basic",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "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"
+  ]
+}