Skip to content

Instantly share code, notes, and snippets.

@animateddata

animateddata/.block

Last active August 19, 2016 15:09
Show Gist options
  • Save animateddata/514ad6489b633bf6ba05bb25ed5d19e7 to your computer and use it in GitHub Desktop.
Save animateddata/514ad6489b633bf6ba05bb25ed5d19e7 to your computer and use it in GitHub Desktop.
Download ZIP
Scatter plot
Raw
.block
license: gpl-3.0
height: 520
border: no
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Scatter plot</title>
</head>
<style>
text {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 10px;
font-weight: 100;
}
path {
fill: none;
stroke: #ccc;
}
line {
stroke: #ccc;
}
g.axis.label text {
text-anchor: middle;
font-size: 12px;
}
</style>
<body>
<svg width="700px" height="500px">
<g class="chart-wrapper" transform="translate(60,20)">
<g class="circles"></g>
<g class="x axis label" transform="translate(350,470)"><text>GDP per person (US$)</text></g>
<g class="y axis label" transform="rotate(-90)translate(-215,-40)"><text>Wellbeing</text></g>
</g>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var data = [
{"Country": "Austria", "Well-being": 5.37, "GDP": 26171.6909118266, "Working hours": 31.8173076923077},
{"Country": "Belgium", "Well-being": 5.04, "GDP": 24512.4131357791, "Working hours": 30.2115384615385},
{"Country": "Denmark", "Well-being": 5.93, "GDP": 32400.0606104087, "Working hours": 30.265385554387},
{"Country": "Finland", "Well-being": 5.39, "GDP": 27495.2413640093, "Working hours": 32.9519230769231},
{"Country": "France", "Well-being": 4.88, "GDP": 23133.3511348738, "Working hours": 30.155768761268},
{"Country": "Germany", "Well-being": 5.01, "GDP": 24463.8464685677, "Working hours": 27.5519221379207},
{"Country": "Hungary", "Well-being": 4.74, "GDP": 5868.30169997565, "Working hours": 38.2538452148438},
{"Country": "Ireland", "Well-being": 5.44, "GDP": 30669.3725876937, "Working hours": 31.5384615384615},
{"Country": "Netherlands", "Well-being": 5.31, "GDP": 26007.6791374784, "Working hours": 26.75},
{"Country": "Norway", "Well-being": 5.69, "GDP": 41245.8086253639, "Working hours": 27.0807682917668},
{"Country": "Poland", "Well-being": 4.81, "GDP": 5552.5012696159, "Working hours": 38.1730769230769},
{"Country": "Portugal", "Well-being": 4.89, "GDP": 11716.0089602508, "Working hours": 33.8076923076923},
{"Country": "Slovakia", "Well-being": 4.57, "GDP": 7334.10975906285, "Working hours": 33.6346153846154},
{"Country": "Spain", "Well-being": 5.34, "GDP": 16074.4617847975, "Working hours": 31.8211529071514},
{"Country": "Sweden", "Well-being": 5.44, "GDP": 32431.9403985136, "Working hours": 30.3036545973558},
{"Country": "Switzerland", "Well-being": 5.66, "GDP": 37877.182487742, "Working hours": 31.8711547851562},
{"Country": "United Kingdom", "Well-being": 4.98, "GDP": 28913.0962918089, "Working hours": 32.0903836763822}
];
// Chart info
var width = 640;
var height = 430;
var container = d3.select('svg g.chart-wrapper');
// We'll put GDP on the x-axis and well-being on the y-axis
var xScale = d3.scale.linear().domain([0, 42000]).range([0, width]);
var yScale = d3.scale.linear().domain([4.2, 6]).range([height, 0]);
container
.select('.circles')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', function(d) {return xScale(d['GDP']);})
.attr('cy', function(d) {return yScale(d['Well-being']);})
.attr('r', 4);
// Axes
var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
container
.append('g')
.classed('xAxis', true)
.attr('transform', 'translate(0,'+height+')')
.call(xAxis);
var yAxis = d3.svg.axis().scale(yScale).orient('left');
container
.append('g')
.classed('yAxis', true)
.call(yAxis);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment