react-d3/react-d3-map-bubble

Name: react-d3-map-bubble

Owner: react-d3

Description: react-d3 bubble map

Created: 2015-11-10 03:54:05.0

Updated: 2017-12-23 03:47:16.0

Pushed: 2015-12-03 03:05:15.0

Homepage: null

Size: 2214

Language: JavaScript

GitHub Committers

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

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-d3-map-bubble

react-d3-map bubble

Example 1

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

 strict";

React = require('react');
ReactDOM = require('react-dom');
topojson = require('topojson');
MapBubble = require('../../lib').MapBubble;

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

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

r us = require('json!../data/us.json');

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

 class
r meshClass = 'border';
r polygonClass = 'land';

 domain
r domain = {
scale: 'sqrt',
domain: [0, 1e6],
range: [0, 15]


r circles = topojson.feature(us, us.objects.counties).features
  .sort(function(a, b) { return b.properties.population - a.properties.population; })
r circleValue = function(d) { return +d.properties.population; };
r projection = 'null';

r tooltipContent = function(d) {return d.properties;}

actDOM.render(
<MapBubble
  width= {width}
  height= {height}
  dataPolygon= {dataCounties}
  polygonClass= {polygonClass}
  dataMesh= {dataStates}
  meshClass = {meshClass}
  domain= {domain}
  dataCircle= {circles}
  circleValue= {circleValue}
  circleClass= {'bubble'}
  projection= {projection}
  tooltipContent= {tooltipContent}
  showGraticule= {false}
  showTooltip= {true}
  showLegend= {true}
/>
document.getElementById('blank-mapbubble')

Example 2 (Global earthquake)

 strict";

React = require('react');
ReactDOM = require('react-dom');
topojson = require('topojson');
MapBubble = require('../../lib').MapBubble;

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

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

r world = require('json!../data/world-50m.json');
r earthquake = require('json!../data/earthquake.json');

 data should be a MultiLineString
r countries = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; });
/ data should be polygon
r land = topojson.feature(world, world.objects.land);

 class
r meshClass = 'border';
r polygonClass = 'land';

 domain
r domain = {
scale: 'sqrt',
domain: d3.extent(earthquake, function(d) {return +d.deaths}),
range: [0, 50]


r circles = earthquake
r circleValue = function(d) { return +d.deaths; };

r circleX = function(d) {return +d.lng};
r circleY = function(d) {return +d.lat};

r tooltipContent = function(d) {
delete d.cell;
delete d.comments;
return d;


r scale = (width + 1) / 2 / Math.PI;
r translate = [width / 2, height / 2];
r precision = .1;
r projection = 'mercator';

actDOM.render(
<MapBubble
  width= {width}
  height= {height}
  dataPolygon= {land}
  polygonClass= {polygonClass}
  dataMesh= {countries}
  meshClass = {meshClass}
  domain= {domain}
  dataCircle= {circles}
  circleValue= {circleValue}
  circleClass= {'bubble'}
  circleX= {circleX}
  circleY= {circleY}
  tooltipContent= {tooltipContent}
  projection= {projection}
  precision= {precision}
  translate= {translate}
  scale= {scale}
  showGraticule= {true}
  showTooltip= {true}
  showLegend= {false}
/>
document.getElementById('blank-earthquake')

With tile

Install

install --save react-d3-map-bubble

License

Apache 2.0