CODEWITHSUNDEEP
javascriptd3.js
Stefan Amyotte
Stefan Amyotte

Reputation: 33

How to Limit Size of Radius With d3.js

I'm sure the solution is straight forward, but I'm trying to find out how to limit the range of radius when I plot circles onto a geomap. I have values that range in size significantly, and the larger values end up covering a significant amount of the map. 

d3.csv("getdata.php", function(parsedRows) {

    data = parsedRows
    for (i = 0; i < data.length; i++) {
      var mapCoords = this.xy([data[i].long, data[i].lat])
      data[i].lat = mapCoords[0]
      data[i].long = mapCoords[1]
    }

    vis.selectAll("circle")
    .data(data)
    .enter().append("svg:circle")
    .attr("cx", function(d) { return d.lat })
    .attr("cy", function(d) { return d.long })
    .attr("stroke-width", "none")
    .attr("fill", function() { return "rgb(255,148,0)" })
    .attr("fill-opacity", .4)
    .attr("r", function(d) { return Math.sqrt(d.count)})
  })

This is what I have right now.

Upvotes: 3

Views: 3336

Answers (1)

Simon Boudrias
Simon Boudrias

Reputation: 44589

You'll probably want to use d3 scales by setting the domain (min/max input values) and the range (min/max output allowed values). To make this easy, don't hesitate to use d3.min and d3.max to setup the domain's values.

d3.scale will return a function that you can use when assigning the r attribute value. For example:

var scale = d3.scale.linear.domain([ inputMin, inputMax ]).range([ outputMin, outputMax ]);
vis.selectAll("circle")
  // etc...
  .attr( 'r', function(d) { return scale(d.count) });

Upvotes: 2

Related Questions