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
xxxxxxxxxx
<div id="pie"></div>
<svg width="960" height="500"></svg>
<style>
#pie svg{
position: absolute;
top: 50px;
left: 120px;
background-color: rgba(217, 217, 217, 0.5);
padding-top: 30px;
margin-left: 0px;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
d3.json("trajet_accident.json", function(data) {
var svg = d3.select("svg"),
margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
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 + ")");
svg.on("click", function(d){
document.getElementById("pie").innerHTML="";
d3.select(pointActuel).style("fill", "lightgrey").style("opacity", 0.4);
});
var parseTime = d3.timeParse("%I%M");
var x = d3.scaleTime()
.rangeRound([0, width]);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var line = d3.line()
.x(function(d) {
return x(d.heure);
})
.y(function(d) {
return y(d.nb_accident);
});
data.forEach(function(d) {
d.heure = parseTime(d.heure);
d.nb_accident = +d.nb_accident;
});
x.domain(d3.extent(data, function(d) {
return d.heure;
}));
y.domain(d3.extent(data, function(d) {
return d.nb_accident;
}));
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.select(".domain")
.remove();
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("fill", "#000")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end")
.text("Nombre d'accidents");
g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke-width", 1.5)
.attr("d", line);
g.selectAll("dot").data(data).enter().append("circle")
.attr("r", 6)
.attr("cx", function(d) { return x(d.heure); })
.attr("cy", function(d) { return y(d.nb_accident); })
.attr("fill", "lightgrey")
.style("opacity", 0.4)
.on("click", function(d) {
document.getElementById("pie").innerHTML="";
if (pointActuel != null) d3.select(pointActuel).style("fill", "lightgrey").style("opacity", 0.4);
d3.select(this).style("fill", "red").style("opacity", 1);
console.log(x(d.heure));
printPie(d.heure)
pointActuel = this;
if (event.stopPropagation) {
event.stopPropagation();
}
event.cancelBubble = true;
})
.on("mouseover", function(d) {
d3.select(this).style("fill", "blue").style("opacity", 1);
})
.on("mouseout", function(d) {
if(!(getHour(d.heure) == heureActuelle)){
d3.select(this).style("fill", "lightgrey").style("opacity", 0.4);
}
/*document.getElementById("pie").innerHTML="";*/
})
});
heureActuelle = "";
var pointActuel;
function printPie(heureBrut){
var heure = getHour(heureBrut);
heureActuelle = heure;
var pieWidth = 788;
var pieHeigth = 350;
var radius = Math.min(pieWidth, pieHeigth) / 2;
var x = d3.scaleTime()
.rangeRound([0, pieWidth]);
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", pieWidth)
.attr("height", pieHeigth)
.append("g")
.attr("transform", "translate(" + pieWidth / 2 + "," + pieHeigth / 2 + ")").attr("cx", function(d){return x(heureBrut)}).on("click", function(d) {
if (pointActuel != null) d3.select(pointActuel).style("fill", "lightgrey").style("opacity", 0.4);
});
console.log(svg);
d3.json("trajet_accident.json", function(data_json){
nb_accidents = 0;
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(["lightpink", "yellow", "green", "red", "lightblue", "lightgreen", "grey"])
.domain(data);
nb_accidents = data_json[i].nb_accident;
}
}
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
console.log(g);
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) + "%";}});
svg.append("text")
.attr("x", (pieWidth / 2)-385)
.attr("y", 0 - 175)
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("font-weight", "bold")
.text("Répartition des accidents (ici "+ nb_accidents +" accidents au total), par heure (ici "+ heureActuelle.substring(0,2) + "h" + heureActuelle.substring(2,4) +"), en fonction du trajet réalisé");
var legendRectSize = (radius * 0.05);
var legendSpacing = radius * 0.05;
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length / 2;
var horz = -3 * legendRectSize +200 ;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
var j = 0;
var cat = ["Inconnu", "Domicile - Travail", "Domicile - Ecole", "Courses - Achats", "Utilisation professionnelle", "Promenade - Loisirs", "Autre"]
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing + 8)
.text(function(d) { var legendLabel = cat[j]; j++; return legendLabel; });
});
}
function getHour(fullHour){
var heure= "";
if(fullHour.getHours() > 9){
heure = fullHour.getHours();
}
else heure = "0" + fullHour.getHours();
if(fullHour.getMinutes() > 9){
heure += "" + fullHour.getMinutes();
}
else heure += "0" + fullHour.getMinutes();
return heure;
}
</script>
https://d3js.org/d3.v4.min.js