Skip to content

Instantly share code, notes, and snippets.

@Ognami

Ognami/data.csv

Last active January 20, 2017 00:32
Show Gist options
  • Save Ognami/8d3afbb5064d039f29c25249ee944718 to your computer and use it in GitHub Desktop.
Save Ognami/8d3afbb5064d039f29c25249ee944718 to your computer and use it in GitHub Desktop.
Download ZIP
Pie Chart With Data Select Option
Raw
data.csv
name arrow type region
bob wood black
joe composite black
jane carbon yellow
susan aluminum white
john aluminum black
mark fiberglass red
tammy carbon yellow
alice fiberglass blue
sam wood red
kathy composite blue
anna aluminum yellow
sarah carbon blue
cole fiberglass red
will carbon white
Raw
index.html
<!doctype html>
<meta charset="utf-8">
<html>
<head>
<title>Pie Chart With Data Select Option</title>
<style>
body { position: relative; }
#piechart { width: 100%; }
#piechart > svg { text-align: right; }
#picker {
position: absolute;
top: 220px;
left: 0;
}
#picker button {
background: black;
color: white;
border: none;
padding: 10px;
border-radius: 3px;
margin: 0 10px;
cursor: pointer;
}
.arc text {
font: 12px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
</style>
</head>
<body>
<div id="picker">
<button id="arrowtype" data-col="arrow type">Arrow Type</button>
<button id="region" data-col="region">Target Region</button>
</div>
<div id="piechart"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
function piechart(){
var margin = {},
width = 980,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var labelArc = d3.arc()
.outerRadius(radius - 40)
.innerRadius(radius - 40);
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.total; });
function chart(selection){
console.log(data);
var column = data.col;
selection.each(function(data) {
var svg = d3.select(this).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color(d.data[column]); });
g.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data[column]; });
});
}
return chart;
}
var chart = piechart();
/* on clicks */
var btnType = document.getElementById('arrowtype');
var btnRegion = document.getElementById('region');
btnType.addEventListener('click', function(e) {
drawchart(e);
});
btnRegion.addEventListener('click', function(e) {
drawchart(e);
});
function drawchart(e){
var chartwarpper = document.getElementById("piechart");
chartwarpper.innerHTML = '';
var column = e.target.getAttribute("data-col");
d3.csv("data.csv", function(raw) {
result = { };
for(var i = 0; i < raw.length; ++i) {
if(!result[raw[i][column]]){
result[raw[i][column]] = 0;
}
++result[raw[i][column]];
}
data = [];
data["col"] = column ;
for(var key in result){
var addentry = { };
addentry[column] = key;
addentry["total"] = result[key];
data.push(addentry);
}
d3.select("#piechart")
.datum(data)
.call(chart);
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment