Line Chart with pie chart json

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:

d3-dsv - parse tab-separated values
d3-time-format - date parsing and formatting
d3-scale - position encodings
d3-array - data processing
d3-axis - axes
d3-shape - lines

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

<!DOCTYPE html>
<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);

https://d3js.org/d3.v4.min.js