score:12
you don't need to loop through the array of features. your data file is a featurecollection, which d3 can draw, either as a single path element:
svg.append("path").datum(data).attr("d", d3.geo.path());
or as separate path elements, one for each feature (country):
svg.selectall("path").data(data.features)
.enter().append("path").attr("d", d3.geo.path())
by default d3 uses the projection d3.geo.albersusa()
which brings hawaii to mexico and alaska to just outside the tropics. you can switch to the equirectangular projection to see the whole world:
d3.json(
"https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/6cf0946a0f4d027d21686e8402f19b524c4f6385/countries.geojson",
function(error, data) {
var projection = d3.geo.equirectangular();
var path = d3.geo.path().projection(projection);
var width = 960;
var height = 600;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.selectall("path")
.data(data.features)
.enter().append("path")
.attr("d", path)
.attr("fill", "#3e429a");
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
epilogue: i initially tried to use the more common mercator projection, only to find that it cannot handle antarctica. d3 draws the shape for the continent, then fills the rest of the oceans instead.
in the same d3 forum thread, the author of d3 mentioned a bug in the topojson tool used to generate maps, so it might be an issue with the data file you use. if you prefer mercator, you might need to work with the maintainer of geo-boundaries-world-110m to fix the data file, or just exclude antarctica from your maps.
demo of antarctica in mercator:
d3.json(
"https://raw.githubusercontent.com/datasets/geo-boundaries-world-110m/6cf0946a0f4d027d21686e8402f19b524c4f6385/countries.geojson",
function(error, data) {
var projection = d3.geo.mercator();
var path = d3.geo.path().projection(projection);
var width = 960;
var height = 600;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var antarctica = data.features.splice(6, 1);
// now "data" has the rest of the world
svg.selectall("path")
.data(antarctica)
.enter().append("path")
.attr("d", path)
.attr("stroke", "red").attr("stroke-width", 10)
// thick borders so we can see the odd paths
.attr("fill", "#3e429a");
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Source: stackoverflow.com
Related Query
- D3.js - JSON data array is binding the same array element to everything
- Why d3.domain() has only one element when I use the whole data array as domain?
- joining multiple parts of a g element to the same data in d3
- D3 - Finding an SVG Element with the same data
- Default values in json object based on contents of other objects in the same array
- D3 - How can I show/hide a text element when hovering a circle element created from different attributes of the same data entry?
- C3 bargraph going upper-side if we give y axis max value and the data array are same
- D3:reflect data changes on visualization keeping the same array size. Trying to represent a sort algorithm visually
- Remove element in json array as new data added?
- D3.js: Get an array of the data attached to a selection?
- Can d3.js draw two scatterplots on the same graph using data from the same source?
- How to load data from an internal JSON array rather than from an external resource / file for a collapsible tree in d3.js?
- D3 v4 Brush and Zoom on the same element (without mouse events conflicting)
- Updating the data of a pack layout from JSON call and redrawing
- d3.js - max and min value from json data which has array of values
- D3 Stacked Chart with array or JSON data
- D3 - How to bind the same data to multiple object?
- Binding data to each element using HTML textarea
- how can i group JSON data into the weeks according to calender?
- How to get the specific JSON array from a value in that array
- Importing JSON data to D3.js + Google Map through an internal array
- Crossfiltering of JSON data by the most recent time
- D3.js: Dragging everything in group ('g') by element contained in the group using origin() function
- Updating data values with HTML input and changing the data array
- How to get the index of the data element in a histogram on mouseover?
- How to read JSON data from same json for tree layout insteadof reading from other .JSON file?
- Chart is not showing the data array of objects
- calculate the date diff in javascript from JSON array
- d3.js binding data array in array
- Two scripts adding different listeners to the same element
More Query from same tag
- Create infinite parallel pattern
- nvd3 related 'Get' requests fail in the demo project?
- Arrows are not touching to nodes in d3.js
- Bend SVG `<g>` around Curve
- Bilevel Partition D3 create a simple 2 layer
- Track and filter last month value in dc.js
- Need help plotting area between multivariate lines - not from axis to line
- D3 force-directed graph: update node position
- Positiong divs created by d3.js
- Can't fill circle background with color threshold
- How to use a band scale to push the chart to the edges
- x >= x pattern in JavaScript
- d3.js: click event in a bubble/scatter chart
- How do I use D3 with JavaScript events
- Reference JS array in D3 Stacked Bar Chart
- First 2 entries on stacked bar chart not displaying in dc.js / d3.js
- How to pass JavaScript object to another function?
- Using RequireJS to load plotly and D3
- d3 horizontal chart showing false data
- D3.js: 'this' implicitly has type 'any' because it does not have a type annotation
- filter json data and then use d3.nest
- Type error after making standalone d3v5 zoom with tooltip code from Mike Bostocks oberservablehq example
- custom no data label in nvd3 scatter chart
- D3: Create a continuous color scale with many strings/inputs for the range and dynamically changing values of the domain
- C3.js custom tool tip animation onmouseover
- Adding hover effect in d3 word cloud
- Programmatically triggering a D3 brush event
- Get attribute x for axis' text element
- How to use d3fc-label-label.js on a map?
- Show d3 node text only on hover