d3.js - D3 draw single element from geojson -

am pretty new both js , d3js. trying create single circle on map transitions (size increases decreases) through data. however, example, 4 elements added svg. , size of each of them changes @ same time. however, want create single circle transitions using count field. link current block: https://bl.ocks.org/shannondussoye/e8feaa2cf22f7e6a7d12582b923d999f

thanks

your code here:

var circle = svg.selectall("circle")   .data(data.features)   .enter()   .append("circle"); 

will append 1 circle each item in array data.features (assuming no circles present). there 4 items in array, you'll have 4 circles. if want append 1 circle, change input data array array of 1 feature:

.data([data.features[0]]).enter().append()...

then, can update data, after initial append, when want transition new feature:

.data([data.features[i]])   .attr("attr updated",...) 

the example below applies method in non-geographic setting: 1. append feature, 2. update feature properties next item in array, 3. repeat:

var svg = d3.select("body")    .append("svg")    .attr("width",400)    .attr("height",400);      var data = [{x:100,y:100,r:10},{x:200,y:100,r:30},{x:200,y:200,r:10},{y:200,x:100,r:25}];    var circle = svg.selectall("circle")    .data([data[0]])    .enter()    .append("circle")    .attr("cx",function(d) { return d.x; })    .attr("cy",function(d) { return d.y; })    .attr("r",function(d) { return d.r; });      var = 0;    transition();      function transition() {    circle.data([data[++i%4]])  // next item in data array, assign datum feature      .transition()       .attr("cx",function(d) { return d.x; }) // update properties of feature      .attr("cy",function(d) { return d.y; })      .attr("r", function(d) { return d.r; })      .each("end",transition)  // loop      .duration(2000)  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

here map method (with minimal code changes - though regretfully changed json file name)