Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
415 lines (339 sloc) 11.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gender at the Olympics</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.datapoint {
r: 2;
}
.line {
fill: none;
stroke: #5aae61;
stroke-width: 1.5px;
}
#id_line_women_1,
#id_line_women_2,
#id_line_women_3 {
stroke: steelblue;
}
.tooltip {
position: absolute;
width: 200px;
height: 280px;
pointer-events: none;
font-size: 12px;
}
</style>
</head>
<body>
<script>
var margin = {top: 40, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var format = d3.time.format('%Y');
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickFormat(d3.time.format('%Y'));
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
var line = d3.svg.line()
.x(function(d) { return x(d.Year);})
.y(function(d) { return y(d['Medal Count']);});
function responsivefy(svg) {
// get container + svg aspect ratio
var container = d3.select(svg.node().parentNode),
width = parseInt(svg.style("width")),
height = parseInt(svg.style("height")),
aspect = width / height;
// add viewBox and preserveAspectRatio properties,
// and call resize so that svg resizes on inital page load
svg.attr("viewBox", "0 0 " + width + " " + height)
.attr("perserveAspectRatio", "xMinYMid")
.call(resize);
// to register multiple listeners for same event type,
// you need to add namespace, i.e., 'click.foo'
// necessary if you call invoke this function for multiple svgs
// api docs: https://github.com/mbostock/d3/wiki/Selections#on
d3.select(window).on("resize." + container.attr("id"), resize);
// get width of container and resize svg to fit it
function resize() {
if(parseInt(container.style('width')) < 960) {
targetWidth = parseInt(container.style("width")) ;
console.log(targetWidth);
}
else {
targetWidth = 960 - margin.left - margin.right;
}
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
}
}
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(responsivefy)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var tooltip = d3.select('body').append('div')
.attr('class', 'tooltip')
.style('opacity', 1)
.attr('align', 'right');
d3.csv('Year_and_Gender_Olympics_Dataset_All_Years.csv', function(data) {
data.forEach(function(d) {
d.Year = format.parse(d.Year);
d['Medal Count'] = +d['Medal Count'];
});
var maxy = d3.max(data, function(d) { return d['Medal Count']; });
var rectData1 = [{x: format.parse('1913'), y:maxy+10, width: 53, height:height+10}]
var rectData2 = [{x: format.parse('1937'), y:maxy+10, width: 85, height:height+10}]
var textData1 = [{x: format.parse('1916'), y:maxy-700, text: 'World War I'}]
var textData2 = [{x: format.parse('1942'), y:maxy-700, text: 'World War II'}]
var toolTips = [
{x: format.parse('1928'),
y: 95,
text:'Women compete in track and field events for the first time.'},
{x: format.parse('1900'),
y: 11,
text: '1900. Women first participate in the Olympic Games.'},
{x: format.parse('1984'),
y: 486,
text: '1984. Women first participate in shooting events at the Olympic Games.'},
{x: format.parse('2000'),
y: 889,
text: '2000. First time women participate in weightlifting at the Olympic Games.'},
{x: format.parse('2008'),
y: 932,
text: '2008. There are still fewer Olympic Medals available to female athletes, but the Games have come a long way from founder de Coubertin\'s statemnt that women ought not to take part, as their participation would be \"impractical, uninteresting, unaesthetic, and incorrect\"'}
]
var lineLabels = [
{x: format.parse('2006'),
y: 1120,
text: 'Men',
colour: '#5aae61'},
{x: format.parse('2004'),
y: 950,
text: 'Women',
colour: 'steelblue'}]
women_data = data.filter(function(row) {
if (row.Gender == 'Women'){
return row
};
});
men_data = data.filter(function(row) {
if (row.Gender == 'Men') {
return row
};
});
women_data_1 = women_data.filter(function(row) {
if (row.Year < format.parse('1916')) {
return row
};
});
women_data_2 = women_data.filter(function(row) {
if (row.Year > format.parse('1916')){
if (row.Year < format.parse('1940')){
return row
};
};
});
women_data_3 = women_data.filter(function(row) {
if (row.Year > format.parse('1940')) {
return row
};
});
men_data_1 = men_data.filter(function(row) {
if (row.Year < format.parse('1916')) {
return row
};
});
men_data_2 = men_data.filter(function(row) {
if (row.Year > format.parse('1916')) {
if (row.Year < format.parse('1940')){
return row
};
};
});
men_data_3 = men_data.filter(function(row) {
if (row.Year > format.parse('1940')) {
return row
};
});
x.domain(d3.extent(data, function(d) { return d.Year; }));
y.domain(d3.extent(data, function(d) { return d['Medal Count'];}));
/* Title */
svg.append('text')
.attr('x', (width / 2))
.attr('y', 0 - (margin.top /2))
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.text('Gender and the Olympics: Medal Count for the Games By Gender Over Time')
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('Medal Count');
/*Adding line for women*/
svg.append('path')
.datum(women_data_1)
.attr('class', 'line')
.attr('id', 'id_line_women_1')
.attr('d', line);
svg.append('path')
.datum(women_data_2)
.attr('class', 'line')
.attr('id', 'id_line_women_2')
.attr('d', line);
svg.append('path')
.datum(women_data_3)
.attr('class', 'line')
.attr('id', 'id_line_women_3')
.attr('d', line);
/*Adding line for men*/
svg.append('path')
.datum(men_data_1)
.attr('class', 'line')
.attr('id', 'id_line_men_1')
.attr('d', line);
svg.append('path')
.datum(men_data_2)
.attr('class', 'line')
.attr('id', 'id_line_men_2')
.attr('d', line);
svg.append('path')
.datum(men_data_3)
.attr('class', 'line')
.attr('id', 'id_line_men_3')
.attr('d', line);
svg.selectAll('.dots')
.data(toolTips)
.enter().append('circle')
.attr('cx', function(d) {return x(d.x);})
.attr('cy', function(d) {return y(d.y);})
.attr('r', 4)
.attr('stroke', 'steelblue')
.attr('fill', 'steelblue')
.on('mouseover', function(d) {
tooltip.transition()
.duration(200)
.style('opacity', 1)
.style('left', String(targetWidth - 260) + 'px');
tooltip.html(d.text);
})
.on('mouseout', function(d) {
tooltip.transition()
.duration(500)
.style('opacity', 0);
})
/*
svg.selectAll('.dot_women')
.data(women_data)
.enter().append('circle')
.attr('class', 'datapoint')
.attr('cx', function(d) {return x(d.Year);})
.attr('cy', function(d) {return y(d['Medal Count']);})
.attr('stroke', 'steelblue')
.attr('fill', 'steelblue')
svg.selectAll('.dot_men')
.data(men_data)
.enter().append('circle')
.attr('class', 'datapoint')
.attr('cx', function(d) {return x(d.Year);})
.attr('cy', function(d) {return y(d['Medal Count']);})
.attr('stroke', '#5aae61')
.attr('fill', '#5aae61')*/
svg.selectAll('.rect.box1')
.data(rectData1)
.enter().append('rect')
.classed('boxy', true)
.style('fill', 'grey')
.attr('x', function(d) {return x(d.x);})
.attr('y', function(d) {return y(d.y);})
.attr('width', function(d) { return d.width;})
.attr('height', function(d) { return d.height;})
.style('fill', 'transparent')
.on('mouseover', function() {
d3.select(this).style('fill', '#f0f0f0');
d3.select('#id_text_ww1').attr('fill-opacity', 1);
})
.on('mouseout', function() {
d3.select(this).style('fill', 'transparent');
d3.select('#id_text_ww1').attr('fill-opacity', 0);
});
svg.selectAll('.rect.box2')
.data(rectData2)
.enter().append('rect')
.classed('boxy', true)
.style('fill', 'grey')
.attr('x', function(d) {return x(d.x);})
.attr('y', function(d) {return y(d.y);})
.attr('width', function(d) { return d.width;})
.attr('height', function(d) { return d.height;})
.style('fill', 'transparent')
.on('mouseover', function() {
d3.select(this).style('fill', '#f0f0f0');
d3.select('#id_text_ww2').attr('fill-opacity', 1);
})
.on('mouseout', function() {
d3.select(this).style('fill', 'transparent');
d3.select('#id_text_ww2').attr('fill-opacity', 0);
});
svg.selectAll('.text_1')
.data(textData1)
.enter().append('text')
.attr('id', 'id_text_ww1')
.attr('x', function(d) {return x(d.x);})
.attr('y', function(d) {return y(d.y);})
.text( function(d) {return d.text;})
.attr('font-size', '12px')
.attr('text-anchor', 'middle')
.attr('fill-opacity', 0);
svg.selectAll('.text_2')
.data(textData2)
.enter().append('text')
.attr('id', 'id_text_ww2')
.attr('x', function(d) {return x(d.x);})
.attr('y', function(d) {return y(d.y);})
.text( function(d) {return d.text;})
.attr('font-size', '12px')
.attr('fill-opacity', 0)
.attr('text-anchor', 'middle');
svg.selectAll('.labels_1')
.data(lineLabels)
.enter().append('text')
.attr('x', function(d) {return x(d.x);})
.attr('y', function(d) {return y(d.y);})
.attr('text-anchor', 'right')
.attr('fill', function(d) {return d.colour;})
.text(function(d) {return d.text;});
});
</script>
</body>
</html>