Javascript D3js pie chart

Question

I'm still getting nothing when i try to render a pie chart. I am using geojson object to render their information on a click and i would also like to put a pie chart under the information like these:

But i'm having this instead of a pie chart: [object Object]

Here's my code:

kmlpoly.addEventListener("click", function(evt) {

      // Read in the Content property once the user clicks on the feature
      var contents = "<h1> Fiche détaillé </h1>" + "<br>" + "<u><b>Project Name </b></u>: " + evt.layer.feature.properties.Project_Name + "<br><u><b>Water body specs</u></b> : " + evt.layer.feature.properties.Water_body_specs + "</br>" + "<u><b>Site ID</u></b> : " + evt.layer.feature.properties.Site_ID + "<br><u><b>Site_Name</u></b> : " + evt.layer.feature.properties.Site_Name + "</br>" + "<u><b>ESTS ID </b></u> : " + evt.layer.feature.properties.ESTS_ID + "<br><u><b>ESTS Name</b></u> : " + evt.layer.feature.properties.ESTS_Name + "</br>" + "<u><b>Unique ID</b></u> : " + evt.layer.feature.properties.Unique_ID + "<br><u><b>Date</b></u> : " + evt.layer.feature.properties.Date + "</br>" + "<u><b>TPH (ug/g)</b></u> : " + evt.layer.feature.properties.TPH_ug_g + "<br><u><b>PAHs (ng/g)</b></u> : " + evt.layer.feature.properties.PAHs_ng_g + "</br>" + "<u><b>APAHs (ug/g)</b></u> : " + evt.layer.feature.properties.APAHs_ng_g + "<br><u><b>n Alkanes (ng/g)</b></u> : " + evt.layer.feature.properties.n_alkanes_ng_g + "</br>" + "<u><b>Biomarkers (ng/g)</b></u> : " + evt.layer.feature.properties.Biomarkers_ng_g + "<br><u><b>Type</b></u> : " + evt.layer.feature.properties.Type + "</br>"

      // inserons ce quil nous faut pour les pie chart
      // set the dimensions and margins of the graph
      var width = 200;
          height = 200;
          margin = 2;

      // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
      var radius = Math.min(width, height) / 2 - margin

     // append the svg object to the div called 'my_dataviz'
      var svg = d3.select("#slide-in")
         .append("svg")
            .attr("width", width)
            .attr("height", height)
         .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
      // Create dummy data
      var data = [{a: evt.layer.feature.properties.TPH_ug_g, b: evt.layer.feature.properties.PAHs_ng_g}]

      // set the color scale
      var color = d3.scaleOrdinal()
          .domain(data)
          .range(["#98abc5", "#8a89a6"])

       // Compute the position of each group on the pie:
      var pie = d3.pie()
            .value(function(d) {return d.value; })
      var data_ready = pie(d3.entries(data))

// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
      // Insert the Content into the leaflet-control-window
      information.innerHTML = contents + svg.selectAll('whatever').data(data_ready).enter().append('path').attr('d', d3.arc().innerRadius(0).outerRadius(radius)).attr('fill', function(d){ return(color(d.data.key)) }).attr("stroke", "black").style("stroke-width", "2px").style("opacity", 0.7)
  })

Thank you

Answer 1

Part of your issue is that you're appending the returned value of svg.selectAll('whatever')... to the innerHTML of information . The returned value is probably an object used internally by d3, which is why you have the text [object Object] appended to your div.

d3 is currently appending the graph to the #slide-in element, so perhaps you could just update the line var svg = d3.select('#slide-in') to select the place where you want to add your graph inside the information container instead.