Skip to content

Instantly share code, notes, and snippets.

@unamandita

unamandita/index.html

Created September 23, 2015 17:17
Show Gist options
  • Save unamandita/7b643ca021e699de8d96 to your computer and use it in GitHub Desktop.
Save unamandita/7b643ca021e699de8d96 to your computer and use it in GitHub Desktop.
Download ZIP
Module #6 experiments
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Conditional Styling</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
font-family: "Helvetica";
padding-top: 5px;
padding-left: 20px;
padding-bottom: 10px;
}
h1{
font-size: 24px;
}
h2 {
font-size: 14px;
font-weight: lighter;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
path {
stroke: gray;
stroke-width: 1.5;
}
g.county1 path {
stroke: #6666cc;
}
g.county2 path {
stroke: #66cccc;
}
g.county3 path {
stroke: #ff9966;
}
g.county4 path {
stroke: #cc6699;
}
g.county5 path {
stroke: #9966cc;
}
.axis path,
.axis line {
fill: none;
stroke: black;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.legend{
font-size: 12px;
font-weight: lighter;
}
</style>
</head>
<body>
<h1>Midwife attendance at NYC hospitals, 2008-2013</h1>
<h2>The graph below shows the percentage of births attended by licensed midwives at New York hospitals from 2008 to 2013. Source: <a href="https://health.data.ny.gov/Health/Hospital-Maternity-Information-Beginning-2008/net3-iygw">Health Data NY</a></h2>
<script type="text/javascript">
//Dimensions and padding
var w = 800;
var h = 800;
var padding = [ 20, 5, 50, 50 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(function(d) {
return d+"%"
});
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(d.amount*100);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load USA data
d3.csv("midwife_attendance.csv", function(data) {
//Data is loaded in, but we need to restructure it.
//Remember, each line requires an array of x/y pairs;
//that is, an array of arrays, like so:
//
// [ [x: 1, y: 1], [x: 2, y: 2], [x: 3, y: 3] ]
//
//We, however, are using 'year' as x and 'amount' as y.
//We also need to know which country belongs to each
//line, so we will build an array of objects that is
//structured like this:
/*
[
{
country: "Australia",
emissions: [
{ year: 1961, amount: 90589.568 },
{ year: 1962, amount: 94912.961 },
{ year: 1963, amount: 101029.517 },
…
]
},
{
country: "Bermuda",
emissions: [
{ year: 1961, amount: 176.016 },
{ year: 1962, amount: 157.681 },
{ year: 1963, amount: 150.347 },
…
]
},
…
]
*/
//Note that this is an array of objects. Each object
//contains two values, 'country' and 'emissions'.
//The 'emissions' value is itself an array, containing
//more objects, each one holding 'year' and 'amount' values.
//New array with all the years, for referencing later
var years = ["2008", "2009", "2010", "2011", "2012", "2013"];
//Create a new, empty array to hold our restructured dataset
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//Create new object with this country's name and empty array
dataset[i] = {
hospital: data[i].hospitalName,
county: data[i].county,
midwifeAttendance: []
};
//Loop through all the years
for (var j = 0; j < years.length; j++) {
// If value is not empty
if (data[i][years[j]]) {
//Add a new object to the emissions data array
//for this country
dataset[i].midwifeAttendance.push({
year: years[j],
amount: data[i][years[j]]
});
}
}
}
//Uncomment to log the original data to the console
// console.log(data);
//Uncomment to log the newly restructured dataset to the console
// console.log(dataset);
//Set scale domains
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.midwifeAttendance, function(d) {
return d.amount*100;
});
}),
0
]);
//Make a group for each country
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("county1", function(d) {
if (d.county == "New York") {
return true;
} else {
return false;
}
})
.classed("county2", function(d) {
if (d.county == "Kings") {
return true;
} else {
return false;
}
})
.classed("county3", function(d) {
if (d.county == "Queens") {
return true;
} else {
return false;
}
})
.classed("county4", function(d) {
if (d.county == "Bronx") {
return true;
} else {
return false;
}
})
.classed("county5", function(d) {
if (d.county == "Richmond") {
return true;
} else {
return false;
}
});
// body...
//Append a title with the country name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.hospital;
});
//Within each group, create a new line/path,
//binding just the emissions data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.midwifeAttendance ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke-width", 2)
.attr("stroke-dasharray", function() { return "0," + this.getTotalLength(); })
.transition()
.duration(4000)
.ease("linear")
.attrTween("stroke-dasharray", animateLine)
.attr("display", 1);
//Axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis);
function animateLine() {
var l = this.getTotalLength();
i = d3.interpolateString("0," + l, l + "," + l);
return function(t) { return i(t); };
};
});
//End USA data load function
</script>
<svg width="200" height="775">
<line x1="0" y1="5" x2="30" y2="5" stroke="#6666cc" stroke-width="1.5"/>
<line x1="0" y1="20" x2="30" y2="20" stroke="#66cccc" stroke-width="1.5"/>
<line x1="0" y1="35" x2="30" y2="35" stroke="#ff9966" stroke-width="1.5"/>
<line x1="0" y1="50" x2="30" y2="50" stroke="#cc6699" stroke-width="1.5"/>
<line x1="0" y1="65" x2="30" y2="65" stroke="#9966cc" stroke-width="1.5"/>
<text x="40" y="10" class="legend">New York County</text>
<text x="40" y="25" class="legend">Kings County</text>
<text x="40" y="40" class="legend">Queens County</text>
<text x="40" y="55" class="legend">Bronx County</text>
<text x="40" y="70" class="legend">Richmond County</text>
</svg>
</body>
</html>
Raw
midwife_attendance.csv
hospitalName county 2008 2009 2010 2011 2012 2013
Bellevue Hospital Center New York 0.368 0.371 0.316 0.337 0.236 0.249
Beth Israel Medical Center/Petrie Campus New York 0.086 0.104 0.125 0.14 0.133 0.137
Bronx-Lebanon Hospital Center - Concourse Division Bronx 0.084 0.03 0.001 0 0 0
Brookdale Hospital Medical Center Kings 0.212 0.085 0.284 0.328 0.306 0.251
Brooklyn Hospital Center - Downtown Campus Kings 0.011 0.008 0.001 0.001 0 0
Coney Island Hospital Kings 0.286 0.386 0.521 0.489 0.465 0.486
Elmhurst Hospital Center Queens 0.018 0.042 0.018 0.066 0.058 0.123
Flushing Hospital Medical Center Queens 0 0 0 0 0.001 0.001
Forest Hills Hospital Queens 0.007 0.006 0.009 0.006 0.007 0.002
Harlem Hospital Center New York 0.047 0.052 0.028 0.004 0.002 0.003
Jacobi Medical Center Bronx 0.143 0.178 0.179 0.256 0.494 0.621
Jamaica Hospital Medical Center Queens 0.301 0.307 0.21 0.081 0.071 0.074
Kings County Hospital Center Kings 0.18 0.149 0.223 0.126 0.171 0.137
Lenox Hill Hospital New York 0.001 0 0.012 0.014 0.01 0
Lincoln Medical & Mental Health Center Bronx 0.003 0 0 0 0 0
Long Island College Hospital Kings 0.086 0.067 0.09 0.091 0.096 0.077
Long Island Jewish Medical Center Queens 0.001 0.001 0.003 0.003 0.005 0.002
Lutheran Medical Center Kings 0.006 0.008 0.01 0.007 0.01 0.018
Maimonides Medical Center Kings 0.162 0.167 0.183 0.182 0.206 0.201
Metropolitan Hospital Center New York 0.302 0.312 0.305 0.288 0.272 0.241
Montefiore Med Center - Jack D Weiler Hosp of A Einstein College Div Bronx 0.01 0.009 0.015 0.007 0.015 0.012
Montefiore Medical Center - North Division Bronx 0.045 0.007 0.004 0.003 0 0
Mount Sinai Hospital New York 0.068 0.066 0.077 0.078 0.068 0.088
New York Downtown Hospital New York 0 0.008 0.004 0.003 0.01 0.018
New York Hospital Medical Center of Queens Queens 0.001 0.002 0 0.001 0 0
New York Methodist Hospital Kings 0.082 0.086 0.106 0.098 0.101 0.086
New York Presbyterian Hospital - Allen Pavilion New York 0.035 0.026 0.013 0.011 0.006 0.007
New York Presbyterian Hospital - Columbia Presbyterian Center New York 0 0 0 0 0 0.001
New York Presbyterian Hospital - New York Weill Cornell Center New York 0.001 0.002 0.001 0 0 0
North Central Bronx Hospital Bronx 0.789 0.732 0.668 0.676 0.657 0.677
NYU Hospitals Center New York 0.008 0.009 0.005 0.008 0.004 0
Queens Hospital Center Queens 0 0 0 0 0 0
Richmond University Medical Center Richmond 0.003 0.005 0.01 0.013 0.018 0.002
St Barnabas Hospital Bronx 0.195 0.218 0.265 0.283 0.23 0.204
St Johns Episcopal Hospital So Shore Queens 0.014 0.023 0 0 0 0
St Lukes Roosevelt Hospital Center - Roosevelt Hospital Division New York 0.08 0.078 0.087 0.098 0.099 0.094
Staten Island University Hosp-North Richmond 0.033 0.038 0.038 0.051 0.049 0.032
University Hospital of Brooklyn Kings 0.001 0 0 0 0 0.001
Woodhull Medical & Mental Health Center Kings 0.647 0.683 0.664 0.671 0.641 0.605
Wyckoff Heights Medical Center Kings 0.001 0 0.001 0 0 0.003
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment