react-d3/react-d3-map-choropleth

Name: react-d3-map-choropleth

Owner: react-d3

Description: react-d3 map choropleth

Created: 2015-11-09 12:24:44.0

Updated: 2017-12-30 13:41:39.0

Pushed: 2015-12-03 15:05:17.0

Homepage: null

Size: 3365

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits
Howard Chi	2015-12-03 15:05:07.0	10

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-d3-map-choropleth

react-d3-map choropleth

Example1 (USA unemployment rate)

• MapChoropleth

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

 strict";

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

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

xample
ttp://bl.ocks.org/mbostock/4060606
ction() {
r width = 960,
ight = 600;

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

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

 domain
r domain = {
scale: 'quantize',
domain: [0, .15],
range: d3.range(9).map(function(i) { return "q" + i + "-9"; })

r domainValue = function(d) { return +d.rate; };
r domainKey = function(d) {return +d.id};
r mapKey = function(d) {return +d.id};

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

actDOM.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

 strict";

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

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

xample
ction() {
r width = 960,
ight = 800;

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

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

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

r valArr = []

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


 domain
r domain = {
scale: 'quantize',
domain: d3.extent(valArr, function(d) {return d.value;}),
range: d3.range(11).map(function(i) { return "q" + i + "-11"; })

r domainValue = function(d) { return +d.value; };
r domainKey = function(d) {return d.region};
r mapKey = function(d) {return d.properties.name.trim()};

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

actDOM.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

install --save react-d3-map-choropleth

License

Apache 2.0