Skip to content

Instantly share code, notes, and snippets.

@sivakarasala

sivakarasala/clinic.csv

Created February 7, 2018 22:41
Show Gist options
  • Save sivakarasala/a069432ed15faf0e97bc3904368db99d to your computer and use it in GitHub Desktop.
Save sivakarasala/a069432ed15faf0e97bc3904368db99d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
clinic.csv
Date CID 42 CID 44 CID 47 CID 81 CID 82 CID 87 CID 763 CID 1146
3/1/2017 2 0 0 0 1 0 0 0
4/1/2017 9 0 0 0 0 0 0 0
5/1/2017 38 0 0 0 0 0 0 0
6/1/2017 31 0 0 0 0 0 0 0
7/1/2017 12 1 0 2 0 0 0 1
8/1/2017 20 8 3 0 0 26 0 1
9/1/2017 10 8 0 10 4 43 6 10
10/1/2017 9 11 0 16 0 36 0 0
11/1/2017 27 3 0 8 2 42 0 5
12/1/2017 24 9 11 8 10 26 2 5
1/1/2018 24 3 2 5 5 42 0 6
2/1/2018 2 0 0 0 0 0 0 0
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.axis path {
/*display: none;*/
}
</style>
<body>
<div id="stackedbars">
<h1>Segments</h1>
<svg id="stacked" width="600" height="500"></svg></div>
</body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("#stacked"),
margin = {top: 20, right: 180, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// var margin = {top: 20, right: 150, bottom: 50, left: 40},
// width = 600 - margin.left - marginStacked.right,
// height = 500 - margin.top - marginStacked.bottom;
//
//
// var svg = d3.select("#stacked").append("svg")
// .attr("width", widthStacked + marginStacked.left + marginStacked.right)
// .attr("height", heightStacked + marginStacked.top + marginStacked.bottom)
// .append("g")
// .attr("transform", "translate(" + marginStacked.left + "," + marginStacked.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.3)
.align(0.3);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal(d3.schemeCategory20);
// .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var stack = d3.stack();
d3.csv("clinic.csv", type, function(error, data) {
if (error) throw error;
//data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.Date; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
z.domain(data.columns.slice(1));
g.selectAll(".serie")
.data(stack.keys(data.columns.slice(1))(data))
.enter().append("g")
.attr("class", "serie")
.attr("fill", function(d) { return z(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.data.Date); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y).ticks(10, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks(10).pop()))
.attr("dy", "0.35em")
.attr("text-anchor", "start")
.attr("fill", "#000")
.text("Quantity");
var legend = g.selectAll(".legend")
.data(data.columns.slice(1).reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
.style("font", "10px sans-serif");
legend.append("rect")
.attr("x", width + 18)
.attr("width", 18)
.attr("height", 18)
.attr("fill", z);
legend.append("text")
.attr("x", width + 44)
.attr("y", 9)
.attr("dy", ".35em")
.attr("text-anchor", "start")
.text(function(d) { return d; });
});
function type(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment