Hi, I am Muri. My actual name is Murat, so that is why it's called "Muratorium".

Made in Berlin, 2020.

Video Tutorial Series

Using React (Hooks) with D3

Using React (Hooks) with D3 is a video tutorial series on combining React with D3. Both React and D3 have introduced new and easier ways to work with them (React: Hooks, D3: "Join" API), and this is why I think it is great time to learn about combining them.

Code is available on GitHub.

My interest for D3 was ignited by former colleague and good friend Sascha Klatt.

Series (17 videos)

  • [01] The Basics (19:30)

    Learn the basics of combining D3's general update pattern with React's Functional Components and Hooks such as useRef, useEffect, and useState.

  • [02] Curved Line Chart (8:07)

    Learn rendering a curved line using a path element and d3.line().

  • [03] Axes and Scales (15:12)

    Learn drawing axes with d3.scaleLinear() and d3.axisBottom().

  • [04] Animated Bar Chart (15:53)

    Learn drawing an bar chart with d3.scaleBand() and transitions.

  • [05] Interactivity (8:45)

    Learn adding interactivity to your chart elements.

  • [06] Responsive Chart Components with ResizeObserver (21:48)

    Learn making your charts responsive with a custom React Hook that makes use of the ResizeObserver API.

  • [07] Gauge Chart with Machine Learning (23:18)

    Learn creating a gauge chart with data provided by a machine learning model (Teachable Machine).

  • [08] Timeline (Breaking Bad) (14:28)

    Learn creating a timeline with d3.scaleTime().

  • [09] Racing Bar Chart (19:25)

    Learn crafting a racing bar chart by discovering similarities between React and D3.

  • [10] Animated Tree Chart (24:18)

    Learn working with hierarchical data by creating an animated tree chart with d3.hierarchy().

  • [11] Physics-based Force Layout (27:25)

    Learn applying physics and forces to nodes on a tree chart with d3.forceSimulation().

  • [12] World Map with D3-geo (18:48)

    Learn drawing world map with d3.geoPath().

  • [13] Filtering Visually (with Brushes I) (17:58)

    Learn adding brushes to your charts to select data.

  • [14] Filtering Visually (with Brushes II) (15:28)

    Follow-up to adding brushes to your charts to select data and create a minimap like in VS Code.

  • [15] Stacked Bar Chart (26:43)

    Learn creating a stacked bar chart with d3.stack().

  • [15+] Stacked Area Chart (10:01)

    A variation of the previous video about stacked charts, this time with d3.area().

  • [16] Zoomable Line Chart (17:35)

    Learn adding a simple zoom + pan behavior to your charts which use continious scales such as d3.scaleLinear().