Add dynamic resource fetching.

demo/make-request.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import 'whatwg-fetch';
+
+const cache = [];
+
+const WAITING = 'WAITING';
+const DONE = 'DONE';
+const ERROR = 'ERROR';
+
+export default function makeRequest(dataSource, Component) {
+  return React.createClass({
+    getInitialState() {
+      const status = cache[dataSource] ? DONE : WAITING;
+      return {status};
+    },
+
+    componentDidMount() {
+      if (!cache[dataSource]) {
+        fetch(dataSource)
+          .then(response => response.json())
+          .then(data => {
+            cache[dataSource] = data;
+            this.setState({ status: DONE });
+          })
+          .catch(e => { this.setState({ status: ERROR }); });
+      }
+    },
+
+    render: function() {
+      const {status} = this.state;
+      return status === DONE
+        ? <Component data={cache[dataSource]} />
+        : status === WAITING
+          ? <div style={{backgroundColor: 'green'}}>WAITING</div>
+          : <div style={{backgroundColor: 'red'}}>ERROR</div>;
+    }
+  });
+}

demo/now.js

@@ -3,7 +3,9 @@ import {geoAzimuthalEquidistant, geoPath, geoGraticule} from 'd3-geo';
 import {utcDay} from 'd3-time';
 import topojson from 'topojson';
 
-import world from '../data/world-50m.json';
+import makeRequest from './make-request';
+
+// import world from '../data/world-50m.json';
 
 const width = 960;
 const height = 960;
@@ -20,7 +22,7 @@ const path = geoPath()
 
 const graticule = geoGraticule();
 
-export default function World() {
+export default makeRequest('data/world-50m.json', function World({data: world}) {
   const now = new Date();
   const today = utcDay(now);
   const translate1 = `translate(${width / 2}, ${height / 2})`;
@@ -55,4 +57,4 @@ export default function World() {
       </g>
     </svg>
   );
-}
+});

demo/population-chloropleth.js

@@ -5,7 +5,9 @@ import {interpolateHcl} from 'd3-interpolate';
 import {geoPath} from 'd3-geo';
 import topojson from 'topojson';
 
-import us from '../data/us-albers.json';
+import makeRequest from './make-request';
+
+// import us from '../data/us-albers.json';
 
 const width = 960;
 const height = 500;
@@ -17,16 +19,16 @@ const color = scaleLog()
 const path = geoPath()
   .projection(null);
 
-const counties = topojson.feature(us, us.objects.counties).features;
+export default makeRequest('data/us-albers.json', function Population({data: us}) {
+  const counties = topojson.feature(us, us.objects.counties).features;
 
-const densities = counties
-  // TODO(joel): make this not side effect
-  .map(d => { return d.properties.density = d.properties.pop / path.area(d); })
-  .sort((a, b) => a - b);
+  const densities = counties
+    // TODO(joel): make this not side effect
+    .map(d => { return d.properties.density = d.properties.pop / path.area(d); })
+    .sort((a, b) => a - b);
 
-color.domain([quantile(densities, .01), quantile(densities, .99)]);
+  color.domain([quantile(densities, .01), quantile(densities, .99)]);
 
-export default function Population() {
   const paths = counties.map(county => (
     <path
       key={county.id}
@@ -42,4 +44,4 @@ export default function Population() {
       </g>
     </svg>
   );
-}
+});

demo/tile-bounding-box.js

@@ -5,7 +5,7 @@ import {geoMercator, geoPath} from 'd3-geo';
 import {tile} from 'd3-tile';
 import topojson from 'topojson';
 
-import us from '../data/us.json';
+import makeRequest from './make-request';
 
 const pi = Math.PI;
 const tau = 2 * pi;
@@ -39,11 +39,11 @@ const tiles = tile()
   .translate([tx, ty])
   ();
 
-const states = topojson.feature(us, us.objects.states).features;
-
 const path = geoPath().projection(projection);
 
-export default function TileMap() {
+export default makeRequest('data/us.json', function TileMap({data: us}) {
+  const states = topojson.feature(us, us.objects.states).features;
+
   const imgs = tiles.map(tile => {
     const style = {
       position: 'absolute',
@@ -84,4 +84,4 @@ export default function TileMap() {
       </svg>
     </div>
   );
-}
+});

index.js

@@ -45,8 +45,6 @@ class Page extends React.Component {
           selectedValue={this.state.selected}
           onChange={this.handleChange}
         >
-          <label><Radio value="BarChart" />bar chart</label>
-          <label><Radio value="DynamicBarChart" />dynamic bar chart</label>
           <label><Radio value="DynamicHexbin" />dynamic hexbin</label>
           <label><Radio value="PopulationChloropleth" />population chloropleth</label>
           <label><Radio value="TileBoundingBox" />tile bounding box</label>

package.json

@@ -24,6 +24,7 @@
     "d3-tile": "0.0.3",
     "d3-time": "^1.0.0",
     "d3-voronoi": "^1.0.0",
+    "fetch": "^1.1.0",
     "immutable": "^3.7.6",
     "markdown-it": "^7.0.0",
     "markdown-it-highlightjs": "^2.0.0",