# react-d3-map-core

> react-d3 map core component

Latest version **0.13.7** (published 2015-12-18) · Apache 2.0 license · 0 weekly downloads

## Install

```sh
npm install react-d3-map-core
pnpm add react-d3-map-core
yarn add react-d3-map-core
bun add react-d3-map-core
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.13.7 |
| Published | 2015-12-18 |
| First published | 2015-11-08 |
| Weekly downloads | 0 |
| License | Apache 2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ElixirDoc team |
| Maintainers | chihsuan, chilijung |

## Links

- npm: https://www.npmjs.com/package/react-d3-map-core
- npm.io page: https://npm.io/package/react-d3-map-core

## Dependencies (5)

- [d3](https://npm.io/package/d3.md) ^3.5.11
- [react](https://npm.io/package/react.md) ^0.14.3
- [queue-async](https://npm.io/package/queue-async.md) ^1.0.7
- [react-faux-dom](https://npm.io/package/react-faux-dom.md) ^2.1.0
- [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^0.14.2

## Recent versions

- 0.13.7 (latest) — 2015-12-18
- 0.13.6 — 2015-12-16
- 0.13.5 — 2015-12-14
- 0.13.4 — 2015-12-03
- 0.13.3 — 2015-11-29
- 0.13.2 — 2015-11-28
- 0.13.1 — 2015-11-28
- 0.13.0 — 2015-11-27
- 0.12.0 — 2015-11-24
- 0.11.10 — 2015-11-24
- 0.11.9 — 2015-11-24
- 0.11.8 — 2015-11-23
- 0.11.7 — 2015-11-23
- 0.11.6 — 2015-11-23
- 0.11.5 — 2015-11-23
- … 48 more at https://npm.io/package/react-d3-map-core/versions

## README

# react-d3-map-core

[![Dependency Status](https://gemnasium.com/react-d3/react-d3-map-core.svg)](https://gemnasium.com/react-d3/react-d3-map-core)

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


## Example

#### With webpack build tools

- Polygons

```js
"use strict";

var React = require('react');
var ReactDOM = require('react-dom');
var topojson = require('topojson');
var Chart = require('react-d3-map-core').Chart;
var Polygon = require('react-d3-map-core').Polygon;
var projectionFunc = require('react-d3-map-core').projection;
var geoPath = require('react-d3-map-core').geoPath;

(function() {
  var width = 960,
  height = 960

  var topodata = require('json!../data/world-50m.json');

  var data = topojson.feature(topodata, topodata.objects.land);
  var scale = (width + 1) / 2 / Math.PI;
  var translate = [width / 2, height / 2];
  var precision = .1;

  var polygonClass = 'polygon-test';

  var proj = projectionFunc({
    projection: projection,
    scale: scale,
    translate: translate,
    precision: precision
  });
  var geo = geoPath(proj);


  ReactDOM.render(
    <Chart
      width= {width}
      height= {height}
    >
      <Polygon
        width= {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`.

```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

---
_Source: https://npm.io/package/react-d3-map-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._