react-d3-map-choropleth

react-d3-map choropleth

Example1 (USA unemployment rate)

- MapChoropleth

Reference: http://bl.ocks.org/mbostock/4060606

``js
"use strict";

var React = require('react');
var ReactDOM = require('react-dom');
var topojson = require('topojson');
var MapChoropleth = require('react-d3-map-choropleth').MapChoropleth;

var css= require('./css/choropleth.css');

// Example
// http://bl.ocks.org/mbostock/4060606
(function() {
var width = 960,
height = 600;

var topodata = require('json!../data/us.json');
var unemploy = require('dsv?delimiter=\t!../data/unemployment.tsv')

// data should be a MultiLineString
var dataStates = topojson.mesh(topodata, topodata.objects.states, function(a, b) { return a !== b; });
/// data should be polygon
var dataCounties = topojson.feature(topodata, topodata.objects.counties).features;

// domain
var domain = {
scale: 'quantize',
domain: [0, .15],
range: d3.range(9).map(function(i) { return "q" + i + "-9"; })
};
var domainValue = function(d) { return +d.rate; };
var domainKey = function(d) {return +d.id};
var mapKey = function(d) {return +d.id};

var scale = 1280;
var translate = [width / 2, height / 2];
var projection = 'albersUsa';

ReactDOM.render(
width= {width}
height= {height}
dataPolygon= {dataCounties}
dataMesh= {dataStates}
scale= {scale}
domain= {domain}
domainData= {unemploy}
domainValue= {domainValue}
domainKey= {domainKey}
mapKey = {mapKey}
translate= {translate}
projection= {projection}
showGraticule= {true}
/>
, document.getElementById('blank-choropleth')
)

})()
`

!us

Example2 (Taiwan population)

- MapChoropleth

`js
"use strict";

var React = require('react');
var ReactDOM = require('react-dom');
var topojson = require('topojson');
var MapChoropleth = require('react-d3-map-choropleth').MapChoropleth;

var css= require('./css/twpopulation.css');

// Example
(function() {
var width = 960,
height = 800;

var topodata = require('json!../data/twTown1982.topo.json');
var population = require('json!../data/population.json')['102']

// data should be a MultiLineString
var dataMeshCounties = topojson.mesh(topodata, topodata.objects["twTown1982.geo"], function(a, b) { return a !== b; });
/// data should be polygon
var dataCounties = topojson.feature(topodata, topodata.objects["twTown1982.geo"]).features;

dataCounties.forEach(function(d, i) {
if(d.properties.TOWNID === "1605" || d.properties.TOWNID === "1603" || d.properties.TOWNID=== "1000128") {
dataCounties.splice(i, 1);
}
})

var valArr = []

for (var key in population) {
for (var reg in population[key]) {
valArr.push({
"region": key.trim() + '/' + reg.trim(),
"value": +population[key][reg]
});
}
}

// domain
var domain = {
scale: 'quantize',
domain: d3.extent(valArr, function(d) {return d.value;}),
range: d3.range(11).map(function(i) { return "q" + i + "-11"; })
};
var domainValue = function(d) { return +d.value; };
var domainKey = function(d) {return d.region};
var mapKey = function(d) {return d.properties.name.trim()};

var scale = 10000;
var center = [120.979531, 23.978567];
var projection = 'mercator';

ReactDOM.render(
width= {width}
height= {height}
dataPolygon= {dataCounties}
dataMesh= {dataMeshCounties}
scale= {scale}
domain= {domain}
domainData= {valArr}
domainValue= {domainValue}
domainKey= {domainKey}
mapKey = {mapKey}
center= {center}
projection= {projection}
showGraticule= {false}
/>
, document.getElementById('blank-twpopulation')
)

})()

`

!twpopulation

$3

!twpopulation-tile

Install

`
npm install --save react-d3-map-choropleth
``

License

Apache 2.0