Skip to content

Instantly share code, notes, and snippets.

@N0taN3rd

N0taN3rd/CountriesHostedByYear.png

Last active February 16, 2016 03:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save N0taN3rd/2d44676382c144219f89 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save N0taN3rd/2d44676382c144219f89 to your computer and use it in GitHub Desktop.
Download ZIP
Visualization Implementation (VI4)
Raw
README.md

John 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")

Chart1

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")

Chart2

Raw
index.html
<!doctype html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.legend {
font-size: 10px;
}
rect {
stroke-width: 2;
}
.dot {
stroke: #000;
}
body {
font: 10px sans-serif;
}
.bar {
fill: #c07f2b;
}
.bar text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.tooltip {
position: absolute;
width: 200px;
height: 28px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="chart1">
</div>
<div id="chart2">
</div>
<script type="text/javascript">
function scatter(data) {
var margin = {top: 20, right: 20, bottom: 20, left: 50},
padding = 45,
padding2 = {top: 10, right: 10, bottom: 100, left: 100},
outerWidth = 950,
outerHeight = 750,
innerWidth = outerWidth - margin.left - margin.right,
innerHeight = outerHeight - margin.top - margin.bottom,
containerDim = {
w: innerWidth - padding2.left - padding2.right,
h: innerHeight - padding2.top - padding2.bottom
};
var xScale = d3.scale.linear()
.domain([d3.min(data, function (elem) {
return elem.Men
}) - 1,
d3.max(data, function (elem) {
return elem.Men
}) + 1])
.range([padding2.left, containerDim.w - margin.right * 4]);
var yScale = d3.scale.linear()
.domain([d3.min(data, function (elem) {
return elem.Women
}) - 1,
d3.max(data, function (elem) {
return elem.Women
}) + 1])
.range([containerDim.h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(data, function (elem) {
return elem.Participants
})])
.range([1, 10]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(20);
var svg = d3.select("#chart1")
.append("svg")
.attr("width", containerDim.w)
.attr("height", containerDim.h);
svg.append("text")
.attr("x", 450)
.attr("y", 25)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Number of Men To Women Area by Participants");
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", function (elem) {
return rScale(elem.Participants);
})
.attr("cx", function (elem) {
return xScale(elem.Men);
})
.attr("cy", function (elem) {
return yScale(elem.Women);
});
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (containerDim.h - padding) + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", containerDim.w / 2)
.attr("y", 20)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Number of Men");
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding2.left + ",0)")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", -50)
.attr("x", -250)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.text("Number of Women");
}
function bar(data) {
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.5);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.ticks(15)
.orient("left");
d3.select('body').append("svg")
.attr("class", "chart");
var barChart = d3.select(".chart")
.attr("width", width + margin.left + margin.right + 55)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tooltip = d3.select("#chart2").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var div = d3.select("body").append("div")
.classed("tooltip", true)
.style("opacity", 0);
var cValue = function (d) {
return d.Country;
},
color = d3.scale.category20();
div.append('div')
.attr('class', 'label');
y.domain([0, d3.max(data, function (d) {
return d.Countries;
})]);
x.domain(data.map(function (d) {
return d.Year;
}));
barChart.append('g').classed('x axis', true)
.attr('transform', "translate(0," + height + ")").call(xAxis);
barChart.append("g")
.attr("class", "y axis")
.call(yAxis);
barChart.append("text")
.attr("x", 450)
.attr("y", 6)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Number of Countries Hosted By Year Color By Host");
barChart.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.style("fill", function (elem) {
return color(cValue(elem));
})
.attr("x", function (d) {
console.log(d);
return x(d.Year);
})
.attr("width", x.rangeBand())
.attr("y", function (d) {
return y(d.Countries);
})
.attr("height", function (d) {
return height - y(d.Countries);
}).on("mouseover", function (d) {
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html("Host: " + d.Country + " hosting: " + d.Countries + " contries")
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function (d) {
tooltip.transition()
.duration(500)
.style("opacity", 0);
});
var legend = barChart.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function (d, i) {
return "translate(0," + i * 20 + ")";
});
// draw legend colored rectangles
legend.append("rect")
.attr("x", width + 48)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
// draw legend text
legend.append("text")
.attr("x", width + 45)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function (d) {
return d;
});
}
d3.json("olympics.json",function(error,data){
data = data.reverse();
scatter(data);
bar(data);
d3.select(self.frameElement).style("height", "1300px").style("width","1200px");
});
</script>
</body>
</html>
Raw
olympics.json
[
{
"Year": 2012,
"City": "London",
"Country": "Great Britain",
"Countries": 205,
"Participants": 10519,
"Men": 5864,
"Women": 4655,
"Sports": 32,
"Events": 302
},
{
"Year": 2008,
"City": "Beijing",
"Country": "China",
"Countries": 204,
"Participants": 10901,
"Men": 6290,
"Women": 4611,
"Sports": 34,
"Events": 303
},
{
"Year": 2004,
"City": "Athina",
"Country": "Greece",
"Countries": 201,
"Participants": 10561,
"Men": 6257,
"Women": 4304,
"Sports": 34,
"Events": 301
},
{
"Year": 2000,
"City": "Sydney",
"Country": "Australia",
"Countries": 200,
"Participants": 10648,
"Men": 6579,
"Women": 4068,
"Sports": 34,
"Events": 300
},
{
"Year": 1996,
"City": "Atlanta",
"Country": "United States",
"Countries": 197,
"Participants": 10342,
"Men": 6819,
"Women": 3520,
"Sports": 31,
"Events": 271
},
{
"Year": 1992,
"City": "Barcelona",
"Country": "Spain",
"Countries": 169,
"Participants": 9386,
"Men": 6659,
"Women": 2721,
"Sports": 29,
"Events": 257
},
{
"Year": 1988,
"City": "Seoul",
"Country": "South Korea",
"Countries": 159,
"Participants": 8453,
"Men": 6249,
"Women": 2202,
"Sports": 27,
"Events": 237
},
{
"Year": 1984,
"City": "Los Angeles",
"Country": "United States",
"Countries": 140,
"Participants": 6799,
"Men": 5224,
"Women": 1567,
"Sports": 26,
"Events": 221
},
{
"Year": 1980,
"City": "Moskva",
"Country": "Soviet Union",
"Countries": 80,
"Participants": 5259,
"Men": 4135,
"Women": 1123,
"Sports": 23,
"Events": 203
},
{
"Year": 1976,
"City": "Montréal",
"Country": "Canada",
"Countries": 92,
"Participants": 6073,
"Men": 4812,
"Women": 1260,
"Sports": 23,
"Events": 198
},
{
"Year": 1972,
"City": "München",
"Country": "West Germany",
"Countries": 121,
"Participants": 7113,
"Men": 6052,
"Women": 1060,
"Sports": 23,
"Events": 195
},
{
"Year": 1968,
"City": "Ciudad de México",
"Country": "Mexico",
"Countries": 112,
"Participants": 5558,
"Men": 4775,
"Women": 783,
"Sports": 20,
"Events": 172
},
{
"Year": 1964,
"City": "Tokyo",
"Country": "Japan",
"Countries": 93,
"Participants": 5137,
"Men": 4457,
"Women": 680,
"Sports": 21,
"Events": 163
},
{
"Year": 1960,
"City": "Roma",
"Country": "Italy",
"Countries": 83,
"Participants": 5351,
"Men": 4738,
"Women": 613,
"Sports": 19,
"Events": 150
},
{
"Year": 1956,
"City": "Melbourne",
"Country": "Australia",
"Countries": 67,
"Participants": 3189,
"Men": 2818,
"Women": 371,
"Sports": 18,
"Events": 145
},
{
"Year": 1952,
"City": "Helsinki",
"Country": "Finland",
"Countries": 69,
"Participants": 4932,
"Men": 4411,
"Women": 521,
"Sports": 19,
"Events": 149
},
{
"Year": 1948,
"City": "London",
"Country": "Great Britain",
"Countries": 59,
"Participants": 4397,
"Men": 3951,
"Women": 445,
"Sports": 21,
"Events": 149
},
{
"Year": 1936,
"City": "Berlin",
"Country": "Germany",
"Countries": 49,
"Participants": 4484,
"Men": 4124,
"Women": 360,
"Sports": 24,
"Events": 143
},
{
"Year": 1932,
"City": "Los Angeles",
"Country": "United States",
"Countries": 47,
"Participants": 1921,
"Men": 1719,
"Women": 202,
"Sports": 18,
"Events": 126
},
{
"Year": 1928,
"City": "Amsterdam",
"Country": "Netherlands",
"Countries": 46,
"Participants": 3248,
"Men": 2936,
"Women": 312,
"Sports": 17,
"Events": 120
},
{
"Year": 1924,
"City": "Paris",
"Country": "France",
"Countries": 45,
"Participants": 3256,
"Men": 3100,
"Women": 156,
"Sports": 20,
"Events": 130
},
{
"Year": 1920,
"City": "Antwerpen",
"Country": "Belgium",
"Countries": 29,
"Participants": 2677,
"Men": 2599,
"Women": 78,
"Sports": 25,
"Events": 160
},
{
"Year": 1912,
"City": "Stockholm",
"Country": "Sweden",
"Countries": 29,
"Participants": 2424,
"Men": 2356,
"Women": 53,
"Sports": 17,
"Events": 107
},
{
"Year": 1908,
"City": "London",
"Country": "Great Britain",
"Countries": 22,
"Participants": 2024,
"Men": 1980,
"Women": 44,
"Sports": 24,
"Events": 109
},
{
"Year": 1906,
"City": "Athina",
"Country": "Greece",
"Countries": 21,
"Participants": 841,
"Men": 835,
"Women": 6,
"Sports": 13,
"Events": 74
},
{
"Year": 1904,
"City": "St. Louis",
"Country": "United States",
"Countries": 15,
"Participants": 650,
"Men": 644,
"Women": 6,
"Sports": 18,
"Events": 95
},
{
"Year": 1900,
"City": "Paris",
"Country": "France",
"Countries": 31,
"Participants": 1224,
"Men": 1201,
"Women": 23,
"Sports": 20,
"Events": 95
},
{
"Year": 1896,
"City": "Athina",
"Country": "Greece",
"Countries": 12,
"Participants": 176,
"Men": 176,
"Women": 0,
"Sports": 9,
"Events": 43
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment