bar chart racer - stanford...
TRANSCRIPT
Inspiration
2
Learning objectives
Sorting. Define a total order for a user-defined type; sort an array/list using system sort.
Reading an input file. Read and parse a text file.
Animation. Produce an animation by drawing a sequence of frames.
Data visualization. Develop a program to visualize data.
3
AZ
We provide a data type (with simple API) to draw static bar charts.
Bar chart data type
4
// create the bar chart String title = "The 10 most populous cities"; String xLabel = "Population (thousands)"; String source = "Source: United Nations"; BarChart chart = new BarChart(title, xLabel, source);
// add the bars and caption to the bar chart chart.add("Beijing", 22674, "East Asia"); chart.add("Cairo", 19850, "Middle East"); chart.add("Delhi", 27890, "South Asia"); chart.add("Dhaka", 19633, "South Asia"); chart.add("Mexico City", 21520, "Latin America"); chart.add("Mumbai", 22120, "South Asia”); chart.add("Osaka", 20409, "East Asia"); chart.add("Shanghai", 25779, "East Asia"); chart.add("São Paulo", 21698, "Latin America"); chart.add("Tokyo", 38194, "East Asia"); chart.setCaption("2018");
// draw the bar chart chart.draw();
We provide a data type (with simple API) to draw static bar charts.
Bar chart data type
5
# create the bar chart title = 'The 10 most populous cities' x_label = 'Population (thousands)' source = 'Source: United Nations' chart = BarChart(title, x_label, source)
# add the bars and caption to the bar chart chart.add('Beijing', 22674, 'East Asia') chart.add('Cairo', 19850, 'Middle East') chart.add('Delhi', 27890, 'South Asia') chart.add('Dhaka', 19633, 'South Asia') chart.add('Mexico City', 21520, 'Latin America') chart.add('Mumbai', 22120, 'South Asia') chart.add('Osaka', 20409, 'East Asia') chart.add('Shanghai', 25779, 'East Asia') chart.add('São Paulo', 21698, 'Latin America') chart.add('Tokyo', 38194, 'East Asia') chart.set_caption('2018')
# draw the bar chart chart.draw()
Sorting (or priority queue). Sort the bars and draw the top k.
Dictionary/map. Color the bars by category.
Elementary algorithms and data structures
6
bars appear in order added to bar chart
Latin America
To create an animation, repeat the following:
・Clear the drawing window.
・Draw next animation frame.
・Pause for a short period of time.
Computer animation
7
12 animation frames
1 2 3 4 5 6 7 8 9 10 11 12
bar chart
% more cities.txt
The most populous cities in the world from 1500 to 2018 Population (thousands) Sources: SEDAC; United Nations; Demographia
10 1500,Beijing,China,672,East Asia 1500,Cairo,Egypt,400,Middle East 1500,Gauda,India,200,South Asia 1500,Guangzhou,China,150,East Asia 1500,Hangzhou,China,250,East Asia 1500,Istanbul,Turkey,200,Europe 1500,Nanjing,China,147,East Asia 1500,Paris,France,185,Europe 1500,Tabriz,Iran,250,Middle East 1500,Vijayanagar,India,500,South Asia
⋮ 10 2018,Beijing,China,22674,East Asia 2018,Cairo,Egypt,19850,Middle East 2018,Delhi,India,27890,South Asia 2018,Dhaka,Bangladesh,19633,South Asia 2018,Mexico City,Mexico,21520,Latin America 2018,Mumbai,India,22120,South Asia 2018,Osaka,Japan,20409,East Asia 2018,São Paulo,Brazil,21698,Latin America 2018,Shanghai,China,25779,East Asia 2018,Tokyo,Japan,38194,East Asia
Simple, easy-to-parse file format.
・Read line-by-line.
・Fields separated by commas.
・Grouped by time period.
・Sorted by name within a group.
Remark. Can adjust assignment difficulty
by re-organizing input file format.
Input file format
8
title
x-axis labeldata source
group of records (for year 1500)
number of records in group
sorted by name
record (year, name, country, value, category)
Real-world data sets curated from various sources.
input file description time period data source
cities.txt most populous cities in the world 1500–2018 United Nations
brands.txt most valuable brands in the world 2000–2018 Interbrand
movies.txt highest grossing movies in the U.S. 1982–2018 Box Office Mojo
names.txt most popular baby names in the U.S. 1880–2018 U.S. Social Security
football.txt best football clubs in Europe 1960–2019 clubelo.com
patents.txt most patents granted by country 1980–2018 WIPO
Data
9
Curate a new data set.
・Inspirational idea.
・Web scraping.
・Data cleansing.
Enhance visualization.
・Interpolate frames.
・Add soundtrack.
・Rescale axes.
・Use icons.
Opportunities for creativity, enrichment, and inspiration
10
https://www.youtube.com/watch?v=14_VrLbz1M0
Most followed Twitter accounts (2015–2019)
11https://www.youtube.com/watch?v=v55p1LI1l8k
Most followed Twitter accounts
Most popular programming languages (1965–2019)
12https://www.youtube.com/watch?v=Og847HVwRSI
Most popular religions by number of adherents (1945–2019)
13https://www.youtube.com/watch?v=_rZwnJ1cE1s
Best selling plug-in electric vehicles in U.S. (2010–2019)
14https://www.youtube.com/watch?v=DltD9VgYEj0
COVID-19 cases by country outside China (January 21–March 9)
15https://www.youtube.com/watch?v=bMLtYVCFzKw