Skip to content

Instantly share code, notes, and snippets.

@dougdowson

dougdowson/chart.js

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dougdowson/9754610 to your computer and use it in GitHub Desktop.
Save dougdowson/9754610 to your computer and use it in GitHub Desktop.
Download ZIP
Scatterplot
Raw
chart.js
var body = d3.select('body'),
menu = d3.select("#menu"),
margin = { top: 0, right: 0, bottom: 30, left: 40 },
height = 500 - margin.top - margin.bottom,
width = 550 - margin.left - margin.right,
formatNumber = d3.format(',.1f'),
formatCurrency = d3.format('$,.0f'),
tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
d3.csv('data.csv',function (data) {
var xVars = [{"variable":"Household Income"},{"variable":"Poverty Rate"}];
var yVars = [{"variable":"Infant Mortality Rate"},{"variable":"Male Life Expectancy"},{"variable":"Female Life Expectancy"}];
menu.append('span')
.text('X-axis: ');
menu.append('select')
.on('change',xChange)
.selectAll('option')
.data(xVars)
.enter()
.append('option')
.attr('value', function (d) { return d.variable })
.text(function (d) { return d.variable ;});
menu.append('br');
menu.append('span')
.text('Y-axis: ');
menu.append('select')
.on('change',yChange)
.selectAll('option')
.data(yVars)
.enter()
.append('option')
.attr('id', function (d) { return d.variable })
.attr('value', function (d) { return d.variable })
.text(function (d) { return d.variable ;});
d3.select("[id='Infant Mortality Rate']")
.attr("selected", "selected");
var xScale = d3.scale.linear()
.domain([d3.min(data,function (d) { return 0.93*d['Household Income']}),d3.max(data,function (d) { return 1.07*d['Household Income']})])
.range([0,width]);
var yScale = d3.scale.linear()
.domain([d3.min(data,function (d) { return 0.98*d['Infant Mortality Rate']}),d3.max(data,function (d) { return 1.02*d['Infant Mortality Rate']})])
.range([height,0]);
var svg = d3.select("#chart").append('svg')
.attr('height',1.01*height + margin.top + margin.bottom)
.attr('width',width + margin.left + margin.right)
.append('g')
.attr('transform','translate(' + margin.left + ',' + margin.top + ')');
var xAxis = d3.svg.axis()
.scale(xScale)
.tickFormat(d3.format(',.0f'))
.ticks(5)
.orient('bottom')
.tickSize(-height);
var yAxis = d3.svg.axis()
.scale(yScale)
.tickFormat(d3.format(',.0f'))
.ticks(5)
.orient('left')
.tickSize(-width - margin.left - margin.right);
svg.append('g')
.attr('class','axis')
.attr('id','xAxis')
.attr('transform', 'translate(-1,' + height + ')')
.call(xAxis)
.append('text')
.attr('id','xAxisLabel')
.attr("dy", "2em")
.attr("dx", width/1.6)
.style('text-anchor','end')
.text('Household Income');
svg.append('g')
.attr('class','axis')
.attr('id','yAxis')
.call(yAxis)
.append('text')
.attr('id', 'yAxisLabel')
.attr('transform','rotate(-90)')
.attr("dy", "-1.6em")
.attr("dx", -height/2.5)
.style('text-anchor','end')
.text('Infant Mortality Rate');
var circles = svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx',function (d) { return xScale(d['Household Income']) })
.attr('cy',function (d) { return yScale(d['Infant Mortality Rate']) })
.attr('r','5')
.on("mouseover", function(d) {
tooltip.transition()
.duration(250)
.style("opacity", .9);
tooltip.html(
"<p><strong>Household Income: </strong>" + formatCurrency(d['Minimum Household Income']) + "&ndash;" + formatCurrency(d['Maximum Household Income']) + "</p>" +
"<p><strong>Poverty Rate: </strong>" + formatNumber(d['Poverty Rate']) + "%</p>" +
"<p><strong>Infant Mortality: </strong>" + formatNumber(d['Infant Mortality Rate']) + " per 1,000 live births</p>" +
"<p><strong>Male Life Expectancy: </strong>" + formatNumber(d['Male Life Expectancy']) + " years</p>" +
"<p><strong>Female Life Expectancy: </strong>" + formatNumber(d['Female Life Expectancy']) + " years</p>"
)
.style("left", (d3.event.pageX + 15) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
tooltip.transition()
.duration(250)
.style("opacity", 0);
});
function xChange() {
var value = this.value;
xScale.domain([d3.min(data,function (d) { return 0.93*d[value]}),d3.max(data,function (d) { return 1.07*d[value]})]);
xAxis.scale(xScale);
d3.select('#xAxis')
.transition()
.duration(750)
.call(xAxis);
d3.select('#xAxisLabel')
.text(value);
d3.selectAll('circle')
.transition()
.duration(750)
.attr('cx',function (d) { return xScale(d[value]) })
};
function yChange() {
var value = this.value;
yScale.domain([d3.min(data,function (d) { return 0.98*d[value]}),d3.max(data,function (d) { return 1.02*d[value]})]);
yAxis.scale(yScale);
d3.select('#yAxis')
.transition()
.duration(750)
.call(yAxis);
d3.select('#yAxisLabel')
.text(value);
d3.selectAll('circle')
.transition()
.duration(750)
.attr('cy',function (d) { return yScale(d[value]) });
}
});
d3.select(self.frameElement).style("height", "715px");
Raw
data.csv
Income Group Infant Deaths Births Population Minimum Household Income Maximum Household Income Household Income Poverty Rate Male Life Expectancy Female Life Expectancy Infant Mortality Rate
1 2008 226762 14715774 20999 34907 31791.49 24.70342 71.85533 78.05793 8.855099
2 1874 209813 14744129 34908 37781 36377.99 19.63626 72.0526 78.15742 8.931763
3 1763 202882 14640736 37783 40556 39237.06 17.04129 73.36657 78.7324 8.68978
4 1590 214052 14815594 40570 42201 41441.01 16.29556 74.10257 79.37167 7.428102
5 1609 201646 14685787 42208 43616 42929.8 15.72997 74.18648 79.56462 7.97933
6 1643 210295 14802582 43618 44587 44180.66 14.73682 74.39545 79.6729 7.812834
7 1610 202920 14594316 44591 46308 45237.29 13.87647 74.34653 79.47282 7.934161
8 1695 228437 14866131 46328 47515 46772.53 14.16734 74.73156 79.76524 7.419989
9 1601 209674 14741623 47539 49818 48515.15 12.5365 74.93836 79.89545 7.635663
10 1378 206301 13794045 49820 50986 50267.29 12.95727 75.34276 80.26566 6.679561
11 1123 172168 11789904 50988 52544 51801.12 11.62972 75.86359 80.70026 6.522699
12 1385 206118 14171258 52554 53470 52853.73 12.68725 75.88689 80.71466 6.719452
13 1563 263535 17509912 53494 54731 53704.29 12.83947 76.45735 81.36787 5.930901
14 1619 247176 16278174 54733 56163 55377.4 11.26195 75.71484 80.48431 6.549989
15 1293 221583 14735665 56243 59278 57505.19 10.16014 76.12034 80.73318 5.835285
16 1084 165714 12269691 59299 61721 60713.65 9.123776 76.93584 81.21589 6.54139
17 1342 244631 17276148 61724 66641 63956.5 9.702583 77.37284 81.60525 5.485813
18 1156 202789 14806141 66690 73083 69386.63 7.545208 77.29388 81.56779 5.700506
19 844 191966 14479189 73107 79803 75500.34 6.874239 78.39504 82.33086 4.396612
20 958 205823 14992715 80020 107200 87171.25 5.600626 79.14439 82.89153 4.654485
Raw
index.html
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body, h1, h2, h3, p {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
color: #333;
font-weight: 400;
}
#content {
margin: 5px;
padding: 20px;
width: 750px;
text-align: left;
border: 1px solid #ccc;
}
h1 {
line-height: 1em;
font-size: 1.75em;
font-weight: 900;
color: #000;
}
p {
margin: 5px 0px 0px 0px;
}
.domain {
stroke-width: 1px;
}
#chart {
margin: 15px 0px 0px 0px;
padding: 0px;
}
#menu {
float: left;
margin: 15px 0px 0px 0px;
padding: 0;
display: block;
}
select {
width: 150px;
font-family: 'Source Sans Pro', sans-serif;
font-size: 0.9em;
color: #333;
font-weight: 400;
}
.axis path, .axis line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.axis line {
stroke: #eee;
stroke-width: 1;
shape-rendering: crispEdges;
}
.tick text, #xAxisLabel, #yAxisLabel {
fill: #333;
font-size: 0.9em;
}
.tooltip {
position: absolute;
padding: 7px;
width: 240px;
font-size: 0.9em;
pointer-events: none;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
.tooltip p {
margin: 0;
padding: 0;
}
circle {
stroke: #0165A8;
stroke-width: 2px;
fill: #fff;
}
circle:hover {
stroke: #003275;
fill: #0165A8;
}
</style>
</head>
<body>
<div id="content">
<h1>Income and Health in the United States</h1>
<p>U.S. counties were sorted into 20 equally sized groups according to median household income. Poverty rates, infant mortality rates, and life expectancies were calculated for each of the 20 income groups. The data show that in 2007, low-income counties had significantly higher infant mortality rates and lower life expectancies than high-income counties.</p>
<div id="menu"></div>
<div id="chart"></div>
<p>Source: U.S. Census Bureau, Institute for Health Metrics and Evaluation.</p>
</div>
<script type='text/javascript' src='chart.js'></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment