Giters

borntofrappe / learning-d3

d3.js is vast. Here's a repository filled with projects to master the library, its many modules and powerful features.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Nested Charts

borntofrappe opened this issue · comments

commented

The Jamstack survey recently published a few inspiring visualizations, and a particular type of bar chart caught my eye. I'm referring to Job titles of devs who work on very large websites, but Years of Experience, by region works the same way, if with a larger dataset.

commented

The challenge is to replicate the visualization, highlighting the nested structure of the chart:

  • rows separating the data according to a metric (years of experience)

  • stacked rectangles breaking down each row according to another metric (region)

The project helps to practice with a stack generator and utility functions from the d3-array module, to group the data according to the desired key

commented

I finally got around to consider the project and created a demo with Svelte. Expect the d3-only version in a few hours.