D3.js Circles on Map

Question

I am very new to coding and am trying to learn D3. I have map of France which I am able to make appear in the browser. However, I am trying to display circles on the map based on a csv file. I am not sure what I am doing wrong with the function... Any help/direction would be great.

Here is a Cloud9 of the code and files... https://ide.c9.io/santiallende/d3-map-bubbles-france

Answer 1

I won't sugarcoat, your code's a mess.

You define and append 4 different svg elements to the body and you create 3 different projections. All of it is unnecessary. Just go through and remove all the redundancies.

//Width and height
var w = 800;
var h = 350;

var canvas = d3.select("body").append("svg")
  .attr("width", w)
  .attr("height", h)

 d3.json("france.json", function(data) {

  var group = canvas.selectAll("g")
    .data(data.features)
    .enter()
    .append("g")

  //Define map projection
  var projection = d3.geo.mercator()
    .translate([400, 1200])
    .scale([1100]);

  //Define path generator
  var path = d3.geo.path()
    .projection(projection);

  var areas = group.append("path")
    .attr("d", path)
    .attr("class", "area")
    .attr("fill", "steelblue");

  //Load in cities data
  d3.csv("wineregions.csv", function(data) {

    canvas.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr("cx", function(d) {
        return projection([d.lon, d.lat])[0];
      })
      .attr("cy", function(d) {
        return projection([d.lon, d.lat])[1];
      })
      .attr("r", 5)
      .style("fill", "yellow")
      .style("opacity", 0.75);
  });
});

Fixed code here .