A platform for teaching, learning, and practicing

Data Visualization

using D3.js and SVG.

Get Started
Recent Visualizations
Shapes with SVG amd CSS
Hello VizHub
Makeing a bar chart!
Let's make a face with D3.js!
Untitled
Hello VizHub
Cars Report
Hello VizHub
Hello VizHub
Q3 Scatter Plot
Q3 Scatter Plot
Test2
Test1
Learn to draw smile with d3
JSX Transpilers by Bundle Size
Q3
Q3
scatter plot v1
Hello VizHub
Hello VizHub
Hello VizHub
Hello VizHub
Ordinal Scatter Plot
Cars Scatter Plot
Bowl of Fruit - General Update Pattern
Bowl of Fruit - General Update Pattern
Bowl of Fruit - General Update Pattern
World Population Area Chart
Temperature in San Francisco Area Chart
Temperature in San Francisco Line Chart
Temperature in San Francisco Line Chart
Temperature in San Francisco Scatter Plot
Cars Scatter Plot
Scatter Plot
Customizing Axes
Bar Chart
D3 v5 Zoomable Sunburst
Let's make a face with D3.js!
Making a Bar Chart
Making a Bar Chart
Let's make a face with D3.js!
Let's make a face with D3.js!
Line Chart with Multiple Lines
Shapes with SVG and CSS
HTML Cars Report
Hello VizHub
Untitled
Salary scatter plot
Salary bullet
Cars Report
Cars Report
Hello VizHub
Making a Bar Chart
General Update Pattern for Nested Items
CAR-T targes
CAR-T targes
CAR-T targes
Hello VizHub
Hello VizHub
React Hooks Bowl of Fruit
Customizing Ranking of German Companies
Layout Test
Let's make a face with D3.js!
General Update Pattern for Nested Items
D3 v5 Circle Packing from Observable
General Update Pattern
Aggregated Event Sequences with Text Search
D3 v5 Circle-Packing
D3 v4 Circle-Packing
World Countries Tree
Treemap from bl.ocks.org
yggdrasil
D3Times
Ranking of German Companies
Face Maker
blank canvas
blank canvas
Customizing Axes
Customizing Axes
yggdrasil
Logo design in Color
Cars Scatter Plot
d3 Cars Scatter Plot
blank canvas
d3 Scatter Plot
blank canvas
Logo design
Choropleth Map
Fruit Bowl--Transitons and Labels
Cars Scatter Plot
Cars Scatter Plot
Logo design
Hello VizHub
Making a Bar Chart for air quality data
Event Sequences with Map and Histogram Overview
Area Chart with Brushing
d3 Customizing Axis
Hello VizHub
Hello VizHub
Mass/Height Menu
Merhaba DM
Merhaba DM
Customizing Axes
Ordinal Scatter Plot
Area Chart with Brushing
Thumbnails Tree
Ordinal Scatter Plot
Ordinal Scatter Plot
Customizing Axes
Let's make a face with D3.js!
Shapes with SVG and CSS
Hello D3
d3 Bar Chart
Making a Bar Chart
Hello VizHub
Hello VizHub
another Tree
a Tree
3D Scatter Plot
Untitled
Let's make a face with D3.js!
Let's make a face with D3.js!
Shapes with SVG and CSS
HTML Cars Report
Let's make a face
Untitled
Selecting a Year on a Line Chart
Cars Report
Untitled
Cars Scatter Plot
Shapes with SVG and CSS
Mass/Height Menu
Untitled
Bar Chart From Memory
Cars
Making a Bar Chart
Cars
d3 Happy Face
Bowl of Fruit - General Update Pattern Special Cases
HTML Cars Report
axis
Untitled
bars!
Make a Face with D3.js
Let's make a face with D3.js
Shapes with SVG and CSS
shapes n shit
Hello VizHub
VizHub Force Directed Forks Tree
VizHub Forks Tree
VizHub Forks Tree (outtake)
Hello VizHub
Shapes with SVG and CSS
Shapes with SVG and CSS
Selecting a Year on a Line Chart
Cars Report
Cars Report
Let's make a face with D3.js!
Let's make a face with D3.js
HTML Cars Report
Let's make a map with D3.js!
Let's make a map with D3.js!
Make a Face with D3.js
Making a Bar Chart
Choropleth Map
Choropleth Map
Let's make a map with D3.js!
Let's make a face with D3.js!
Shapes with SVG and CSS
Cars Report
Cars Report
Hello VizHub
Hello VizHub
Hello VizHub
Cars Scatter Plot with Menu
Making a Bar Chart
Hello VizHub
Tree Example
Chloropleth Map - Interactive
example 1
Swantons
Swanton's Travels
Bowl of Fruit - General Update Pattern
Cars Scatter Plot
Hello VizHub
Chloropleth Map - Color
Hello VizHub
Car Report
Circles with Animation
Hello VizHub
Making a Bar Chart
#5 G. Riha Air Pollution and Income
Making a Bar Chart
Let's make a face with D3.js!
Los Angeles G. Riha Air Pollution and Income
Orange County G. Riha Air Pollution and Income
Static SF Bay Area G. Riha Air Pollution and Income
SF Bay Area G. Riha Air Pollution and Income
World Suicide Statistics
Circles and rectangles grid
#4 G. Riha Air Pollution and Income
#3 G. Riha Air Pollution and Income
#2 G. Riha Air Pollution and Income
G. Riha Air Pollution and Income
Let's make a map with D3.js!
G. Riha LA Pollution Analysis
Multiple SVGs with Functio/n
Color and Size Legends
D3 Bar Chart
Bar Chart
Tree with Countries
Blank Canvas
ColorScale and building a module
Color And Size Legend Ludo
Color Legend
Color Legends
Color Legends
refactorBubble
Let's make a face with D3.js!
Mass/Height
Making a Bar Chart
Shut up!
Let's make a face with D3.js!
Fruit - Update Pattern - Nested, Transitions
Mike Bostock's zoom
World Map - Cheap Tricks Version
add Menus
G. Riha CA Pollution Analysis
TOP 10 MOST POPOLOUS CITIES
TOP 10 POPULOUS CITIES IN AUSTRALIA
Multiple SVGs
Mass/Height Menu
Mass/Height Menu
Making a Bar Chart
World Map - topojson
Mass/Height Menu
Car Sales
Mass/Height Menu
Mass/Height
Mass/Height
Car Sales
Scatter Plot with Menus
Scatter Plot with Menus
Fruit: Hover Gets Ya Selected
Buble game
Fruit: Click to Select
Thumbnails Tree
181202_05_Nested circles
181202_04_ Nice hoevering effect
181202_02_ Put some balls in
181202_02_ Put some balls in
181202_02_ Divide window_01
Bowl of Fruit, Highlight on Hover
Bowl of Fruit, Interaction click
181202_02_ Divide window
181202_01_Viewport
Understanding the zoom on d3.js
Nested Elements with transition
Let's make a face with D3.js!
Shapes with SVG and CSS
Fault Localization 9 load csv
Smiley Face
Sad Face
Nested Elements
Making a Bar Chart
Bowl of Fruit, Interaction on Click
Untitled
Fun with Balls V00_01
SVG Path
Fault Localization 8 update
Fruit - Update Pattern - Nested
Fruit - Update Pattern - Nested
Brush() & Filter()
Fault Localization 7
Scatter Plot
Fault Localization 6
Scatter Plot
Top 10 most populous contries
Scatter Plot with Menus
Understanding the zoom on d3.js
Bowl of Fruit - General Update Pattern Special Cases
Weigh/Height Comparison on Gender With Menus
Untitled
Weigh/Height Comparison on Gender
Let's make a Bar Chart with D3.js!
Blank Canvas
Fruit - Update Pattern - Nested
Scatter Plot with Menus
Auto MPG Summary
Hello world
Scatter Plot with Menus
Let's make a map with D3.js!
Fruit - Update Pattern
Weigh/Height Comparison on Gender
Weigh/Height Comparison on Gender
500 Weight/Height
500 Weight/Height
500 Weight/Height
Weigh/Height Comparison on Gender
World Pop Area Chart
Making a Bar Chart
Bowl of fruit
Avocados Area Chart with Time
Avocados Line Chart with Time
Fault Localization 5
Making a Bar Chart
Population in Different Countries
Fault Localization 4
Fault Localization 3
Avocados Scatter Plot with Time
Making a Bar Chart
Fault Localization 2
World population area chart
Line plot - weather
Untitled
Customizing Axes
Fault Localization
Avocados Scatter Plot
Cars Scatter Plot
Line plot - weather
Smiley Face
Scatter Plot
Shapes with SVG and CSS
Cars Scatter Plot 3
HTML Cars Report
Cars Scatter Plot 2
Cars Report
Selecting a Year on a Line Chart
Customizing Axes
Project Schedule Visualization
Auto MPG Summary
Making a Bar Chart
Making a Bar Chart
Farmer's suicides in Maharashtra: Jan-Mar-Year 2018
Let's make a face with D3.js!
Cars Scatter Plot
Lets make a face
MultiLine Chart
Scatter Plot with Menus
Sequences sunburst
Books with Pages
Scatter Plot
Canvas Force Tutorial
Hello VizHub
Hello VizHub
Line Chart with Multiples Lines - By Year
Example of Loading External Data
Immigration Data Table - 1892
Line Chart with Multiples Lines
Choropleth Map
Farmer's suicides in Maharashtra: Jan-Mar-Year 2018
Let's make a map with D3.js!
G. Riha Citibike & Poverty Analysis
Cars Report
VizHub User Count Over Time
Average Circle Overlaped
of Fruit - Animated Transitions
G. Riha Citibike Analysis
G. Riha Citibike & Poverty Analysis
Average Circle
Hello VizHub
Hello VizHub
Frisco Schools
Books with Pages
[REDO] Interactive Filtering
Cars Scatterplot
Final Project Week 2
Bar Chart
World test
Making a Bar Chart
Barchart
Making a Bar Chart
Chropleth Map
Hello VizHub
World Countries Tree
Hello VizHub
Hello VizHub
Let's make a face with D3.js!
Hello VizHub
World Countries Tree
Kids Shape and Color App
Multiple Line plot
Color and Size Legends
World Countries Tree
Blank Canvas
Happiness Level Chart
Let's Make a Map - Tricks
Let's Make a Map
Bowl of Fruit - Hover to select
Bowl of Fruit - Click to select
Final Project
Choropleth Map with Interactive Filtering
Choropleth Map
Choropleth Map
World Countries Tree
Circle overlap
First Webpage
mod Pitch4
Hello VizHub
Hello VizHub
Happiness Level Chart
Final Project
Eating Around the World
Project: Stacked Line (Artist)
mod Pitch3
[TEST] Pie Chart
1027Happiness Level Scatter Plot
Let's make a face with D3.js!
General Update Pattern / Nested
Primary Balance filter 1
Hello VizHub
Debt over time plot: India
General Update Pattern
Overview - Compact Event Sequences
Primary Balance on Choropleth Map
Project | Interaction | Re-submit
Circles on a Map
World Pop. Area Chart
Area Chart
Line Chart
Temp in SF Scatter Plot
Car Scatter Plot
Scatter Plot
Kids Shape and Color App
Color and Size Legends
Kids Shape and Color App
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Line Chart with Multiple Lines
Making a Bar Chart
Hello VizHub
Sequences sunburst
Hello VizHub
C'est comment
Hello VizHub
Hello VizHub
B.Toys Sales: GMV v.s Net Renvenu Rate
Event Sequences with Overview
Make a Bar Chart
Imports from 2000 to 2016
Customizing Axes
Making a Bar Chart
Let's make a face with D3.js!
Shapes with SVG and CSS
Let's Make a Face
HTML Cars Report
Hello VizHub
Hello VizHub
Event Sequences with Filtering and Interations
Chicago Crime Data First Pass
Log Scale Example
Hello P5.js
Population by Age and Race
London Air2
Avocado Sales US States
Map with Selectable Countries
Avocado Sales US States
Temperature in San Francisco Area Chart
Avocado Sales US States
Selecting a Year on a Line Chart
Temperature in San Francisco Line Chart
Temperature in San Francisco Scatter Plot
Cars Scatter Plot
Cars Scatter Plot
1027Happiness Level Scatter Plot
Customizing Axis
1027Happiness Level Line Chart
Project 10/31
1027Happiness Level Line Chart
London Air
B.Toys Sales: GMV v.s Net Renvenu Rate
Happiness Level Line Chart - Test
Project in progress - Week x
Avocado Sales US States
Avocado Sales US States
Avocado Sales US States
Avocado Sales US States
Bowl of Fruit - Update Pattern
Data Visualization Project
Making a Bar Chart
Let's make a map with D3.js!
Circles on a Map
World Population Area Chart
Temperature Area Chart
Customizing Axes
Cars Scatter Plot
First Bar Chart
World Energy Report
First Custom Axis Barchat
Feedback