score:1
topojson is a really powerfull tool. it has its own cli (command line interface) to generate your own topojson files.
that cli allows you to create a unique file with the topology and the data you want to merge with.
even though it is in its v3.0.2 the first versión looks the clear one to me. this is an example of how you can merge a csv
file with a json
through a common id
attribute.
# simplified versión from https://bl.ocks.org/luissevillano/c7690adccf39bafe583f72b044e407e8
# note is using topojson cli v1
topojson \
-e data.csv \
--id-property cusec,cod \
-p population=+t1_1,area=+shape_area \
-o cv.json \
-- cv/shapes/census.json
there is a data.csv
file with a cod
column and census.json
file with a property named cusec
.
- using the --id-property
you can specify which attributes will be used in the merge.
- with the property -p
you can create new properties on the fly.
this is the solid solution where you use one unique file (with one unique request) with the whole data. this best scenario is not always possible so another solution could be the next one.
getting back to javascript
, you can create a new variable accessible through the attribute in common the following way. having your data the format:
// countrystatistics
{
"idtopo": "004",
"country": "afghanistan",
"countrycode": "afg",
// ..
},
and your topojson file the structure:
{"type":"polygon","arcs":[[0,1,2,3,4,5]],"id":"004"},
{"type":"multipolygon","arcs":[[[6,7,8,9]],[[10,11,12]]],"id":"024"} // ...
a common solution to this type of situation is to create an array
variable accessible by that idtopo
:
var databyid = [];
countrystatistics.foreach(function(d) {
databyid[d.idtopo] = d;
});
then, that variable will have the next structure:
[
004:{
"idtopo": "004",
"country": "afghanistan",
"countrycode": "afg",
//...
},
008: {
//...
}
]
from here, you can access the properties through its idtopo
attribute, like this:
databyid['004'] // {"idtopo":"004","country":"afghanistan","countrycode":"afg" ...}
you can decide to iterate through the topo data and add these properties to each feature:
var countries = topojson
.feature(data, data.objects.countries)
.features.map(function(d) {
d.properties = databyid[d.id];
return d
});
or use this array whenever you need it
// ...
.on("mouseover", function(d) {
d3.select(this).classed("hovered", true);
console.log(databyid[d.id]);
});
Source: stackoverflow.com
Related Query
- Access topojson object to change map country properties in d3.js
- How to dynamically change the color of a country on d3 map
- D3JS TopoJSON map of Australia: projection accurate but no country rendered
- How to access object properties in a JSON file using literals obtained from the same file
- d3js v5 + topojson v3 Access to the object's properties in the background
- d3.js topojson based choloropleth map for 170 countries . Show specific country map on selection
- Center a map in d3 given a geoJSON object
- TopoJSON Properties Preservation
- D3 DataMaps (or jvectormap): How to put a custom object on map by coords
- Change color on a map D3
- Rendering only a portion of a topojson map using D3.js
- Change color of selected map feature in d3.js
- d3js v5 + Topojson v3 Map not rendering
- D3 : map with topojson doesn't render properly
- how to dynamically place lat, lon data onto a topoJSON map
- Put markers to a map generated with topoJSON and d3.js
- Change the format of JavaScript Data object
- Change object attribute following transition D3
- Putting coordinate value on topojson US map
- d3 world map with country click and zoom almost working not quite
- topojson / D3 / Map with longitude + latitude
- How to access original event object when d3 event binding
- D3js not projecting longitude/latitude points properly onto topojson map
- D3 sort an array of objects on 2 object properties
- Let's make a TopoJSON map and view it with D3.js
- d3js v5 + Topojson v3 Map with border rendering
- d3.js small multiples map with different filled country for every multiple
- How to run function after D3 TOPOJSON map loads
- d3.js onclick and touch works erratically on topojson map
- Access the text within SVG object using d3js
More Query from same tag
- Word Cloud Generator
- D3 - Update Pattern and y axis
- D3 Path with random colored lines
- nvd3 multibar chart with stacked option the bars are not appearing properly
- grouped bar chart from JSON data instead of CSV
- Outputting SVG Graph from D3.js Using Phantomjs
- How to add multiple images to svg in D3 (quantity based on value in dataset)
- D3 not able to show line
- D3/SVG: Why is this code slower when selection is changed?
- How to use translateX and translateY in D3.js?
- d3 bar chart with sub categories
- Assigning __data__ from parent node to child with javascript & d3js
- Populating D3 chart with external JSON file
- Using d3, what is the easiest way to draw a 10000 km2 polygon on a map?
- How to match svg element ids with json keys
- d3.js map chart draw rectangle
- d3js - the last `appended` element alone applied the style property
- D3 percentage superscript
- Adding additional data points to a chart
- Transition not working d3
- Importing json file in d3.js
- Implementing zoom buttons using d3
- Build issue angular 5 has no exported member 'DSVRowAny'
- Transition both circles and text (within g element) in single general update pattern
- How to nest a d3.arc inside another?
- Properly loading Template.templateName.rendered data context
- Long int to Javascript date format
- D3 oncontext menu , change node color selected
- d3 transitions using two datasets
- Animating an algorithm in Javascript