Drawing circles via d3js and converting coordinates

I have following d3js code that draws country map based on geojson via d3.json and renderMap function. I want to add cities to the map that will be represented as a circles. Cities will be in the same svg as a country map.
Cities are in ua_cities_admin.csv and rendered via renderCity function.

What I don’t understand is how to place data array from renderCity in the svg component and how to map city coordinates to country map.

Any help with this will be appreciated.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>geoPath measures</title>
</head>

<body>
<div align="center">
<svg id="my_dataviz"></svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>

<script>
  var height = window.innerHeight - 100;
  var width = window.innerWidth - 100;
  var svg = d3.select('#my_dataviz')
    .attr("width", width)
    .attr("height", height);
  
function renderMap(data) {
  var projection = d3.geoIdentity().reflectY(true).fitSize([width, height], data)
  var geoGenerator = d3.geoPath().projection(projection);
  svg.append("g")
    .selectAll("path")
    .data(data.features)
    .enter()
    .append('path')
    .attr('d', geoGenerator)
    .attr('fill', 'steelblue');
};

function renderCity(data) {
  var projection = d3.geoIdentity().reflectY(true).fitSize([width, height], data)
  console.log(data)
  svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 3);
};

d3.json('https://raw.githubusercontent.com/EugeneBorshch/ukraine_geojson/master/Ukraine.json', renderMap);
d3.csv('ua_cities_admin.csv', renderCity);
</script>
</body>
</html>

ua_cities_admin.csv file has following fields:

  • City
  • lat
  • lng

74 thoughts on “Drawing circles via d3js and converting coordinates”