react-d3-map-core

react d3 map components for reusability. For now see example for usages.

Example

With webpack build tools

• Polygons

"use strict";varReact=require('react');varReactDOM=require('react-dom');vartopojson=require('topojson');varChart=require('react-d3-map-core').Chart;varPolygon=require('react-d3-map-core').Polygon;varprojectionFunc=require('react-d3-map-core').projection;vargeoPath=require('react-d3-map-core').geoPath;(function(){varwidth=960,height=960vartopodata=require('json!../data/world-50m.json');vardata=topojson.feature(topodata,topodata.objects.land);varscale=(width+1)/2/Math.PI;vartranslate=[width/2,height/2];varprecision=.1;varpolygonClass='polygon-test';varproj=projectionFunc({projection: projection,scale: scale,translate: translate,precision: precision});vargeo=geoPath(proj);ReactDOM.render(<Chartwidth={width}height={height}><Polygonwidth={width}height={height}data={data}geoPath={geo}polygonClass={polygonClass}/></Chart>,document.getElementById('blank-polygon'))})()

Components

• Polygon
• Point
• PointText
• Centroid
• Circle
• ChartContainer
• Graticule
• Mesh
• Voronoi
• Sphere
• Svg
• Title
• Tile
• VectorTile
• Tooltip
• Arc
• Marker
• Popup
• zoomControl

Export functions

• geoPath
• graticule
• projection
• scale
• isTooltipUpdate
• tileFunc

Install

npm install react-d3-map-core

Setting tile animation

for tiles we use ReactCSSTransitionGroup for css animation. You can clone the css below to your html to have your tiles with animations while leaving and entering.

Or you could simply clone the code in react-d3-map.css.

.tiles-enter {
opacity:0.01;
}
.tiles-enter.tiles-enter-active {
opacity:1;
transition: opacity 500ms ease-in;
}
.tiles-leave {
opacity:1;
}
.tiles-leave.tiles-leave-active {
opacity:0.01;
transition: opacity 300ms ease-in;
}

License

Apache 2.0