diff --git a/src/components/Hero.js b/src/components/Hero.js index 4fce91ad..e6ab7aeb 100644 --- a/src/components/Hero.js +++ b/src/components/Hero.js @@ -1,5 +1,5 @@ import React from 'react'; -import App from '../demos/linking-it-all/app.js'; +import App from '../demos/building-a-geospatial-app/6-linking-it-all/app.js'; function Hero() { return (
({hour: d.hour, x: d.hour + 0.5, y: d.dropoffs})); const pickups = data.map(d => ({hour: d.hour, x: d.hour + 0.5, y: d.pickups})); -export function BarChartBasic() { +export function GeospatialAppBarChartBasic() { return (
@@ -55,7 +55,7 @@ export function BarChartBasic() {
); } -export function BarChartMargins() { +export function GeospatialAppBarChartMargins() { return (
); } -export function BarChartXDomain() { +export function GeospatialAppBarChartXDomain() { return (
); } -export function BarChartFormattedAxis() { +export function GeospatialAppBarChartFormattedAxis() { return (
); } -export function BarChartYDomain() { +export function GeospatialAppBarChartYDomain() { return (
); } -export function BarChartCustomColor() { +export function GeospatialAppBarChartCustomColor() { return (
); } -export function BasicLineChart() { +export function GeospatialAppBasicLineChart() { return (
); } -export class HoverInteraction extends Component { +export class GeospatialAppHoverInteraction extends Component { constructor() { super(); this.state = {highlightedHour: null}; diff --git a/src/demos/add-charts/index.html b/src/demos/building-a-geospatial-app/4-basic-charts/index.html similarity index 100% rename from src/demos/add-charts/index.html rename to src/demos/building-a-geospatial-app/4-basic-charts/index.html diff --git a/src/demos/introducing-interaction/layer-controls.js b/src/demos/building-a-geospatial-app/4-basic-charts/layer-controls.js similarity index 100% rename from src/demos/introducing-interaction/layer-controls.js rename to src/demos/building-a-geospatial-app/4-basic-charts/layer-controls.js diff --git a/src/demos/introducing-interaction/package.json b/src/demos/building-a-geospatial-app/4-basic-charts/package.json similarity index 100% rename from src/demos/introducing-interaction/package.json rename to src/demos/building-a-geospatial-app/4-basic-charts/package.json diff --git a/src/demos/linking-it-all/root.js b/src/demos/building-a-geospatial-app/4-basic-charts/root.js similarity index 100% rename from src/demos/linking-it-all/root.js rename to src/demos/building-a-geospatial-app/4-basic-charts/root.js diff --git a/src/demos/add-charts/spinner.js b/src/demos/building-a-geospatial-app/4-basic-charts/spinner.js similarity index 100% rename from src/demos/add-charts/spinner.js rename to src/demos/building-a-geospatial-app/4-basic-charts/spinner.js diff --git a/src/demos/add-charts/style.js b/src/demos/building-a-geospatial-app/4-basic-charts/style.js similarity index 100% rename from src/demos/add-charts/style.js rename to src/demos/building-a-geospatial-app/4-basic-charts/style.js diff --git a/src/demos/add-charts/webpack.config.js b/src/demos/building-a-geospatial-app/4-basic-charts/webpack.config.js similarity index 100% rename from src/demos/add-charts/webpack.config.js rename to src/demos/building-a-geospatial-app/4-basic-charts/webpack.config.js diff --git a/src/demos/scatterplot-overlay/README.md b/src/demos/building-a-geospatial-app/5-interaction/README.md similarity index 100% rename from src/demos/scatterplot-overlay/README.md rename to src/demos/building-a-geospatial-app/5-interaction/README.md diff --git a/src/demos/introducing-interaction/app.js b/src/demos/building-a-geospatial-app/5-interaction/app.js similarity index 100% rename from src/demos/introducing-interaction/app.js rename to src/demos/building-a-geospatial-app/5-interaction/app.js diff --git a/src/demos/introducing-interaction/charts.js b/src/demos/building-a-geospatial-app/5-interaction/charts.js similarity index 100% rename from src/demos/introducing-interaction/charts.js rename to src/demos/building-a-geospatial-app/5-interaction/charts.js diff --git a/src/demos/introducing-interaction/deckgl-overlay.js b/src/demos/building-a-geospatial-app/5-interaction/deckgl-overlay.js similarity index 100% rename from src/demos/introducing-interaction/deckgl-overlay.js rename to src/demos/building-a-geospatial-app/5-interaction/deckgl-overlay.js diff --git a/src/demos/introducing-interaction/index.html b/src/demos/building-a-geospatial-app/5-interaction/index.html similarity index 100% rename from src/demos/introducing-interaction/index.html rename to src/demos/building-a-geospatial-app/5-interaction/index.html diff --git a/src/demos/linking-it-all/layer-controls.js b/src/demos/building-a-geospatial-app/5-interaction/layer-controls.js similarity index 100% rename from src/demos/linking-it-all/layer-controls.js rename to src/demos/building-a-geospatial-app/5-interaction/layer-controls.js diff --git a/src/demos/linking-it-all/package.json b/src/demos/building-a-geospatial-app/5-interaction/package.json similarity index 100% rename from src/demos/linking-it-all/package.json rename to src/demos/building-a-geospatial-app/5-interaction/package.json diff --git a/src/demos/scatterplot-overlay/root.js b/src/demos/building-a-geospatial-app/5-interaction/root.js similarity index 100% rename from src/demos/scatterplot-overlay/root.js rename to src/demos/building-a-geospatial-app/5-interaction/root.js diff --git a/src/demos/introducing-interaction/spinner.js b/src/demos/building-a-geospatial-app/5-interaction/spinner.js similarity index 100% rename from src/demos/introducing-interaction/spinner.js rename to src/demos/building-a-geospatial-app/5-interaction/spinner.js diff --git a/src/demos/introducing-interaction/style.js b/src/demos/building-a-geospatial-app/5-interaction/style.js similarity index 100% rename from src/demos/introducing-interaction/style.js rename to src/demos/building-a-geospatial-app/5-interaction/style.js diff --git a/src/demos/introducing-interaction/webpack.config.js b/src/demos/building-a-geospatial-app/5-interaction/webpack.config.js similarity index 100% rename from src/demos/introducing-interaction/webpack.config.js rename to src/demos/building-a-geospatial-app/5-interaction/webpack.config.js diff --git a/src/demos/starting-code/README.md b/src/demos/building-a-geospatial-app/6-linking-it-all/README.md similarity index 100% rename from src/demos/starting-code/README.md rename to src/demos/building-a-geospatial-app/6-linking-it-all/README.md diff --git a/src/demos/linking-it-all/app.js b/src/demos/building-a-geospatial-app/6-linking-it-all/app.js similarity index 100% rename from src/demos/linking-it-all/app.js rename to src/demos/building-a-geospatial-app/6-linking-it-all/app.js diff --git a/src/demos/linking-it-all/charts.js b/src/demos/building-a-geospatial-app/6-linking-it-all/charts.js similarity index 100% rename from src/demos/linking-it-all/charts.js rename to src/demos/building-a-geospatial-app/6-linking-it-all/charts.js diff --git a/src/demos/linking-it-all/deckgl-overlay.js b/src/demos/building-a-geospatial-app/6-linking-it-all/deckgl-overlay.js similarity index 100% rename from src/demos/linking-it-all/deckgl-overlay.js rename to src/demos/building-a-geospatial-app/6-linking-it-all/deckgl-overlay.js diff --git a/src/demos/linking-it-all/index.html b/src/demos/building-a-geospatial-app/6-linking-it-all/index.html similarity index 100% rename from src/demos/linking-it-all/index.html rename to src/demos/building-a-geospatial-app/6-linking-it-all/index.html diff --git a/src/demos/scatterplot-overlay/layer-controls.js b/src/demos/building-a-geospatial-app/6-linking-it-all/layer-controls.js similarity index 100% rename from src/demos/scatterplot-overlay/layer-controls.js rename to src/demos/building-a-geospatial-app/6-linking-it-all/layer-controls.js diff --git a/src/demos/scatterplot-overlay/package.json b/src/demos/building-a-geospatial-app/6-linking-it-all/package.json similarity index 100% rename from src/demos/scatterplot-overlay/package.json rename to src/demos/building-a-geospatial-app/6-linking-it-all/package.json diff --git a/src/demos/starting-with-map/root.js b/src/demos/building-a-geospatial-app/6-linking-it-all/root.js similarity index 100% rename from src/demos/starting-with-map/root.js rename to src/demos/building-a-geospatial-app/6-linking-it-all/root.js diff --git a/src/demos/linking-it-all/spinner.js b/src/demos/building-a-geospatial-app/6-linking-it-all/spinner.js similarity index 100% rename from src/demos/linking-it-all/spinner.js rename to src/demos/building-a-geospatial-app/6-linking-it-all/spinner.js diff --git a/src/demos/linking-it-all/style.js b/src/demos/building-a-geospatial-app/6-linking-it-all/style.js similarity index 100% rename from src/demos/linking-it-all/style.js rename to src/demos/building-a-geospatial-app/6-linking-it-all/style.js diff --git a/src/demos/linking-it-all/webpack.config.js b/src/demos/building-a-geospatial-app/6-linking-it-all/webpack.config.js similarity index 100% rename from src/demos/linking-it-all/webpack.config.js rename to src/demos/building-a-geospatial-app/6-linking-it-all/webpack.config.js diff --git a/src/demos/data/taxi.js b/src/demos/building-a-geospatial-app/data/taxi.js similarity index 100% rename from src/demos/data/taxi.js rename to src/demos/building-a-geospatial-app/data/taxi.js diff --git a/src/demos/guidelines/index.js b/src/demos/building-a-geospatial-app/guidelines/index.js similarity index 99% rename from src/demos/guidelines/index.js rename to src/demos/building-a-geospatial-app/guidelines/index.js index 5b4d19b2..2b953883 100644 --- a/src/demos/guidelines/index.js +++ b/src/demos/building-a-geospatial-app/guidelines/index.js @@ -47,7 +47,7 @@ const unemployment = [{"area":"Alabama","values":[{"x":1167609600000,"y":3.9},{" const coords = {"Alaska":{"code":"AK","x":0,"y":0},"Maine":{"code":"ME","x":11,"y":0},"Vermont":{"code":"VT","x":10,"y":1},"N. Hampshire":{"code":"NH","x":11,"y":1},"Washington":{"code":"WA","x":1,"y":2},"Idaho":{"code":"ID","x":2,"y":2},"Montana":{"code":"MT","x":3,"y":2},"North Dakota":{"code":"ND","x":4,"y":2},"Minnesota":{"code":"MN","x":5,"y":2},"Illinois":{"code":"IL","x":6,"y":2},"Wisconsin":{"code":"WI","x":7,"y":2},"Michigan":{"code":"MI","x":8,"y":2},"New York":{"code":"NY","x":9,"y":2},"Rhode Island":{"code":"RI","x":10,"y":2},"Massachusetts":{"code":"MA","x":11,"y":2},"Oregon":{"code":"OR","x":1,"y":3},"Nevada":{"code":"NV","x":2,"y":3},"Wyoming":{"code":"WY","x":3,"y":3},"South Dakota":{"code":"SD","x":4,"y":3},"Iowa":{"code":"IA","x":5,"y":3},"Indiana":{"code":"IN","x":6,"y":3},"Ohio":{"code":"OH","x":7,"y":3},"Pennsylvania":{"code":"PA","x":8,"y":3},"New Jersey":{"code":"NJ","x":9,"y":3},"Connecticut":{"code":"CT","x":10,"y":3},"California":{"code":"CA","x":1,"y":4},"Utah":{"code":"UT","x":2,"y":4},"Colorado":{"code":"CO","x":3,"y":4},"Nebraska":{"code":"NE","x":4,"y":4},"Missouri":{"code":"MO","x":5,"y":4},"Kentucky":{"code":"KY","x":6,"y":4},"West Virginia":{"code":"WV","x":7,"y":4},"Virginia":{"code":"VA","x":8,"y":4},"Maryland":{"code":"MD","x":9,"y":4},"Delaware":{"code":"DE","x":10,"y":4},"Arizona":{"code":"AZ","x":2,"y":5},"New Mexico":{"code":"NM","x":3,"y":5},"Kansas":{"code":"KS","x":4,"y":5},"Arkansas":{"code":"AR","x":5,"y":5},"Tennessee":{"code":"TN","x":6,"y":5},"North Carolina":{"code":"NC","x":7,"y":5},"South Carolina":{"code":"SC","x":8,"y":5},"D. of Columbia":{"code":"DC","x":9,"y":5},"Oklahoma":{"code":"OK","x":4,"y":6},"Louisiana":{"code":"LA","x":5,"y":6},"Mississippi":{"code":"MS","x":6,"y":6},"Alabama":{"code":"AL","x":7,"y":6},"Georgia":{"code":"GA","x":8,"y":6},"Hawaii":{"code":"HI","x":0,"y":7},"Texas":{"code":"TX","x":4,"y":7},"Florida":{"code":"FL","x":9,"y":7},"Puerto Rico":{"code":"PR","x":11,"y":7}}; -export function DontSimpleChart() { +export function GeospatialAppDontSimpleChart() { return (
({x: d.hour, y: d.pickups}))} /> @@ -55,7 +55,7 @@ export function DontSimpleChart() {
); } -export function LessSimpleChart() { +export function GeospatialAppLessSimpleChart() { return (
); } -export function ChartWithContext() { +export function GeospatialAppChartWithContext() { return (

Distribution of pickups over time

As a percentage of all trips that day

@@ -178,7 +178,7 @@ function MediumChart({variable, label, index = null, onNearestX, onMouseLeave})
); } -export function SameFourCharts() { +export function GeospatialAppSameFourCharts() { return (
{[ {variable: 'total', label: 'Revenue per hour'}, @@ -189,7 +189,7 @@ export function SameFourCharts() {
); } -export function HasHierarchy() { +export function GeospatialAppHasHierarchy() { return (
@@ -230,7 +230,7 @@ export class HasHierarchyInteractive extends Component { } } -export function DontDualAxes() { +export function GeospatialAppDontDualAxes() { const yMaxTotal = Math.max(...data.map(d => d.total)); const yMaxPerTrip = Math.max(...data.map(d => d.total / d.dropoffs)); @@ -255,7 +255,7 @@ export function DontDualAxes() {
) } -export function DoTwoCharts() { +export function GeospatialAppDoTwoCharts() { const yMaxTotal = Math.max(...data.map(d => d.total)); return (

Revenue per hour

@@ -286,7 +286,7 @@ export function DoTwoCharts() {
); } -export class TwoCharts extends Component { +export class GeospatialAppTwoCharts extends Component { constructor(props) { super(props); this.state={index: -1}; @@ -370,7 +370,7 @@ export class TwoCharts extends Component { } } -export function TooMuch() { +export function GeospatialAppTooMuch() { const years = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017]; return (

Unemployment Rates by Territory

@@ -385,7 +385,7 @@ export function TooMuch() {
); } -export function NotTooMuch() { +export function GeospatialAppNotTooMuch() { const years = [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017]; const colors = { Michigan: '#19CDD7', @@ -424,7 +424,7 @@ export function NotTooMuch() {
); } -export function SmallMultiples() { +export function GeospatialAppSmallMultiples() { return (

Unemployment Rates by Territory

2007-2017, seasonally adjusted

@@ -447,7 +447,7 @@ export function SmallMultiples() {
); } -export function SmallMultiplesMap() { +export function GeospatialAppSmallMultiplesMap() { return (

Unemployment Rates by Territory

2007-2017, seasonally adjusted

diff --git a/src/demos/starting-with-map/README.md b/src/demos/building-a-geospatial-app/starting-code/README.md similarity index 100% rename from src/demos/starting-with-map/README.md rename to src/demos/building-a-geospatial-app/starting-code/README.md diff --git a/src/demos/starting-code/app.js b/src/demos/building-a-geospatial-app/starting-code/app.js similarity index 100% rename from src/demos/starting-code/app.js rename to src/demos/building-a-geospatial-app/starting-code/app.js diff --git a/src/demos/building-a-geospatial-app/starting-code/deckgl-overlay.js b/src/demos/building-a-geospatial-app/starting-code/deckgl-overlay.js new file mode 100644 index 00000000..e050ae4f --- /dev/null +++ b/src/demos/building-a-geospatial-app/starting-code/deckgl-overlay.js @@ -0,0 +1,70 @@ +import React, {Component} from 'react'; +import DeckGL, {ScatterplotLayer, HexagonLayer} from 'deck.gl'; + +const PICKUP_COLOR = [0, 128, 255]; +const DROPOFF_COLOR = [255, 0, 128]; + +const HEATMAP_COLORS = [ + [213, 62, 79], + [252, 141, 89], + [254, 224, 139], + [230, 245, 152], + [153, 213, 148], + [50, 136, 189] +].reverse(); + +const LIGHT_SETTINGS = { + lightsPosition: [-73.8, 40.5, 8000, -74.2, 40.9, 8000], + ambientRatio: 0.4, + diffuseRatio: 0.6, + specularRatio: 0.2, + lightsStrength: [0.8, 0.0, 0.8, 0.0], + numberOfLights: 2 +}; + +const elevationRange = [0, 1000]; + +export default class DeckGLOverlay extends Component { + _initialize(gl) { + gl.enable(gl.DEPTH_TEST); + gl.depthFunc(gl.LEQUAL); + } + + render() { + if (!this.props.data) { + return null; + } + + const layers = [ + !this.props.showHexagon ? new ScatterplotLayer({ + id: 'scatterplot', + getPosition: d => d.position, + getColor: d => d.pickup ? PICKUP_COLOR : DROPOFF_COLOR, + getRadius: d => 1, + opacity: 0.5, + pickable: true, + radiusMinPixels: 0.25, + radiusMaxPixels: 30, + ...this.props + }) : null, + this.props.showHexagon ? new HexagonLayer({ + id: 'heatmap', + colorRange: HEATMAP_COLORS, + elevationRange, + elevationScale: 10, + extruded: true, + getPosition: d => d.position, + lightSettings: LIGHT_SETTINGS, + opacity: 1, + pickable: true, + ...this.props + }) : null + ]; + + return (); + } +} \ No newline at end of file diff --git a/src/demos/starting-code/index.html b/src/demos/building-a-geospatial-app/starting-code/index.html similarity index 100% rename from src/demos/starting-code/index.html rename to src/demos/building-a-geospatial-app/starting-code/index.html diff --git a/src/demos/starting-code/layer-controls.js b/src/demos/building-a-geospatial-app/starting-code/layer-controls.js similarity index 100% rename from src/demos/starting-code/layer-controls.js rename to src/demos/building-a-geospatial-app/starting-code/layer-controls.js diff --git a/src/demos/starting-with-map/package.json b/src/demos/building-a-geospatial-app/starting-code/package.json similarity index 100% rename from src/demos/starting-with-map/package.json rename to src/demos/building-a-geospatial-app/starting-code/package.json diff --git a/src/demos/starting-code/root.js b/src/demos/building-a-geospatial-app/starting-code/root.js similarity index 100% rename from src/demos/starting-code/root.js rename to src/demos/building-a-geospatial-app/starting-code/root.js diff --git a/src/demos/starting-code/spinner.js b/src/demos/building-a-geospatial-app/starting-code/spinner.js similarity index 100% rename from src/demos/starting-code/spinner.js rename to src/demos/building-a-geospatial-app/starting-code/spinner.js diff --git a/src/demos/starting-code/style.js b/src/demos/building-a-geospatial-app/starting-code/style.js similarity index 100% rename from src/demos/starting-code/style.js rename to src/demos/building-a-geospatial-app/starting-code/style.js diff --git a/src/demos/starting-code/webpack.config.js b/src/demos/building-a-geospatial-app/starting-code/webpack.config.js similarity index 100% rename from src/demos/starting-code/webpack.config.js rename to src/demos/building-a-geospatial-app/starting-code/webpack.config.js diff --git a/src/demos/starting-code/yarn.lock b/src/demos/building-a-geospatial-app/starting-code/yarn.lock similarity index 100% rename from src/demos/starting-code/yarn.lock rename to src/demos/building-a-geospatial-app/starting-code/yarn.lock diff --git a/src/demos/index.js b/src/demos/index.js index d27e68b9..9be19b50 100644 --- a/src/demos/index.js +++ b/src/demos/index.js @@ -1,25 +1,25 @@ -import StartingWithMap from './starting-with-map/app'; -import ScatterplotOverlay from './scatterplot-overlay/app'; -import HexagonOverlay from './hexagon-overlay/app'; -import AddCharts from './add-charts/app'; -import StartingCode from './starting-code/app'; -import IntroducingInteraction from './introducing-interaction/app'; -import LinkingItAll from './linking-it-all/app'; +// building a geospatial app +import GeospatialAppStartingWithMap from './building-a-geospatial-app/1-starting-with-map/app'; +import GeospatialAppScatterplotOverlay from './building-a-geospatial-app/2-scatterplot-overlay/app'; +import GeospatialAppHexagonOverlay from './building-a-geospatial-app/3-hexagon-overlay/app'; +import GeospatialAppBasicCharts from './building-a-geospatial-app/4-basic-charts/app'; +import * as GeospatialAppChartExamples from './building-a-geospatial-app/4-basic-charts/examples'; -import * as guidelines from './guidelines'; -import * as charts from './charts'; +import GeospatialAppInteraction from './building-a-geospatial-app/5-interaction/app'; +import GeospatialAppLinkingItAll from './building-a-geospatial-app/6-linking-it-all/app'; + +import * as guidelines from './building-a-geospatial-app/guidelines'; export default { - StartingCode, - StartingWithMap, - ScatterplotOverlay, - HexagonOverlay, - AddCharts, - IntroducingInteraction, - LinkingItAll, + GeospatialAppStartingWithMap, + GeospatialAppScatterplotOverlay, + GeospatialAppHexagonOverlay, + GeospatialAppBasicCharts, + ...GeospatialAppChartExamples, + GeospatialAppInteraction, + GeospatialAppLinkingItAll, - ...charts, ...guidelines, } diff --git a/src/docs/setup.md b/src/docs/building-a-geospatial-app/0-setup.md similarity index 89% rename from src/docs/setup.md rename to src/docs/building-a-geospatial-app/0-setup.md index 00679358..b2cd5a34 100644 --- a/src/docs/setup.md +++ b/src/docs/building-a-geospatial-app/0-setup.md @@ -30,8 +30,6 @@ A page should automatically be opened in your browser, with a pretty simple app Note that the repository you cloned also contains all the content and code of this tutorial, and you may run it locally if you want (repeat the last two steps from above from vis-tutorial/). -In the pages of this tutorial, you can use the back quote key ` (typically located below ESC) to see the code examples in full page. - ## 3. How this tutorial works In this tutorial, you will build a full geospatial application from scratch, with maps, WebGL data overlays and interactive charts. @@ -47,9 +45,9 @@ We'll end each lesson with key takeaways and further reading. You can now open your text editor with the following file: ``` -src/demos/starting-code/app.js +src/demos/building-a-geospatial-app/starting-code/app.js ``` It's an empty component! `starting-code` will be the folder that holds all your changes as you go through the tutorial. You can now head to the next step: -[Starting With A Map](#/documentation/react-map-gl/starting-with-a-map). +[Starting With A Map](#/building-a-geospatial-app/1-starting-with-a-map). diff --git a/src/docs/starting-with-map.md b/src/docs/building-a-geospatial-app/1-starting-with-map.md similarity index 95% rename from src/docs/starting-with-map.md rename to src/docs/building-a-geospatial-app/1-starting-with-map.md index e11a55ba..1ab86692 100644 --- a/src/docs/starting-with-map.md +++ b/src/docs/building-a-geospatial-app/1-starting-with-map.md @@ -1,4 +1,4 @@ - +
  • Create a map in a React application,
    • @@ -12,13 +12,13 @@ the powerful `MapboxGL` mapping library. `react-map-gl` makes it super easy to drop a mapping component into your application. Checkout the complete code for this step -[here](https://github.com/uber-common/vis-tutorial/tree/master/demos/starting-with-map). +[here](https://github.com/uber-common/vis-academy/tree/master/demos/building-a-geospatial-app/1-starting-with-map). ## 1. Start with a bare React Component **HOLD UP!!!** If you got here without reading the **Setup** step, it is highly recommended that you do so, or your application might not work. -[GO HERE](https://uber-common.github.io/vis-tutorial/#/setup) and go through it now. +[GO HERE]((#/building-a-geospatial-app/0-setup.md) and go through it now. The app component in the starting code above currently looks like this: ```js @@ -176,7 +176,7 @@ where viewport state is actually being updated. ## 6. Completed Code -Our completed component [app.js](https://github.com/uber-common/vis-tutorial/blob/master/src/demos/starting-with-map/app.js) should now look like this: +Our completed component [app.js](https://github.com/uber-common/vis-academy/blob/master/src/demos/building-a-geospatial-app/1-starting-with-map/app.js) should now look like this: ```js /* global window */ diff --git a/src/docs/deckgl/scatterplot-overlay.md b/src/docs/building-a-geospatial-app/2-scatterplot-overlay.md similarity index 93% rename from src/docs/deckgl/scatterplot-overlay.md rename to src/docs/building-a-geospatial-app/2-scatterplot-overlay.md index 2064dbf2..ca065a42 100644 --- a/src/docs/deckgl/scatterplot-overlay.md +++ b/src/docs/building-a-geospatial-app/2-scatterplot-overlay.md @@ -1,4 +1,4 @@ - +
    • Plot data on a map
      • @@ -19,9 +19,7 @@ which we will use. ## 1. Add Taxi Data -Download the Taxi data we have in the repository -[here](https://github.com/uber-common/vis-tutorial/blob/master/demos/data/taxi.csv), -and then import the file into your `app.js` component. If you cloned our +Import the taxi data into your `app.js` component. If you cloned our tutorial repo as-is, your import statement should look like this: ```js @@ -187,12 +185,12 @@ data as a scatterplot overlay.
      • [Deck.GL](http://uber.github.io/deck.gl) and its extensive documentation
        • -
      • [Gallery of Deck.GL overlays](https://uber-common.github.io/vis-tutorial/#/documentation/data-overlays-gallery/mapping-types)
        • +
      • [Gallery of Deck.GL overlays](https://uber-common.github.io/vis-tutorial/#/data-overlays-gallery/mapping-types)
      ## Optional section -Feel free to skip to [lesson 3](https://uber-common.github.io/vis-tutorial/#/documentation/3-more-data-overlays-hexagons) or even [lesson 4](https://uber-common.github.io/vis-tutorial/#/documentation/4-a-basic-chart). +Feel free to skip to [lesson 3](https://uber-common.github.io/vis-tutorial/#/3-more-data-overlays-hexagons) or even [lesson 4](https://uber-common.github.io/vis-tutorial/#/4-a-basic-chart). ## 4. Adding Polish @@ -204,7 +202,7 @@ The control for the settings panel is already provided in your starting code. It ## 5. code of app.js -Here's the complete [app.js](https://github.com/uber-common/vis-tutorial/blob/master/src/demos/scatterplot-overlay/app.js) file including the control panel: +Here's the complete [app.js](https://github.com/uber-common/vis-academy/blob/master/src/demos/building-a-geospatial-app/2-scatterplot-overlay/app.js) file including the control panel: ```js /* global window */ diff --git a/src/docs/deckgl/hexagon-overlay.md b/src/docs/building-a-geospatial-app/3-hexagon-overlay.md similarity index 91% rename from src/docs/deckgl/hexagon-overlay.md rename to src/docs/building-a-geospatial-app/3-hexagon-overlay.md index 698fe220..059595b0 100644 --- a/src/docs/deckgl/hexagon-overlay.md +++ b/src/docs/building-a-geospatial-app/3-hexagon-overlay.md @@ -1,4 +1,4 @@ - +
      • Discover more types of Deck.GL overlays
        • @@ -6,10 +6,10 @@
      # Add a Hexagon Overlay with Deck.GL -[View code](https://github.com/uber-common/vis-tutorial/tree/master/demos/hexagon-overlay) +[View code](https://github.com/uber-common/vis-academy/tree/master/demos/building-a-geospatial-app/3-hexagon-overlay) **NOTE** This step follows from the **completed** code of the previous section, -[Scatterplot Overlay](https://uber-common.github.io/vis-tutorial/#/deck/scatterplot-overlay). +[Scatterplot Overlay](#/building-a-geospatial-app/2-scatterplot-overlay.md). `Scatterplot` can plot raw points, but to visualize distribution of these points, we need a layer that can aggregate points into a geo grid. @@ -115,7 +115,7 @@ export default class DeckGLOverlay extends Component { With this, your `deckgl-overlay.js` should be ready to render a functional `HexagonLayer`. -Here's a link to the [complete code of this step](https://github.com/uber-common/vis-tutorial/tree/master/src/demos/hexagon-overlay) +Here's a link to the [complete code of this step](https://github.com/uber-common/vis-academy/tree/master/src/demos/building-a-geospatial-app/hexagon-overlay)
      • The HexagonLayer can display aggregated, 3D hexagons
        • @@ -125,7 +125,7 @@ Here's a link to the [complete code of this step](https://github.com/uber-common Let's go over some properties of the `HexagonLayer`: -[Deck.gl documentation of Hexagon Layer](https://uber.github.io/deck.gl/#/documentation/layer-catalog/hexagon-layer) +[Deck.gl documentation of Hexagon Layer](https://uber.github.io/deck.gl/#/layer-catalog/hexagon-layer) Let's go over just some properties of the `HexagonLayer` above: diff --git a/src/docs/react-vis/basic.md b/src/docs/building-a-geospatial-app/4-basic-charts.md similarity index 91% rename from src/docs/react-vis/basic.md rename to src/docs/building-a-geospatial-app/4-basic-charts.md index 46b33547..601a950e 100644 --- a/src/docs/react-vis/basic.md +++ b/src/docs/building-a-geospatial-app/4-basic-charts.md @@ -1,4 +1,4 @@ - +
        • Create a simple chart
          • @@ -148,7 +148,7 @@ First, we are going to create a simple bar chart of pickups by hour. To do this, we are going to use the pickup variable we prepared above. This is an array of objects of the form: {x, y}. x is going to be the hour, and y is going to be the number of dropoffs we want to plot. -Then, we are going to create our barchart using the following React-Vis components: [XYPlot](http://uber.github.io/react-vis/#/documentation/api-reference/xy-plot), [XAxis](http://uber.github.io/react-vis/#/documentation/api-reference/axes), [YAxis](http://uber.github.io/react-vis/#/documentation/api-reference/axes), and [VerticalBarSeries](http://uber.github.io/react-vis/#/documentation/series-reference/bar-series). +Then, we are going to create our barchart using the following React-Vis components: [XYPlot](http://uber.github.io/react-vis/#/api-reference/xy-plot), [XAxis](http://uber.github.io/react-vis/#/api-reference/axes), [YAxis](http://uber.github.io/react-vis/#/api-reference/axes), and [VerticalBarSeries](http://uber.github.io/react-vis/#/series-reference/bar-series). In your charts.js file, update the Charts component as follows: @@ -178,7 +178,7 @@ export default function Charts({pickups}) { This code produces this output: - + In just 8 lines of React-vis code we have a bar chart with axes! @@ -215,9 +215,9 @@ We could actually pass a yDomain prop in the YAxis and the VerticalBarSeries com > ``` - + -To read more about axes in React-Vis, consult the [Axes docs](https://uber.github.io/react-vis/documentation/api-reference/axes). +To read more about axes in React-Vis, consult the [Axes docs](https://uber.github.io/react-vis/api-reference/axes).
          • With the React-Vis component __XYPlot__ you can insert charts in your application.
            • @@ -233,7 +233,7 @@ To read more about axes in React-Vis, consult the [Axes docs](https://uber.githu ## Optional section -Feel free to skip to [lesson 5](https://uber-common.github.io/vis-tutorial/#/documentation/5-interactions) +Feel free to skip to [lesson 5](#/5-interactions.md) ## 3. Fine tune our chart @@ -251,7 +251,7 @@ XYPlot has a property, margin, which defines the interior spacing. Its default v > ``` -You can read more about margins and other properties in the [XYPlot](https://uber.github.io/react-vis/documentation/api-reference/xy-plot) docs. +You can read more about margins and other properties in the [XYPlot](https://uber.github.io/react-vis/api-reference/xy-plot) docs. ### b. x-axis customization @@ -284,11 +284,11 @@ Finally, we can set *tickInnerSize* to 0 to only have ticks going from the axis /> ``` - + ### c. Color -React-Vis has many options to [style color](http://uber.github.io/react-vis/#/documentation/general-principles/colors). For now, let's just choose another blue +React-Vis has many options to [style color](http://uber.github.io/react-vis/#/general-principles/colors). For now, let's just choose another blue ```js ``` - + ### d. More than bars: lines, scatterplots... @@ -309,11 +309,11 @@ React-Vis has a many forms available for your charts. Here we're going to use Li ``` - + -To learn about various React-Vis series, checkout [their docs](https://uber.github.io/react-vis/documentation/series-reference/arc-series). +To learn about various React-Vis series, checkout [their docs](https://uber.github.io/react-vis/series-reference/arc-series). -Here's a link to the [complete code of this step](https://github.com/uber-common/vis-tutorial/tree/master/src/demos/add-charts) +Here's a link to the [complete code of this step](https://github.com/uber-common/vis-academy/tree/master/src/demos/building-a-geospatial-app/4-basic-charts) Final charts.js code: diff --git a/src/docs/react-vis/interactions.md b/src/docs/building-a-geospatial-app/5-interactions.md similarity index 93% rename from src/docs/react-vis/interactions.md rename to src/docs/building-a-geospatial-app/5-interactions.md index 2bf2c852..91fabed8 100644 --- a/src/docs/react-vis/interactions.md +++ b/src/docs/building-a-geospatial-app/5-interactions.md @@ -1,4 +1,4 @@ - +
            • Implement mouse interactions in a chart
              • @@ -8,7 +8,7 @@ ## 1. Interact with bar charts on hover -React-Vis has many methods to [handle interaction](https://uber.github.io/react-vis/documentation/general-principles/interaction). +React-Vis has many methods to [handle interaction](https://uber.github.io/react-vis/general-principles/interaction). We're already using the state of our app to store our data and interaction with the deck.gl components, so let's use it for react-vis interaction as well. In app.js, let's add a method to handle this interaction: @@ -58,7 +58,7 @@ And finally, in the VerticalBarSeries component: onValueMouseOver={d => highlight(d.hour)} /> ``` - + We are getting which hour is highlighted from the state of the parent component, and a callback method to change it. @@ -154,8 +154,8 @@ If the user clicks on a bar twice, it will be unselected.
              • - [React-Vis interaction documentation](https://uber.github.io/react-vis/documentation/general-principles/interaction) + [React-Vis interaction documentation](https://uber.github.io/react-vis/general-principles/interaction)
              -Here's a link to the [complete code of this step](https://github.com/uber-common/vis-tutorial/tree/master/src/demos/introducing-interaction) \ No newline at end of file +Here's a link to the [complete code of this step](https://github.com/uber-common/vis-academy/tree/master/src/demos/building-a-geospatial-app/5-interaction) diff --git a/src/docs/react-vis/linking-it-all.md b/src/docs/building-a-geospatial-app/6-linking-it-all.md similarity index 93% rename from src/docs/react-vis/linking-it-all.md rename to src/docs/building-a-geospatial-app/6-linking-it-all.md index a81ddab9..602d30c0 100644 --- a/src/docs/react-vis/linking-it-all.md +++ b/src/docs/building-a-geospatial-app/6-linking-it-all.md @@ -1,4 +1,4 @@ - +
              • Enable our chart to interact with our data overlays
              @@ -75,7 +75,7 @@ And as you can see, interactions on the bar chart are now visible on our deck.gl
            • There's no limit to what you can achieve!
            -Here's a link to the [complete code of this step](https://github.com/uber-common/vis-tutorial/tree/master/src/demos/linking-it-all) +Here's a link to the [complete code of this step](https://github.com/uber-common/vis-academy/tree/master/src/demos/building-a-geospatial-app/6-linking-it-all) # Congratulations! diff --git a/src/docs/guidelines/axes.md b/src/docs/building-a-geospatial-app/guidelines/axes.md similarity index 85% rename from src/docs/guidelines/axes.md rename to src/docs/building-a-geospatial-app/guidelines/axes.md index 880f85bb..fba4f621 100644 --- a/src/docs/guidelines/axes.md +++ b/src/docs/building-a-geospatial-app/guidelines/axes.md @@ -3,13 +3,13 @@ React-Vis provides flexibility with axes including the possibility to have multiple vertical and horizontal axes on a chart. Presenting several series on the same chart, expressed in different units and relying on separate axes, is almost always a bad idea though. - + There are few exceptions; however, most often, when two dissimilar series are presented on one chart, an argument is made in the name of space. With the same amount of space, it's possible to have two charts on top of each other though: - + If both charts are aligned, then it's already possible to see "how charts move together". To go further, we can use the interactive features of React-Vis to position a tooltip and a moving line: - + diff --git a/src/docs/guidelines/hierarchy.md b/src/docs/building-a-geospatial-app/guidelines/hierarchy.md similarity index 89% rename from src/docs/guidelines/hierarchy.md rename to src/docs/building-a-geospatial-app/guidelines/hierarchy.md index a512175c..d1f212b4 100644 --- a/src/docs/guidelines/hierarchy.md +++ b/src/docs/building-a-geospatial-app/guidelines/hierarchy.md @@ -2,11 +2,11 @@ When putting several charts on one screen, a very common pattern is to present everything at the same level: - + Instead, consider this arrangement: - + The information is the same and the charts display the exact same data. However, it's much more legible. In arranging these 4 charts, we chose the most important series and gave it extra prominence. @@ -18,4 +18,4 @@ We don't need to provide full detail for the secondary series. Any more informat To go further, we can add interaction that will link the charts together. If we have one overarching component, then we can expose its state to its children by passing them actions that will update that state. The values from that central state will also be passed to the children, so if the user interacts with any of the charts, that can be reflected on all of them: - + diff --git a/src/docs/guidelines/simple.md b/src/docs/building-a-geospatial-app/guidelines/simple.md similarity index 82% rename from src/docs/guidelines/simple.md rename to src/docs/building-a-geospatial-app/guidelines/simple.md index 3536bc2f..4a967dc5 100644 --- a/src/docs/guidelines/simple.md +++ b/src/docs/building-a-geospatial-app/guidelines/simple.md @@ -2,16 +2,16 @@ Data visualization gives you the power of turning a dataset into something visual, but a chart is more than a series of marks. - + The chart above is an example of that - it's correct, but doesn't provide enough information to understand what's going on. For the chart to be useful, it needs context. - + This chart starts making more sense, but it's still not clear enough for someone who doesn't know what it's about. - + This chart has a title, axes description and a source. Now it's clearer. Not all charts need this degree of detail, but something as simple as a title can dispell ambiguity and avoid misinterpretation. diff --git a/src/docs/guidelines/toomuch.md b/src/docs/building-a-geospatial-app/guidelines/toomuch.md similarity index 87% rename from src/docs/guidelines/toomuch.md rename to src/docs/building-a-geospatial-app/guidelines/toomuch.md index 1d499fe5..368b9b74 100644 --- a/src/docs/guidelines/toomuch.md +++ b/src/docs/building-a-geospatial-app/guidelines/toomuch.md @@ -6,7 +6,7 @@ For this example, we're going to represent the unemployment rates of all US stat While we could create 52 time series, that doesn't work so well. - + Our legend component is begging for mercy! It's not dimensioned for that many items. Besides, the default React-Vis palette has 20 different colors and will cycle through them unless another palette is specified. @@ -15,14 +15,14 @@ Here are a few strategies to deal with that: We could show only a few highlighted territories: - + The chart remains highly legible as long as we don't try to make our user distinguish any 2 pairs of lines. We could also use small multiples: - + Or even make it look like a map: same idea as above - we make 52 mini-charts, but this time we simply position them absolutely in accordance to the approximate geographic position of the territory: - + diff --git a/src/docs/mapping/arc.md b/src/docs/building-a-geospatial-app/mapping/arc.md similarity index 100% rename from src/docs/mapping/arc.md rename to src/docs/building-a-geospatial-app/mapping/arc.md diff --git a/src/docs/mapping/hexagon.md b/src/docs/building-a-geospatial-app/mapping/hexagon.md similarity index 100% rename from src/docs/mapping/hexagon.md rename to src/docs/building-a-geospatial-app/mapping/hexagon.md diff --git a/src/docs/mapping/scatterplot.md b/src/docs/building-a-geospatial-app/mapping/scatterplot.md similarity index 100% rename from src/docs/mapping/scatterplot.md rename to src/docs/building-a-geospatial-app/mapping/scatterplot.md diff --git a/src/docs/mapping/simple.md b/src/docs/building-a-geospatial-app/mapping/simple.md similarity index 100% rename from src/docs/mapping/simple.md rename to src/docs/building-a-geospatial-app/mapping/simple.md diff --git a/src/mdRoutes.js b/src/mdRoutes.js index e959050b..a3fd0e54 100644 --- a/src/mdRoutes.js +++ b/src/mdRoutes.js @@ -1,84 +1,100 @@ -import setup from 'docs/setup.md'; -import startingMap from 'docs/starting-with-map.md'; +// Building a geospatial app +import GeospatialAppSetup from + 'docs/building-a-geospatial-app/0-setup.md'; +import GeospatialAppStartingMap from + 'docs/building-a-geospatial-app/1-starting-with-map.md'; -import mappingSimple from 'docs/mapping/simple.md'; -import mappingScatterplot from 'docs/mapping/scatterplot.md'; -import mappingArc from 'docs/mapping/arc.md'; -import mappingHexagon from 'docs/mapping/hexagon.md'; +import GeospatialAppMappingSimple from + 'docs/building-a-geospatial-app/mapping/simple.md'; +import GeospatialAppMappingScatterplot from + 'docs//building-a-geospatial-app/mapping/scatterplot.md'; +import GeospatialAppMappingArc from + 'docs/building-a-geospatial-app/mapping/arc.md'; +import GeospatialAppMappingHexagon from + 'docs/building-a-geospatial-app/mapping/hexagon.md'; -import deckScatterplot from 'docs/deckgl/scatterplot-overlay.md'; -import deckHexagon from 'docs/deckgl/hexagon-overlay.md'; +import GeospatialAppDeckScatterplot from + 'docs/building-a-geospatial-app/2-scatterplot-overlay.md'; +import GeospatialAppDeckHexagon from + 'docs/building-a-geospatial-app/3-hexagon-overlay.md'; -import basicCharts from 'docs/react-vis/basic.md'; -import interactions from 'docs/react-vis/interactions.md'; -import linkingAll from 'docs/react-vis/linking-it-all.md'; +import GeospatialAppBasicCharts from + 'docs/building-a-geospatial-app/4-basic-charts.md'; +import GeospatialAppInteractions from + 'docs/building-a-geospatial-app/5-interactions.md'; +import GeospatialAppLinkingAll from + 'docs/building-a-geospatial-app/6-linking-it-all.md'; -import simpleCharts from 'docs/guidelines/simple.md'; -import hierarchy from 'docs/guidelines/hierarchy.md'; -import tooMuch from 'docs/guidelines/toomuch.md'; -import confusing from 'docs/guidelines/axes.md'; +import GeospatialAppSimpleCharts from + 'docs/building-a-geospatial-app/guidelines/simple.md'; +import GeospatialAppHierarchy from + 'docs/building-a-geospatial-app/guidelines/hierarchy.md'; +import GeospatialAppTooMuch from + 'docs/building-a-geospatial-app/guidelines/toomuch.md'; +import GeospatialAppConfusing from + 'docs/building-a-geospatial-app/guidelines/axes.md'; export default [{ - name: 'Documentation', - path: '/documentation', + name: 'Building a Geospatial App', + path: '/building-a-geospatial-app', data: [ { name: 'Setup', - markdown: setup + markdown: GeospatialAppSetup }, { name: '1. Starting with a Map', - markdown: startingMap + markdown: GeospatialAppStartingMap }, { name: '2. Map data overlays - scatterplot', - markdown: deckScatterplot + markdown: GeospatialAppDeckScatterplot }, { name: '3. More data overlays - hexagons', - markdown: deckHexagon + markdown: GeospatialAppDeckHexagon }, { name: '4. A basic chart', - markdown: basicCharts + markdown: GeospatialAppBasicCharts }, { name: '5. Interacting with charts', - markdown: interactions + markdown: GeospatialAppInteractions }, { name: '6. Linking if all', - markdown: linkingAll + markdown: GeospatialAppLinkingAll }, { name: 'Data overlays gallery', children: [{ name: 'Mapping types', - markdown: mappingSimple, + markdown: GeospatialAppMappingSimple, }, { name: 'Scatterplot', - markdown: mappingScatterplot, + markdown: GeospatialAppMappingScatterplot, }, { name: 'Arc', - markdown: mappingArc, + markdown: GeospatialAppMappingArc, }, { name: 'Hexagon', - markdown: mappingHexagon, + markdown: GeospatialAppMappingHexagon, }] }, { name: 'Visualization Guidelines', children: [{ name: 'Do: Clear simple charts', - markdown: simpleCharts, + markdown: GeospatialAppSimpleCharts, }, { name: 'Do: Use hierarchy', - markdown: hierarchy, + markdown: GeospatialAppHierarchy, }, { name: 'Don\'t: Too much to see', - markdown: tooMuch, + markdown: GeospatialAppTooMuch, }, { name: 'Don\'t: Confusing axes', - markdown: confusing, + markdown: GeospatialAppConfusing, }] } ]