CODEWITHSUNDEEP
d3.js
rainbowunicorn
rainbowunicorn

Reputation: 115

Circles not appending to coordinates

Very new to D3, so thanks for being patient! I'm building a map where I want to append circles to certain cities on a US map. The lat and lon coordinates are in a .csv I'm hosting on GitHub.

Right now, the two circles I'm trying to append just appear in the far left corner of the map:

The Map

These are the errors I'm getting:

Console Errors

Here's the code:

<head>
<script>
    function draw(geo_data) {
      'use strict';

      var margin = 75,
        width = 1920 - margin,
        height = 1080 - margin;

      var svg = d3.select('body')
        .append('svg')
        .attr('width', width + margin)
        .attr('height', height + margin)
        .append('g')
        .attr('class', 'map');

      var projection = d3.geoAlbersUsa();

      var path = d3.geoPath().projection(projection);

      var map = svg.selectAll('path')
        .data(geo_data.features)
        .enter()
        .append('path')
        .attr('d', path)
        .style('fill', 'rgba(253, 227, 167, 0.8)')
        .style('stroke', 'black')
        .style('stroke-width', 0.4);

      d3.csv('top100cities.csv', function(error, data) {

        svg.append('g')
          .attr('class', 'bubble')
          .selectAll('circle')
          .data(data)
          .enter()
          .append('circle')
          .attr('cx', function(d) {
            return projection([d.lon, d.lat]);
          })
          .attr('cy', function(d) {
            return projection([d.lon, d.lat]);
          })
          .attr('r', 20)
          .style('fill', 'rgba(103, 65, 114, 0.5)');

      });

    };
</script>
</head>
<body>
<script>
d3.json('us_states.json', draw);
</script>
</body>

Upvotes: 1

Views: 122

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38151

You are setting the same value for both cx and cy:

      .attr('cx', function(d) {
        return projection([d.lon, d.lat]);
      })
      .attr('cy', function(d) {
        return projection([d.lon, d.lat]);
      })

That value is not either cx or cy, it is both: projection([d.lon,d.lat]) will return a two element array containing x and y, so you should be using:

      .attr('cx', function(d) {
        return projection([d.lon, d.lat])[0]; // x coordinate
      })
      .attr('cy', function(d) {
        return projection([d.lon, d.lat])[1]; // y coordinate
      })

The error occurs as you pass an array and not a number.

Upvotes: 1

Related Questions