Data set used is Summer Olympic converted to json
View On bl.ocks.org
Chart Title: Number of Men To Women Sized by Participants
Channels:
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 Title: Number of Countries Hosted By Year Color By Host
Channels:
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")
xxxxxxxxxx
<html>
<head>
<script src="https://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>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js