I have the following TopoJSON file:
{
"type":"Topology",
"arcs":[...],
"transform":{
"scale":[...],
"translate":[...]
},
"objects":{
"BRGR":{
"type":"GeometryCollection",
"geometries":[
{
"arcs":[[0,1,2]],
"type":"Polygon",
"properties":{
"codarea":"1"
}
},
{
"arcs":[[[3,4,5,-1]],[[6]]],
"type":"MultiPolygon",
"properties":{
"codarea":"2"
}
},
{
"arcs":[[[-5,7,8,9]],[[10]]],
"type":"MultiPolygon",
"properties":{
"codarea":"3"
}
},
{
"arcs":[[11,12,-9]],
"type":"Polygon",
"properties":{
"codarea":"4"
}
},
{
"arcs":[[-13,13,-2,-6,-10]],
"type":"Polygon",
"properties":{
"codarea":"5"
}
}]
}
}
}
I’m able to log it in the console using:
console.log(topology.objects.BRGR);
Having the following expected result:
{type: 'GeometryCollection', geometries: Array(5)}
geometries: Array(5)
0: {arcs: Array(1), type: 'Polygon', properties: {…}}
1: {arcs: Array(2), type: 'MultiPolygon', properties: {…}}
2: {arcs: Array(2), type: 'MultiPolygon', properties: {…}}
3: {arcs: Array(1), type: 'Polygon', properties: {…}}
4: {arcs: Array(1), type: 'Polygon', properties: {…}}
length: 5
[[Prototype]]: Array(0)
type: "GeometryCollection"
[[Prototype]]: Object
I’m unable to log the value of codarea directly. What brought me the closest solution was:
console.log(topojson.feature(topology, topology.objects.BRGR).features);
I’ve tried a lot of possibilities such as:
console.log(topojson.feature(topology, topology.objects.BRGR).features.properties.codarea);
without success. I have no idea what we have to do to get this value.
Actually I’d like to use it in a D3.js script to modify the color of the map on the fly.
The code is:
// svg general properties
var width = 1024,
height = 512;
// set projection
// https://github.com/d3/d3-geo#projections
var projection = geo.geoCylindricalEqualArea() // projeção cilíndrica equivalente de Lambert
.parallel(32)
.scale(670)
.rotate([45,14,0]);
// color scheme
var colorScheme = d3.schemeBlues[5];
colorScheme.unshift("#eeeeee")
var colorScale = d3.scaleThreshold()
.domain([0, 1])
.range(colorScheme);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geoPath()
.projection(projection);
var g = svg.append("g");
// load and display the map
d3.json("map.json").then(function(topology) {
g.selectAll("path")
.data(topojson.feature(topology, topology.objects.BRGR).features)
.enter().append("path")
//---->
//----> THIS IS WHERE CODAREA WOULD MODIFY COLOR
//---->
.style("fill", function (event, d) {
// pull data for this state
d.codarea = ???;
// set the color
return colorScale(d.codarea);
})
.attr("d", path)
});
And the highlighted part I extracted from http://bl.ocks.org/palewire/d2906de347a160f38bc0b7ca57721328 but differently from the source I’m using D3 version 7
//----> MY CODE
//----> THIS IS WHERE CODAREA WOULD MODIFY COLOR
//---->
.style("fill", function (event, d) {
// pull data for this state
d.codarea = ???;
// set the color
return colorScale(d.codarea);
})
And here the original code:
.attr("fill", function (d){
// Pull data for this country
d.total = data.get(d.id) || 0;
// Set the color
return colorScale(d.total);
})
But as I said, I can’t get the proper data from my TopoJSON. How would this be possible, so I can use it in the script?