This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:
forked from mbostock's block: Line Chart
forked from ElisaDnr's block: Line Chart with pie chart
forked from ElisaDnr's block: Line Chart with pie chart json
forked from ElisaDnr's block:
xxxxxxxxxx
<meta charset="utf-8">
<style>
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
#pie svg{
position: absolute;
}
</style>
<body>
<div id="pie"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
function printPie(heure){
var radius = Math.min(960, 500) / 2;
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; });
var svg = d3.select("#pie").append("svg")
.attr("width", 960)
.attr("height", 500)
.append("g")
.attr("transform", "translate(" + 960 / 2 + "," + 500 / 2 + ")");
d3.json("trajet_accident.json", function(data_json){
for(var i=0; i<data_json.length; i++){
if(data_json[i].heure == heure){
var data = [data_json[i].nb_0, data_json[i].nb_1, data_json[i].nb_2, data_json[i].nb_3, data_json[i].nb_4, data_json[i].nb_5, data_json[i].nb_9,];
var color = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#c2c496", "#a58798", "#6b8768", "#c4a796"])
.domain(data);
}
}
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); });
g.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { if(d.data == 0){return "";} else{return parseFloat(d.data).toFixed(2);}});
});
}
printPie("0015");
</script>
https://d3js.org/d3.v4.min.js