react-d3-map-choropleth
v0.5.1
Published
react-d3 map choropleth component
Downloads
83
Readme
react-d3-map-choropleth
react-d3-map choropleth
Example1 (USA unemployment rate)
- MapChoropleth
Reference: http://bl.ocks.org/mbostock/4060606
"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(
<MapChoropleth
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')
)
})()
Example2 (Taiwan population)
- MapChoropleth
"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(
<MapChoropleth
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')
)
})()
With tile
Install
npm install --save react-d3-map-choropleth
License
Apache 2.0