Search code examples
javascriptd3.jsgeojson

Javascript D3js pie chart

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:enter image description here

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

Solution

  • 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.