diff --git a/src/demos/add-charts/style.js b/src/demos/add-charts/style.js index 3a9abc65..0ac0f83f 100644 --- a/src/demos/add-charts/style.js +++ b/src/demos/add-charts/style.js @@ -26,8 +26,7 @@ export const layerControl = { export const charts = { background: 'white', - borderRadius: 3, - boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', + border: '1px solid #C0C0C0', fontFamily: 'ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif !important', fontSize: '12px', lineHeight: 1.833, diff --git a/src/demos/introducing-interaction/style.js b/src/demos/introducing-interaction/style.js index 3a9abc65..0ac0f83f 100644 --- a/src/demos/introducing-interaction/style.js +++ b/src/demos/introducing-interaction/style.js @@ -26,8 +26,7 @@ export const layerControl = { export const charts = { background: 'white', - borderRadius: 3, - boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', + border: '1px solid #C0C0C0', fontFamily: 'ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif !important', fontSize: '12px', lineHeight: 1.833, diff --git a/src/demos/linking-it-all/style.js b/src/demos/linking-it-all/style.js index 3a9abc65..0ac0f83f 100644 --- a/src/demos/linking-it-all/style.js +++ b/src/demos/linking-it-all/style.js @@ -26,8 +26,7 @@ export const layerControl = { export const charts = { background: 'white', - borderRadius: 3, - boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)', + border: '1px solid #C0C0C0', fontFamily: 'ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif !important', fontSize: '12px', lineHeight: 1.833, diff --git a/src/docs/deckgl/hexagon-overlay.md b/src/docs/deckgl/hexagon-overlay.md index 6acfac51..698fe220 100644 --- a/src/docs/deckgl/hexagon-overlay.md +++ b/src/docs/deckgl/hexagon-overlay.md @@ -1,5 +1,10 @@ + + # Add a Hexagon Overlay with Deck.GL [View code](https://github.com/uber-common/vis-tutorial/tree/master/demos/hexagon-overlay) @@ -108,7 +113,15 @@ export default class DeckGLOverlay extends Component { } ``` -With this, your `deckgl-overlay.js` should be ready to render a functional `HexagonLayer`. +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) + + Let's go over some properties of the `HexagonLayer`: diff --git a/src/docs/deckgl/scatterplot-overlay.md b/src/docs/deckgl/scatterplot-overlay.md index d5eb8af8..2064dbf2 100644 --- a/src/docs/deckgl/scatterplot-overlay.md +++ b/src/docs/deckgl/scatterplot-overlay.md @@ -1,9 +1,11 @@ -# Add a Scatterplot Overlay with Deck.GL + -**NOTE** This step follows from the completed code of the previous section, -[Starting With A Map](https://uber-common.github.io/vis-tutorial/#/react-map/starting-with-map). +# Add a Scatterplot Overlay with Deck.GL As cool as having a map is, an empty map is not that useful. Let's see if we can add a `Scatterplot` overlay with the Taxi data set to the map we created in the previous example. @@ -177,6 +179,21 @@ export default class App extends Component { With this, you should have a working `deck.gl` overlay that displays the taxi data as a scatterplot overlay. + + + + + +## 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). + ## 4. Adding Polish If you check out the source code for this step, you'll see extra code that add @@ -185,8 +202,9 @@ loading spinner. The control for the settings panel is already provided in your starting code. It's a typical React component, so there's no use going through the details in this tutorial. +## 5. code of app.js -Here's the complete app.js file including the control panel: +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: ```js /* global window */ diff --git a/src/docs/react-vis/basic.md b/src/docs/react-vis/basic.md index b561882a..46b33547 100644 --- a/src/docs/react-vis/basic.md +++ b/src/docs/react-vis/basic.md @@ -1,5 +1,9 @@ + + # Adding Charts with React-Vis [React-Vis](http://uber.github.io/react-vis) is the Uber library for rendering charts with React. @@ -11,7 +15,6 @@ In React Vis, creating a chart has a nice React-y feeling of assembling componen We're going to need extra data for the charts. in your app.js file, change your _processData method by this one: - ```js _processData() { if (taxiData) { @@ -216,9 +219,23 @@ 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). -## 3. Fine tune our chart + + + -**For the rest of the tutorial, you can now jump to the next section.** +## Optional section + +Feel free to skip to [lesson 5](https://uber-common.github.io/vis-tutorial/#/documentation/5-interactions) + +## 3. Fine tune our chart The rest of this document will guide you through further fine-tuning improvements we can do to our chart, as the difference between a good chart and a great chart lie in the details. @@ -296,6 +313,8 @@ 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). +Here's a link to the [complete code of this step](https://github.com/uber-common/vis-tutorial/tree/master/src/demos/add-charts) + Final charts.js code: ```js diff --git a/src/docs/react-vis/interactions.md b/src/docs/react-vis/interactions.md index 89f95622..2bf2c852 100644 --- a/src/docs/react-vis/interactions.md +++ b/src/docs/react-vis/interactions.md @@ -1,5 +1,9 @@ + + # Introducing interaction ## 1. Interact with bar charts on hover @@ -143,3 +147,15 @@ And in the VerticalBarSeries component: We can change the style of the cursor to pointer by passing a style property, that's a nice way to signal that an element is clickable. If the user clicks on a bar twice, it will be unselected. + + + + + +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 diff --git a/src/docs/react-vis/linking-it-all.md b/src/docs/react-vis/linking-it-all.md index 83c9d7f2..a81ddab9 100644 --- a/src/docs/react-vis/linking-it-all.md +++ b/src/docs/react-vis/linking-it-all.md @@ -1,4 +1,7 @@ + # Linking it all @@ -67,6 +70,13 @@ const layers = [ And as you can see, interactions on the bar chart are now visible on our deck.gl part! + + +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) + # Congratulations! You've built your own interactive mapping application combining Mapbox-powered maps in react, WebGL layers and versatile charts! diff --git a/src/docs/setup.md b/src/docs/setup.md index 7f522c19..00679358 100644 --- a/src/docs/setup.md +++ b/src/docs/setup.md @@ -32,7 +32,17 @@ Note that the repository you cloned also contains all the content and code of th 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. Start Coding! +## 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. + +In each lesson, we'll highlight what we'll cover, then we'll go through the code examples - copying the examples is how we'll build the app step by step. Some parts of the lessons are skippable - you can move to the next session and still have a functional app at the end. + +Feel free to explore and experiment as you copy the code examples, you can find working code that correspond to the start of each lesson in the repository. + +We'll end each lesson with key takeaways and further reading. + +## 4. Start Coding! You can now open your text editor with the following file: diff --git a/src/docs/starting-with-map.md b/src/docs/starting-with-map.md index af7c8843..e11a55ba 100644 --- a/src/docs/starting-with-map.md +++ b/src/docs/starting-with-map.md @@ -1,5 +1,10 @@ + + # Starting With a Map [react-map-gl](https://github.com/uber/react-map-gl) is a `React` wrapper around @@ -162,9 +167,17 @@ export default class App extends Component { We leverage the `onViewportChange` callback to make sure there's only one place where viewport state is actually being updated. + + ## 6. Completed Code -Our completed component should now look like this: +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: + ```js /* global window */ import React, {Component} from 'react'; diff --git a/src/mdRoutes.js b/src/mdRoutes.js index 3ed80473..e959050b 100644 --- a/src/mdRoutes.js +++ b/src/mdRoutes.js @@ -21,65 +21,66 @@ import confusing from 'docs/guidelines/axes.md'; export default [{ name: 'Documentation', path: '/documentation', - data: [{ - name: 'Setup', - markdown: setup, - }, { - name: 'React Map Gl', - children: [{ - name: 'Starting with a Map', - markdown: startingMap, - }], - }, { - name: 'Mapping Guidelines', - children: [{ - name: 'Mapping types', - markdown: mappingSimple, + data: [ + { + name: 'Setup', + markdown: setup + }, + { + name: '1. Starting with a Map', + markdown: startingMap + }, + { + name: '2. Map data overlays - scatterplot', + markdown: deckScatterplot + }, + { + name: '3. More data overlays - hexagons', + markdown: deckHexagon + }, + { + name: '4. A basic chart', + markdown: basicCharts + }, + { + name: '5. Interacting with charts', + markdown: interactions + }, + { + name: '6. Linking if all', + markdown: linkingAll + }, + { + name: 'Data overlays gallery', + children: [{ + name: 'Mapping types', + markdown: mappingSimple, + }, { + name: 'Scatterplot', + markdown: mappingScatterplot, + }, { + name: 'Arc', + markdown: mappingArc, + }, { + name: 'Hexagon', + markdown: mappingHexagon, + }] }, { - name: 'Scatterplot', - markdown: mappingScatterplot, - }, { - name: 'Arc', - markdown: mappingArc, - }, { - name: 'Hexagon', - markdown: mappingHexagon, - }] - }, { - name: 'Deck GL', - children: [{ - name: 'Scatterplot Overlay', - markdown: deckScatterplot, - }, { - name: 'Hexagon Overlay', - markdown: deckHexagon, - }], - }, { - name: 'React Vis', - children: [{ - name: 'Basic Charts', - markdown: basicCharts, - }, { - name: 'Interactions', - markdown: interactions, - }, { - name: 'Linking It All', - markdown: linkingAll, - }], - }, { - name: 'Visualization Guidelines', - children: [{ - name: 'Do: Clear simple charts', - markdown: simpleCharts, - }, { - name: 'Do: Use hierarchy', - markdown: hierarchy, - }, { - name: 'Don\'t: Too much to see', - markdown: tooMuch, - }, { - name: 'Don\'t: Confusing axes', - markdown: confusing, - }], - }], -}] + name: 'Visualization Guidelines', + children: [{ + name: 'Do: Clear simple charts', + markdown: simpleCharts, + }, { + name: 'Do: Use hierarchy', + markdown: hierarchy, + }, { + name: 'Don\'t: Too much to see', + markdown: tooMuch, + }, { + name: 'Don\'t: Confusing axes', + markdown: confusing, + }] + } + ] +}]; + diff --git a/src/styles/_index.scss b/src/styles/_index.scss index 9cb1827d..fcef4b15 100644 --- a/src/styles/_index.scss +++ b/src/styles/_index.scss @@ -9,3 +9,63 @@ font-size: 1rem; } } + +ul.insert { + line-height: 2; + margin: 16px 0 !important; + overflow: auto; + padding: 110px 29px 46px 34px !important; + position: relative; + list-style-type: none; + + background: #F8F8F9; + border: 1px solid #C6C6C6; + color: #3A3A48; +} + +ul.insert:before { + font-size: 44px; + line-height: 52px; + font-weight: 400; + position: absolute; + top: 36px; +} + +.learning-objectives:before { + content: 'Learning Objectives'; +} + +.takeaways:before { + content: 'Takeaways'; +} + +.further-readings { + background-color: #FDFFDF; + color: #333; +} + +.further-readings:before { + content: 'To go further'; +} + +.demo:hover { + height: 35vh !important; +} + +.markdown-body { + h1, h2, h3 { + font-weight: 400 !important; + } + h1 { + font-size: 36px !important; + line-height: 48px !important; + } + h2 { + font-size: 28px !important; + line-height: 36px !important; + } + h3 { + font-size: 24px !important; + line-height: 32px !important; + } +} \ No newline at end of file