Skip to content

Instantly share code, notes, and snippets.

@asuozzo

asuozzo/index.html

Last active August 30, 2016 20:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save asuozzo/942b51a87c3d605449cd482f963dc979 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save asuozzo/942b51a87c3d605449cd482f963dc979 to your computer and use it in GitHub Desktop.
Download ZIP
Drop-down responsive bar chart
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="vtOverdoses.css" type="text/css" charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src = "https://code.jquery.com/jquery-3.1.0.min.js">
</script>
</head>
<body>
<h3>How many people died of <span class="dropdown">
<span id="opioidtype">all types of opioid</span>
<select id="opioid-list">
<option value="allopioid">all types of opioid</option>
<option value="rxopioid">prescription opioid</option>
<option value="heroin">heroin</option>
<option value="fentanyl">fentanyl</option>
</select></span>
overdoses in Vermont between 2010 and 2015?</h3>
<div id="chart"></div>
<p class= "smallSans">Some overdoses fall into multiple categories, so totals in each category don't necessarily add up to the overall totals. Numbers include accidental and undetermined causes of death, but exclude suicides. Source: <a href="http://healthvermont.gov/adap/treatment/opioids/">Vermont Department of Health</a></p>
<script type="text/javascript" src="vtOverdoses.js"></script>
</body>
Raw
vtOverdoses.css
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
shape-rendering: crispEdges;
}
h3 {
font-family: georgia, "times new roman", times, serif;
font-size:1.5em;
}
a {
color:#A0A62B;
text-decoration: none;
}
.smallSans {
font-family: helvetica, arial, sans-serif;
font-size:90%;
}
.dropdown {
color:#a0a627;
position: relative;
display:inline-block;
}
.dropdown:after{
content: '▾';
color:#a0a627;
margin-left: 1px;
}
select {
margin: 2px;
border: none;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position:absolute;
opacity:0;
width: 100%;
left:0;
font-size: 1em;
}
.opioidtype {
color:
}
.labeltext {
font-family: sans-serif;
font-size: .8em;
}
Raw
vtOverdoses.csv
Year rxopioid heroin fentanyl allopioid
2010 38 0 5 41
2011 47 9 5 61
2012 37 9 6 50
2013 45 20 12 69
2014 25 34 18 61
2015 32 34 29 76
Raw
vtOverdoses.js
$(document).ready(function() {
$("#opioid-list").change(function() {
$('#opioidtype').html($(this).find("option:selected").text());
// $('#opioidtype').html($(this).val());
}).change();
});
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = parseInt(d3.select('#chart').style('width'), 10),
width = width - margin.left - margin.right,
height = 300;
// Parse the date / time
var parseDate = d3.time.format("%Y").parse;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .05)
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")
.ticks(10);
var chart = d3.select("#chart").append("svg")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", height + margin.top + margin.bottom)
.append("g")
.attr('transform', 'translate(' + [margin.left, margin.top] + ')');
function drawChart(opioidType){
d3.csv("vtOverdoses.csv", function(error, data) {
data.forEach(function(d) {
d.Year = parseDate(d.Year);
});
x.domain(data.map(function(d) { return d.Year; }));
y.domain([0, 76]);
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "1em")
.attr("dy", "1em");
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "-3em")
.attr("dx", "-11em")
.style("text-anchor", "end")
.text("Overdoses")
.attr("font-size", "1.2em");
chart.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "#777c19")
.attr("class", "bar")
.attr("x", function(d) { return x(d.Year); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d[opioidType]); })
.attr("height", function(d) { return height - y(d[opioidType]); });
chart.selectAll("labeltext")
.data(data)
.enter()
.append("text")
.attr("class", "labeltext")
.text(function(d) {
return d[opioidType]
})
.attr("text-anchor", "middle")
.attr("x", function(d){
return x(d.Year) + x.rangeBand()/2;
})
.attr("y", function(d){
return y(d[opioidType]) - 7;
})
.attr("fill", "black")
d3.select("#opioid-list").on("change", alertChange);
});
};
d3.select(window).on("resize", resize);
function resize() {
width = parseInt(d3.select("#chart").style("width"), 10);
width = width - margin.left - margin.right;
x.rangeRoundBands([0, width], .05);
d3.select(chart.node().parentNode)
.style("width", (width + margin.left + margin.right + "px"));
chart.selectAll("rect.bar")
.attr("x", function(d) {
return x(d.Year);
})
.attr("width", x.rangeBand())
chart.selectAll("text.labeltext")
.attr("x", function(d){
return x(d.Year) + x.rangeBand()/2;
})
chart.select(".x.axis").call(xAxis)
}
var alertChange = function() {
//get the data value and index from the event
selectedValue = d3.event.target.value;
redrawChart(selectedValue)
};
// re-render data based on dropdown change
function redrawChart(newValue) {
d3.csv("vtOverdoses.csv", function(error,data) {
data.forEach(function(d) {
d.Year = parseDate(d.Year);
});
x.domain(data.map(function(d) { return d.Year; }));
var bars = chart.selectAll("rect.bar")
.data(data)
bars.transition()
.duration(500)
.attr("height", function(d) {
return height - y(d[newValue]);
})
.attr("y", function(d) {
return y(d[newValue])
})
.style("fill", function() {
if (newValue === "rxopioid") {
return "#a0a627";
} else if (newValue === "heroin") {
return "#cfd2ba";
} else if (newValue === "fentanyl") {
return "#dddddd";
} else {
return "#777c19";
}
});
var labels = chart.selectAll("text.labeltext")
.data(data)
labels.transition()
.duration(500)
.attr("y", function(d){
return y(d[newValue]) - 7;
})
.text(function(d){
return d[newValue];
});
});
};
d3.select(window).on("load", drawChart("allopioid"))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment