A platform for teaching, learning, and practicing

Data Visualization

using D3.js and SVG.

Get Started
Recent Visualizations
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
Basic Histogram
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
Packed Circles
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
Making a 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
Percentage distribution of social groups among States, 2007-08
Temperature Line Graph
Temperature Scatterplot
Starbucks Locations
Chicago Crime Data Analysis
Project | Interaction | Re-submit
Project | Interaction | Re-submit
Project | last part-resubmit
Project | Interaction
Chicago Crime Data Analysis
Project | last part
Cars Scatterplot
Project | Load color | legend | moving
Scatterplot
Project | Load color | legend
Project | Load color
Project | Load
London Air Scatter Plot Back vs Road
Customizing Axes of Bar Chart
Project | Primary Balance | Part 1 | Chloro-new
Choropleth Map with Interactive Filtering
Untitled
Project | Primary Balance | Chloro | Filter-2
Project | Primary Balance | Chloro | Filter
Project | Primary Balance | Chloro | Filter
Hello VizHub!
Chandrapur Distric Rural Household Monthly Income less than 5000
Map with selectable country
Map with Selectable Countries
B.Toys Sales: GMV v.s Net Renvenu Rate
Avocado Sales US States
Avocado Sales US States
Circles on a Map
Fixed projection for US States
Fixed projection for US States
Final Project Week 3
Cars Report
Making a bar chart
Starting Viz - Smiley Face
Project | Primary Balance | Chloro
Project 10/24: added tooltip for each dot; will try to convert into a beeswarm
Project: Stacked Line
Melting Data for Multiple Lines
Fixed projection for US States
Project in progress
Fixed projection for US States
Fixed projection for US States
Fixed projection for US States
Untitled
Fixed projection for US States
Formatting axes
Cars Scatter Plot
Formatting axes
Customizing Axes
Auto MPG Summary
Making a Bar Chart
Let's make a face with D3.js!
Shapes with SVG and CSS
HTML Cars Report
Multiple Pollutant Line plot Data load
Multiple Line plot with Dropdown
Customizing Axes
Customizing Axes
Hello VizHub!
Cars Report
Selecting a Year on a Line Chart
Project in progress
Let's make a face with D3.js!
mod Pitch2
smile to a smile
Hello VizHub!
Hello VizHub!
Hello VizHub!
Let's make a map with D3.js!
Choropleth Map
Let's make a map with D3.js!
Let's make a map with D3.js!
Happiness Level Scatter Plot
Choropleth - Dry Run
Data Visualization Project
Project: Multiple Line
Let's make a map with D3.js!
Let's make a map with D3.js!
Fixed projection for US States
Fixed projection for US States
Fixed projection for US States
Melting Data for Multiple Lines
Project | Primary Balance | Part 1
Project: Primary Balance, Part 2
Chicago Crime Data Analysis
mod Pitch
Chicago Crime Dataset Analysis
Fixed projection for US States
US States Colored By Region
Cars Scatter Plot with horsepower and weight against cylinders
Fixed projection for US States
Fixed projection for US States
Project: Primary Balance, Part 1
Scatter Plot with Menu by mfr(legends)
Happiness Level Line Chart - Test
Happiness Level Line Chart
Imports from 2000 to 2016
Final Project Week 2
Imports from 2000 to 2016
Imports from 2000 to 2016
Imports with Menus
Imports with Menus
Imports with Menus
World Trades vs Taxes in 2015
Circles on a Map
Project: Primary-Balance Testing-csv
World Trades vs Taxes in 2015
Feedback