Merge pull request #2 from btmills/updates

Updates

.babelrc

@@ -1,4 +1,7 @@
 {
 	"presets": ["es2015", "react"],
-	"plugins": ["transform-object-rest-spread"]
+	"plugins": [
+		"transform-class-properties",
+		"transform-object-rest-spread"
+	]
 }

.eslintrc.json

@@ -3,6 +3,8 @@
 
 	"extends": "@btmills/eslint-config-btmills/react",
 
+	"parser": "babel-eslint",
+
 	"env": {
 		"browser": true
 	}

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,63 @@
+/* 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
+					data={this.state.data}
+					fills={{
+						defaultFill: '#abdda4',
+						authorHasTraveledTo: '#fa0fa0'
+					}}
+					projection="mercator"
+					updateChoroplethOptions={{ reset: false }}
+				/>
+			</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,45 +1,31 @@
 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';
 
-const App = React.createClass({
-
-	displayName: 'App',
-
-	getInitialState() {
-		return {
-			height: 300,
-			scope: 'world',
-			width: 500
-		};
-	},
-
-	update() {
-		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));
-	},
+class App extends React.Component {
 
 	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.update}>Update</button>
-				</div>
-				<div className="App-map">
-					<Datamap {...this.state} />
-				</div>
+				<BasicExample />
+				<ChoroplethExample />
+				<StateLabelsExample />
+				<BubblesExample />
+				<ArcsExample />
+				<ProjectionsGraticulesExample />
+				<ZoomExample />
 			</div>
 		);
 	}
 
-});
+}
 
 ReactDOM.render(
 	<App />,