John Berlin CS725 Information Visualizatoin
This visualization presents Summer Olympic data as two interactive charts. A scatter plot maps the number of male and female participants on its axes, with circle area encoding total participants. A bar chart shows the number of countries per Olympic year, with each bar colored by the hosting country. The implementation uses D3.js version 3 to render SVG elements and axes, reading data from a JSON file derived from sports-reference.com, with tooltips and animations enhancing the display.
AI-generated descriptionJohn Berlin CS725 Information Visualizatoin
Visualization Implementation (VI4)
Data set used is Summer Olympic converted to json
View On bl.ocks.org
Chart 1: Scatter Plot
Chart Title: Number of Men To Women Sized by Participants
Channels:
Magnitude:
- Position On Common Scale: The spacing in the x y axis shows relation of the number of men to women per data point. Through is the discriminability is easily maintained as each point is at a different position
- Area: The area size per data point shows a third ordered attribute number of participants. The discriminability of this channel is harder due to the simularities in area region
The following R code was used to generate the first image
library(ggplot2)
library(scales)
setwd(getwd())
d <- read.csv("data.csv")
ggplot(d,aes(x=Men,y=Women))+
geom_point(aes(size=Participants))+
scale_x_continuous(breaks = pretty_breaks(n=15)) +
scale_y_continuous(breaks=pretty_breaks(n=15)) +
labs(color = "Year") + ggtitle("Number of Men To Women Area by Participants")

Chart 2: Bar Chart
Chart Title: Number of Countries Hosted By Year Color By Host
Channels:
Magnitude:
- Position On Common Scale: Height of the bars shows the number of attending countries
Identity:
- Color Hue: Each color bar represents a host country
- Spatial Region: Each bar is spaced apart to show individual year
The discriminability for each of the channels is maintained as each bar is spaced evenily(Spacial Region). Color discriminability is also maintained as each color is unique. Height of each bar is unique thus providing the discriminability for magnitude.
The following R code was used to generate the second image.
library(ggplot2)
library(scales)
setwd(getwd())
d <- read.csv("data.csv")
ggplot(d,aes(x=factor(Year),y=Countries,fill=Country))+
geom_bar(stat="identity") +
labs(x = "Year") + ggtitle("Number of Countries Hosted By Year Color By Host")
