borntofrappe / learning-d3

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

learning-d3

d3.js is vast.

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

Title	Keywords
Kagi Chart	kagi, stock
Dumbbell Plot	dumbbell, stats
Grouped Bar Chart	bar, group
Stacked Bar Chart Component	stack, component, input
Parallel Sets	sankey, filter
Sparkline Component	component, table
Beeswarm Plot	forceSimulation
Legend Component	component, dispatch
Hive Plot	hive, areaRadial
Arc Diagram Layout	layout, attributes
Adjacency Matrix Layout	layout, attributes
Perlin-like Noise	scale, transition
Tally Chart	call, filter
Proportional Area Chart	call, pie
Layered Area Chart	area, perspective
Multiple Series 3D Bar Chart	bar, perspective
Waffle Layout	layout, function
Scrollytelling	call, observer
Reusable Chart	call, function
Wind Rose	arc, layout
EU Gas Storage	lineRadial, transition
The Names of the Future	stack, streamgraph
Tournament Trees	hierarchy, tree
Word Map	treemap, text
CSS Technologies	line, transition
CSS Features	pack, grid, transition
Boxplot Experiment	scaleQuantile, datum
F1 Calendar Map	geo, transition, line
Beauteous Villages	geojson, transition
Perception of Probability	numerical, categorical
Complete the F1 Season	line chart, interaction
Spaghetti Plot	line, interaction
Seasonal Data	line chart, redesign
Geo Practice	geo, topojson
Ideal Lap Analysis	structure
Cumulative CO2 Emissions	bar, transition, animation
Nested and Stacked Bars	data binding, stack
Atmospheric Composition	pie, arc
Using D3	d3, react, svelte
Seine River	sankey, radial
Eurovision Votes	sankey, scatterplot
F1 Race Lap Chart	line
UNESCO World Heritage	geo, topojson
School Closures Choropleth Map	geo, topojson
Most Celebrated F1 Drivers	accessibility, transition
Number of Births	line, lineRadial, delaunay
Lines and Delaunay	mouse, line,delaunay
Football Stats	squares, hexagons
Bins	array, bin, random
Renderer(s)	d3, react
Arc Diagram	arc, path
Chord Diagram	chord, ribbon, arc
Area Spread	area, marker
Pseudo 3D D3	zdog
Correlation Study	line
Stacked and Random Percentages	random, area
Spider Chart	spider, lineRadial
Trending Turnips	line, lineRadial
Faux 3D D3	bar, pie
Data Practice	data, table, shape
Color Filled Simulation	simulation, force, on
Force Simulation	simulation
Color Scales	scale-chromatic, symbol
Stack Overflow Trends	marker, line
The Seasons of 2019	lineRadial, areaRadial
Positivity Tree	hierarchy, tree
Random Distribution	random, normal
Data Join	enter-update-exit, join

Setup

script.js hides my pitiful attempt to create a data visualization starter project. Running npm run dev creates a folder with a basic structure.

folderName
|
| README.md
| index.html
| style.css
| script.js

index.html references the D3 library - version 7.6.1 at the time of writing. style.css adds properties to set helpful defaults. script.js expects further instructions. README.md waits for a few words on the most salient features, on the main lessons learned.

Contributions

At the time of writing there is no intention of accepting contributions in terms of code. This repository is purely my attempt to practice with the D3 library and to teach by example. That being said, if you are so inclined, feel free to file an issue to:

1. ask for clarification

   Documentation is often sporadic and focuses on the sections I consider to be most important for the project at hand. It is a way to ease other developers in the visualization.

   Any question you have is is more than welcomed.

2. propose a visualization

   I'll try my best to answer with a D3 demo.