diff --git a/examples/arcs-example.jsx b/examples/arcs-example.jsx new file mode 100644 index 0000000..7eb80b1 --- /dev/null +++ b/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 ( + + + + ); + } + +} diff --git a/examples/basic-example.jsx b/examples/basic-example.jsx new file mode 100644 index 0000000..a428450 --- /dev/null +++ b/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 ( + + + + ); + } + +} diff --git a/examples/bubbles-example.jsx b/examples/bubbles-example.jsx new file mode 100644 index 0000000..53265dc --- /dev/null +++ b/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 ( + + + `
Yield: ${data.yeild}\nExploded on ${data.date} by the ${data.country}` + }} + /> + + ); + } + +} diff --git a/examples/choropleth-example.jsx b/examples/choropleth-example.jsx new file mode 100644 index 0000000..fcec303 --- /dev/null +++ b/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 ( + + + + ); + } + +} diff --git a/examples/example.jsx b/examples/example.jsx new file mode 100644 index 0000000..2d4e502 --- /dev/null +++ b/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 ( +
+

{this.props.label}

+
+ {React.Children.only(this.props.children)} +
+
+ ); + } + +} diff --git a/examples/index.jsx b/examples/index.jsx index da8a703..bfa8e7c 100644 --- a/examples/index.jsx +++ b/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 (
-
- - - - -
-
- -
+ + + + + + +
); } diff --git a/examples/projections-graticules-example.jsx b/examples/projections-graticules-example.jsx new file mode 100644 index 0000000..6cf2f6c --- /dev/null +++ b/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 ( + + + + ); + } + +} diff --git a/examples/screen.css b/examples/screen.css index 88e4a1c..757ce48 100644 --- a/examples/screen.css +++ b/examples/screen.css @@ -1,7 +1,13 @@ -* { +html { box-sizing: border-box; } +*, +*:before, +*:after { + box-sizing: inherit; +} + html, body, #app { @@ -15,57 +21,22 @@ body { font: 16px sans-serif; } -.App { - display: flex; - height: 100%; -} - -.App-options { +.Example { + align-items: center; display: flex; flex-direction: column; - padding: 10px; - align-items: stretch; - background: #fafafa; - border-right: 1px solid #e8e8e8; - z-index: 1; } -.App-options label { - padding: 10px; - display: flex; - align-items: center; - justify-content: flex-end; -} - -.App-options input { - width: 200px; - margin-left: 10px; - padding: 5px 10px; - font: inherit; - outline: 0; -} - -.App-options button { - margin: 10px; - padding: 10px; - background: #4183c4; - font: inherit; - color: white; - border: 0; - outline: 0; -} - -.App-options button:active { - background: #3673b0; -} - -.App-map { - flex: 1; - display: flex; - align-items: center; - justify-content: center; +.Example-map { + height: 500px; + width: 750px; } -.App-map > * { - border: 1px solid #eee; +.hoverinfo { + padding: 4px; + border-radius: 1px; + background-color: #fff; + box-shadow: 1px 1px 5px #ccc; + font-size: 12px; + border: 1px solid #ccc; } diff --git a/examples/state-labels-example.jsx b/examples/state-labels-example.jsx new file mode 100644 index 0000000..093bccf --- /dev/null +++ b/examples/state-labels-example.jsx @@ -0,0 +1,236 @@ +import React from 'react'; + +import Datamap from '../src'; +import Example from './example'; + +export default class StateLabelsExample extends React.Component { + + render() { + return ( + + + `
${geography.properties.name}\nElectoral Votes: ${data.electoralVotes}`, + highlightBorderWidth: 3 + }} + fills={{ + 'Republican': '#cc4731', + 'Democrat': '#306596', + 'Heavy Democrat': '#667faf', + 'Light Democrat': '#a9c0de', + 'Heavy Republican': '#ca5e5b', + 'Light Republican': '#eaa9a8', + 'defaultFill': '#eddc4e' + }} + data={{ + AZ: { + fillKey: 'Republican', + electoralVotes: 5 + }, + CO: { + fillKey: 'Light Democrat', + electoralVotes: 5 + }, + DE: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + FL: { + fillKey: 'UNDECIDED', + electoralVotes: 29 + }, + GA: { + fillKey: 'Republican', + electoralVotes: 32 + }, + HI: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + ID: { + fillKey: 'Republican', + electoralVotes: 32 + }, + IL: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + IN: { + fillKey: 'Republican', + electoralVotes: 11 + }, + IA: { + fillKey: 'Light Democrat', + electoralVotes: 11 + }, + KS: { + fillKey: 'Republican', + electoralVotes: 32 + }, + KY: { + fillKey: 'Republican', + electoralVotes: 32 + }, + LA: { + fillKey: 'Republican', + electoralVotes: 32 + }, + MD: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + ME: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + MA: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + MN: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + MI: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + MS: { + fillKey: 'Republican', + electoralVotes: 32 + }, + MO: { + fillKey: 'Republican', + electoralVotes: 13 + }, + MT: { + fillKey: 'Republican', + electoralVotes: 32 + }, + NC: { + fillKey: 'Light Republican', + electoralVotes: 32 + }, + NE: { + fillKey: 'Republican', + electoralVotes: 32 + }, + NV: { + fillKey: 'Heavy Democrat', + electoralVotes: 32 + }, + NH: { + fillKey: 'Light Democrat', + electoralVotes: 32 + }, + NJ: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + NY: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + ND: { + fillKey: 'Republican', + electoralVotes: 32 + }, + NM: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + OH: { + fillKey: 'UNDECIDED', + electoralVotes: 32 + }, + OK: { + fillKey: 'Republican', + electoralVotes: 32 + }, + OR: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + PA: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + RI: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + SC: { + fillKey: 'Republican', + electoralVotes: 32 + }, + SD: { + fillKey: 'Republican', + electoralVotes: 32 + }, + TN: { + fillKey: 'Republican', + electoralVotes: 32 + }, + TX: { + fillKey: 'Republican', + electoralVotes: 32 + }, + UT: { + fillKey: 'Republican', + electoralVotes: 32 + }, + WI: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + VA: { + fillKey: 'Light Democrat', + electoralVotes: 32 + }, + VT: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + WA: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + WV: { + fillKey: 'Republican', + electoralVotes: 32 + }, + WY: { + fillKey: 'Republican', + electoralVotes: 32 + }, + CA: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + CT: { + fillKey: 'Democrat', + electoralVotes: 32 + }, + AK: { + fillKey: 'Republican', + electoralVotes: 32 + }, + AR: { + fillKey: 'Republican', + electoralVotes: 32 + }, + AL: { + fillKey: 'Republican', + electoralVotes: 32 + } + }} + labels + /> + + ); + } + +} diff --git a/examples/zoom-example.jsx b/examples/zoom-example.jsx new file mode 100644 index 0000000..06e65d2 --- /dev/null +++ b/examples/zoom-example.jsx @@ -0,0 +1,95 @@ +/* global d3 */ + +import React from 'react'; + +import Datamap from '../src'; +import Example from './example'; + +const colors = d3.scale.category10(); + +export default class ZoomExample extends React.Component { + + setProjection(element) { + const projection = d3.geo.equirectangular() + .center([23, -3]) + .rotate([4.4, 0]) + .scale(400) + .translate([element.offsetWidth / 2, element.offsetHeight / 2]); + const path = d3.geo.path() + .projection(projection); + + return { path, projection }; + } + + render() { + return ( + + + `
Bubble for ${data.name}` + }} + /> + + ); + } + +}