A Javascript Library For Building Composable And Declarative Maps

A whole new solution for building reusable components for your maps

Introduction

Preserve d3 flexibility

react-d3-map is a highly modular map library. You can build new interactive maps like leaflet, openlayers. And you could also build customized data visualization maps you love!

Provide high level chart library

react-d3-map support high level components that you can build your shapes like polygons, points, markers, lines ... etc. By importing the exact module you need.

Better data flow, and structures

react-d3-map combine the power of d3 flexibility and the data flow, structures, components, virtual DOM, and others benefits that react.js provide.

Demo

Building a interactive map

react-d3-map can make you easily build interactive map just like leaflet, openlayers. But we replace layers with SVG components. Which can make us access to DOM more easily.

ReactDOM.render(
  <Map
    width= {width}
    height= {height}
    scale= {scale}
    scaleExtent= {scaleExtent}
    center= {center}
  >
    <MarkerGroup
      key= {"polygon-test"}
      data= {data}
      popupContent= {popupContent}
      onClick= {onMarkerClick}
      onCloseClick= {onMarkerCloseClick}
      onMouseOver= {onMarkerMouseOver}
      onMouseOut= {onMarkerMouseOut}
      markerClass= {"your-marker-css-class"}
    />
  </Map>
, document.getElementById('blank-point')
)

Map bubble

react-d3-map-bubble provide high level component, that you can build your bubble map plot in ease.

ReactDOM.render(
  <MapBubble
    width= {width}
    height= {height}
    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}
    showTile= {true}
  />
, document.getElementById('blank-earthquake')
)

Map with orthographic

Using components in react-d3-map and react-d3-map-core, you can build your own reusable maps, such as orthographic in maps.

ReactDOM.render(
  <MapOrthographic
    width= {width}
    height= {height}
    scale= {scale}
    scaleExtent= {scaleExtent}
    center= {center}
    clip={true}
    bounds={[[0, 0], [width, height]]}
  >
    <Container/>
  </MapOrthographic>
, document.getElementById('blank-multipolygon')
)

Map choropleth

react-d3-map-choropleth provide high level component, that you can build your choropleth map plot in ease.

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}
    tooltipContent= {tooltipContent}
    showTooltip= {true}
    showTile= {true}
  />
, document.getElementById('blank-twpopulation')
)