Search code examples
javascriptd3.jsd3plus

d3plus.Geomap is not a constructor

I am making my first d3plus chart and trying to copy one in here https://d3plus.org/examples/d3plus-geomap/coordinate-points/

But unlike highcharts there is very little explanation on how to use the chart. My current code is:

<script src="./d3plus.full.min.js"></script>

<div id="viz"> </div>

<script>

new d3plus.Geomap()
  .container("#viz")
  .data("https://d3plus.org/data/city_coords.json")
  .groupBy("slug")
  .colorScale("dma_code")
  .colorScaleConfig({
    color: ["red", "orange", "yellow", "green", "blue"]
  })
  .label(function(d) {
    return d.city + ", " + d.region;
  })
  .point(function(d) {
    return [d.longitude, d.latitude];
  })
  .render();


  </script>

and I am getting error : d3plus.Geomap is not a constructor. Can some please tell me my mistake or point me towards basic d3plus examples

Solution

  • container() method is deprecated in v2 of d3plus

    Instead, you must using select("#viz")

    Jsfiddle: https://jsfiddle.net/1ctkujr2/