Clone Datamaps examples in React

examples/arcs-example.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import Datamap from '../src';
+import Example from './example';
+
+export default class ArcsExample extends React.Component {
+
+	render() {
+		return (
+			<Example label="Arcs">
+				<Datamap
+					scope="usa"
+					fills={{
+						defaultFill: '#abdda4',
+						win: '#0fa0fa'
+					}}
+					data={{
+						TX: { fillKey: 'win' },
+						FL: { fillKey: 'win' },
+						NC: { fillKey: 'win' },
+						CA: { fillKey: 'win' },
+						NY: { fillKey: 'win' },
+						CO: { fillKey: 'win' }
+					}}
+					arc={[
+						// Datamaps seems to be having trouble converting these
+						// to coordinates, so leaving them out for now.
+						//
+						// {
+						// 	origin: 'CA',
+						// 	destination: 'TX'
+						// },
+						// {
+						// 	origin: 'OR',
+						// 	destination: 'TX'
+						// },
+						// {
+						// 	origin: 'NY',
+						// 	destination: 'TX'
+						// },
+						{
+							origin: {
+								latitude: 40.639722,
+								longitude: -73.778889
+							},
+							destination: {
+								latitude: 37.618889,
+								longitude: -122.375
+							}
+						},
+						{
+							origin: {
+								latitude: 30.19444,
+								longitude: -97.67
+							},
+							destination: {
+								latitude: 25.793333,
+								longitude: -80.290556
+							},
+							options: {
+								strokeWidth: 2,
+								strokeColor: 'rgba(100, 10, 200, 0.4)',
+								greatArc: true
+							}
+						},
+						{
+							origin: {
+								latitude: 39.861667,
+								longitude: -104.673056
+							},
+							destination: {
+								latitude: 35.877778,
+								longitude: -78.7875
+							}
+						}
+					]}
+					arcOptions={{
+						strokeWidth: 1,
+						arcSharpness: 1.4
+					}}
+				/>
+			</Example>
+		);
+	}
+
+}

examples/basic-example.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import Datamap from '../src';
+import Example from './example';
+
+export default class BasicExample extends React.Component {
+
+	render() {
+		return (
+			<Example label="Basic">
+				<Datamap />
+			</Example>
+		);
+	}
+
+}

examples/bubbles-example.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import Datamap from '../src';
+import Example from './example';
+
+export default class BubblesExample extends React.Component {
+
+	render() {
+		return (
+			<Example label="Bubbles">
+				<Datamap
+					geographyConfig={{
+						popupOnHover: false,
+						highlightOnHover: false
+					}}
+					fills={{
+						defaultFill: '#abdda4',
+						USA: 'blue',
+						RUS: 'red'
+					}}
+					bubbles={[
+						{
+							name: 'Not a bomb, but centered on Brazil',
+							radius: 23,
+							centered: 'BRA',
+							country: 'USA',
+							yeild: 0,
+							fillKey: 'USA',
+							date: '1954-03-01'
+						},
+						{
+							name: 'Castle Bravo',
+							radius: 25,
+							yeild: 15000,
+							country: 'USA',
+							significance: 'First dry fusion fuel "staged" thermonuclear weapon; a serious nuclear fallout accident occurred',
+							fillKey: 'USA',
+							date: '1954-03-01',
+							latitude: 11.415,
+							longitude: 165.1619
+						},
+						{
+							name: 'Tsar Bomba',
+							radius: 70,
+							yeild: 50000,
+							country: 'USSR',
+							fillKey: 'RUS',
+							significance: 'Largest thermonuclear weapon ever tested-scaled down from its initial 100Mt design by 50%',
+							date: '1961-10-31',
+							latitude: 73.482,
+							longitude: 54.5854
+						}
+					]}
+					bubbleOptions={{
+						popupTemplate: (geo, data) =>
+							`<div class="hoverinfo">Yield: ${data.yeild}\nExploded on ${data.date} by the ${data.country}`
+					}}
+				/>
+			</Example>
+		);
+	}
+
+}

examples/choropleth-example.jsx

@@ -0,0 +1,62 @@
+/* global d3 */
+
+import React from 'react';
+
+import Datamap from '../src';
+import Example from './example';
+
+const colors = d3.scale.category10();
+
+export default class ChoroplethExample extends React.Component {
+
+	state = {
+		data: {
+			USA: { fillKey: 'authorHasTraveledTo' },
+			JPN: { fillKey: 'authorHasTraveledTo' },
+			ITA: { fillKey: 'authorHasTraveledTo' },
+			CRI: { fillKey: 'authorHasTraveledTo' },
+			KOR: { fillKey: 'authorHasTraveledTo' },
+			DEU: { fillKey: 'authorHasTraveledTo' }
+		}
+	};
+
+	componentDidMount() {
+		this.update();
+	}
+
+	componentWillUnmount() {
+		clearInterval(this.interval);
+	}
+
+	update() {
+		this.interval = setInterval(() => {
+			this.setState({
+				data: {
+					USA: colors(Math.random() * 10),
+					RUS: colors(Math.random() * 100),
+					AUS: { fillKey: 'authorHasTraveledTo' },
+					BRA: colors(Math.random() * 50),
+					CAN: colors(Math.random() * 50),
+					ZAF: colors(Math.random() * 50),
+					IND: colors(Math.random() * 50)
+				}
+			});
+		}, 2000);
+	}
+
+	render() {
+		return (
+			<Example label="Choropleth">
+				<Datamap
+					projection="mercator"
+					fills={{
+						defaultFill: '#abdda4',
+						authorHasTraveledTo: '#fa0fa0'
+					}}
+					data={this.state.data}
+				/>
+			</Example>
+		);
+	}
+
+}

examples/example.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+export default class Example extends React.Component {
+
+	static propTypes = {
+		children: React.PropTypes.element.isRequired,
+		label: React.PropTypes.string.isRequired,
+		mapStyle: React.PropTypes.object
+	};
+
+	render() {
+		return (
+			<div className="Example">
+				<h3 className="Example-label">{this.props.label}</h3>
+				<div
+					className="Example-map"
+					style={this.props.mapStyle}
+				>
+					{React.Children.only(this.props.children)}
+				</div>
+			</div>
+		);
+	}
+
+}

examples/index.jsx

@@ -1,36 +1,26 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import Datamap from '../src';
+import ArcsExample from './arcs-example';
+import BasicExample from './basic-example';
+import BubblesExample from './bubbles-example';
+import ChoroplethExample from './choropleth-example';
+import ProjectionsGraticulesExample from './projections-graticules-example.jsx';
+import StateLabelsExample from './state-labels-example';
+import ZoomExample from './zoom-example';
 
 class App extends React.Component {
 
-	state = {
-		height: 300,
-		scope: 'world',
-		width: 500
-	};
-
-	handleUpdate = () => {
-		this.setState(Object.assign({}, {
-			height: parseInt(this.refs.height.value, 10) || null,
-			scope: this.refs.scope.value || null,
-			width: parseInt(this.refs.width.value, 10) || null
-		}, window.example));
-	};
-
 	render() {
 		return (
 			<div className="App">
-				<div className="App-options">
-					<label>Height <input ref="height" type="number" /></label>
-					<label>Scope <input ref="scope" type="text" /></label>
-					<label>Width <input ref="width" type="number" /></label>
-					<button onClick={this.handleUpdate}>Update</button>
-				</div>
-				<div className="App-map">
-					<Datamap {...this.state} />
-				</div>
+				<BasicExample />
+				<ChoroplethExample />
+				<StateLabelsExample />
+				<BubblesExample />
+				<ArcsExample />
+				<ProjectionsGraticulesExample />
+				<ZoomExample />
 			</div>
 		);
 	}

examples/projections-graticules-example.jsx

@@ -0,0 +1,71 @@
+/* global d3 */
+
+import React from 'react';
+
+import Datamap from '../src';
+import Example from './example';
+
+const colors = d3.scale.category10();
+
+export default class ProjectionsGraticulesExample extends React.Component {
+
+	render() {
+		return (
+			<Example
+				label="Projections & Graticules"
+				mapStyle={{
+					height: '600px'
+				}}
+			>
+				<Datamap
+					style={{
+						height: '600px'
+					}}
+					scope="world"
+					projection="orthographic"
+					fills={{
+						defaultFill: '#abdda4',
+						gt50: colors(Math.random() * 20),
+						eq50: colors(Math.random() * 20),
+						lt25: colors(Math.random() * 10),
+						gt75: colors(Math.random() * 200),
+						lt50: colors(Math.random() * 20),
+						eq0: colors(Math.random() * 1),
+						pink: '#0fa0fa',
+						gt500: colors(Math.random() * 1)
+					}}
+					projectionConfig={{
+						rotation: [97, -30]
+					}}
+					data={{
+						USA: { fillKey: 'lt50' },
+						MEX: { fillKey: 'lt25' },
+						CAN: { fillKey: 'gt50' },
+						GTM: { fillKey: 'gt500' },
+						HND: { fillKey: 'eq50' },
+						BLZ: { fillKey: 'pink' },
+						GRL: { fillKey: 'eq0' }
+					}}
+					graticule
+					arc={[
+						{
+							origin: {
+								latitude: 61,
+								longitude: -149
+							},
+							destination: {
+								latitude: -22,
+								longitude: -43
+							}
+						}
+					]}
+					arcOptions={{
+						greatArc: true,
+						animationSPeed: 2000
+					}}
+				/>
+			</Example>
+		);
+	}
+
+}