project

pages/course/scales/project.tsx

@@ -16,6 +16,8 @@ import { Sidenote } from '@/component/SideNote';
 import { CodeSandbox } from '@/component/CodeSandbox';
 import { ChartOrSandbox } from '@/component/ChartOrSandbox';
 import { BarplotTheEconomistDemo } from '@/viz/BarplotTheEconomist/BarplotTheEconomistDemo';
+import { buttonVariants } from '@/component/UI/button';
+import { cn } from '@/util/utils';
 
 const previousURL = '/course/scales/other-scale-types';
 const currentURL = '/course/scales/project';
@@ -46,8 +48,7 @@ export default function Home() {
             <p>
               We've built a solid foundation in <b>D3</b>, <b>SVG</b>, and{' '}
               <b>scales</b>! Now, let's put that knowledge to the test by
-              recreating a barplot inspired by
-              <b>The Economist</b>.
+              recreating a barplot inspired by <b>The Economist</b>.
             </p>
           </>
         }
@@ -60,36 +61,86 @@ export default function Home() {
 -
 - */}
       <h2>What we're trying to do:</h2>
-
-      <h2>The data</h2>
-
-      <ChartOrSandbox
-        vizName={'BarplotTheEconomist'}
-        VizComponent={BarplotTheEconomistDemo}
-        height={550}
-        maxWidth={700}
-        caption="Reproduction of a barplot made by the Economist"
-      />
-
+      <p>
+        The goal of this lesson is to reproduce this chart made by the
+        Economist. It has a few interesting features:
+      </p>
+      <ul>
+        <li>Title, Subtitle, Footer</li>
+        <li>Grid with number on top</li>
+        <li>Inline labels inside or outside the bars</li>
+      </ul>
+      <BarplotTheEconomistDemo width={700} height={550} />
       {/* -
 -
 -
 -
 -
 -
 - */}
-
-      <h2>It's taking shape! 🎉</h2>
+      <h2>The data</h2>
+      <p>The dataset is very simple! It looks like this:</p>
+      <CodeBlock
+        code={`
+export const data = [
+  {
+      count: 6,
+      name: "Hantavirus",
+  },
+  {
+      count: 7,
+      name: "Tularemia",
+  },
+]
+      `.trim()}
+      />
       <p>
-        You've now mastered two fundamental concepts of dataviz with React and
-        D3: <b>SVG</b> and <b>Scales</b>. This means{' '}
-        <b>we're ready to build actual graphs</b>!
+        You can find the complete js object{' '}
+        <a href="https://github.com/holtzy/react-graph-gallery/blob/main/viz/BarplotTheEconomist/data.ts">
+          here
+        </a>
+        .
       </p>
       <p>
-        In the next lesson, you'll dive into a hands-on exercise where we
-        recreate a real-world chart using everything you've learned so far.
+        <Link
+          className={cn('no-underline', buttonVariants({ variant: 'default' }))}
+          href="https://github.com/holtzy/react-graph-gallery/blob/main/viz/BarplotTheEconomist/data.ts"
+        >
+          Get full data
+        </Link>
       </p>
-      <p>Let's do it! 🙇</p>
+
+      {/* -
+-
+-
+-
+-
+-
+- */}
+      <h2>Good luck!</h2>
+      <p>A few hints to help you!</p>
+      <ul>
+        <li>
+          You can do <code>xScale.ticks(10)</code> to get an array with the most
+          logical tick informations
+        </li>
+      </ul>
+
+      {/* -
+-
+-
+-
+-
+-
+- */}
+      <h2>Solution</h2>
+      <ChartOrSandbox
+        vizName={'BarplotTheEconomist'}
+        VizComponent={BarplotTheEconomistDemo}
+        height={550}
+        maxWidth={700}
+        caption="Reproduction of a barplot made by the Economist"
+      />
     </LayoutCourse>
   );
 }

util/lessonList.tsx

@@ -223,7 +223,7 @@ export const lessonList: Lesson[] = [
     ),
     readTime: 4,
     link: '/course/scales/project',
-    status: 'wip',
+    status: 'free',
     moduleId: 'scales',
   },