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