uber-archive / vis-academy

A set of tutorials on how our frameworks make effective data visualization applications.

Vis Academy

Lessons and classes from the Uber visualization team, focusing on the visualizations frameworks that we've built:

• deck.gl - for large-scale WebGL visualizations;
• react-map-gl - React components for Mapbox GL;
• react-vis - A composable React charting library

vis-academy's Issues

3D Hex rendering 'upside down'

While the demo app at the top of More Data Overlays - Hexagon is fine, my localhost version isn't rendering correctly. The base of small hexagonal prisms are being rendered over the taller hexagonal prisms

rendering image

Is there some attribute/setting that I have to flip? Some ordering of the classification ranges?

No errors are being thrown beyond a warning:
log.js:52 luma.gl: luma.gl: datais deprecated and will be removed in a later version. Usepixels instead

Jiggling scrollbars with StaticMap

Thanks so much for these tutorials. I'm stuck on part 2 of "Building a Geospatial App."

When I follow the instructions to create a StaticMap, and then open the map in Chrome or Firefox, the horizontal and vertical scrollbars start flickering rapidly on and off. Its as if the browser can't decide whether scroll bars are necessary.

I'm using Create-React-App as the starting point for this project. I've uploaded a demo to Surge.sh:
http://meek-language.surge.sh

Here's a video capture of the problem:
https://1drv.ms/v/s!AueUV7xVm3-qrtRL_oHj0ulmmo7IpA?e=kAXmrO

To reproduce:

1. Create a new application using create-react-app. Delete everything in the /src folder except for Index.js and App.js.

2. Open Index.js and replace its contents with the following:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

3. Open App.js and replace its contents with the following (which comes from Part 2 of the tutorial):

import React, { Component } from "react";
import { StaticMap } from "react-map-gl";
import DeckGL from "deck.gl";

const API_KEY = "...";

const INITIAL_VIEW_STATE = {
  longitude: -74,
  latitude: 40.7,
  zoom: 11,
  minZoom: 5,
  maxZoom: 16,
  pitch: 0,
  bearing: 0
};

export default class App extends Component {
  render() {
    return (
      <div>
        <DeckGL
          mapboxApiAccessToken={API_KEY}
          initialViewState={INITIAL_VIEW_STATE}
          controller
        >
          <StaticMap mapboxApiAccessToken={API_KEY} />
        </DeckGL>
      </div>
    );
  }
}

4. Npm install react-map-gl and deck.gl.

5. Run "npm start."

When the browser window opens, it will flicker many times per second. The horizontal and vertical scroll bars will appear, then disappear, and then reappear, all in rapid succession. The map center keeps shifting, which causes the map to "jiggle about" rapidly inside of the browser window.

This only happens when my browser window is at certain sizes. For example, it occurs when my browser is set to one-half of my display width, but not when my browser is set to full-width.

Would anyone have any clues about why this is happening or ways to prevent it?

can't cloning

i have this message
C:\Users\hsdqkh>git clone https://github.com/uber-common/vis-academy.git
Cloning into 'vis-academy'...
fatal: unable to access 'https://github.com/uber-common/vis-academy.git/': OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443

Yarn install fails with 500

Did a fresh checkout via the instructions at "2. Cloning and Running" from this page.

yarn results in a 500 error:

$ git clone https://github.com/uber-common/vis-academy.git
$ cd vis-academy/src/demos/building-a-geospatial-app/starting-code
$ yarn
yarn install v0.27.5
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@mapbox%2fwhoots-js/-/whoots-js-3.0.0.tgz: Request failed \"500 Internal Server Error\"".
info If you think this is a bug, please open a bug report with the information provided in "/Users/xxx/vis-academy/src/demos/building-a-geospatial-app/starting-code/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

npm i finishes without issue.

$ npm -v
3.10.10
$  node -v
v6.11.2
$ yarn --version
0.27.5

Also, I added a local .npmrc file:

registry    = https://registry.npmjs.org/
always-auth = false

Geospatial App: Update Setup section

Add clarity by organizing prereq/setup by:

• Rename "setup" to "Getting Started"
• Include 2 sections: Learning Objectives and Prereqs on this page of the tutorial

Learning Objectives

Change "Break down "build a full geospatial app from scatch" into the skills you learn as you build" to be a list of skills someone will learn by the end of building the app. for example:

• Create a map
• Add map interactions: zoom, pan, resize window
• Plot data on the map
• Be aware of how to import packages
• Customize imported packages
• Enable the chart to interact with data overlays

Prereqs (or Environment Setup)

• Be familiar with basics of React like Components and state. For example, be aware of this and props and how state changes. (included 'this' and 'props' for an example - feel free to change this to make sense for other React concepts that are relevant for this tutorial)
• Get a Mapbox token
• node >= 6
• yarn or npm package manager installed
• clone this tutorial to your local machine
• Open src/demos/building-a-geospatial-app/starting-code/src/app.js and start with the folder: starting-code.

Filter-by-hour example code: Hexagons change

I am looking at the map at http://vis.academy/#/building-a-geospatial-app/6-linking-it-all and was able to replicate the issue in my local environment.

Observed behavior: After an hour is selected on the chart, moving the map with the mouse (zoom, perspective change, or drop) causes the hexagons to change position, elevation, and color. It looks like the hexagons get translated as the user moves the map vertically.

Expected behavior: The hexagons should not change when the user changes their view of the map.

I'm not sure if this is an issue with the example code or with how the overlay is matched up to the map via the viewport.

vis-academy examples do not seem to work with current version of deck.gl

Steps to reproduce:

1. git clone vis-academy
2. cd src/demos/2-scatterplot-overlay
3. run yarn
4. run yarn start
5. observe on localhost:3030 that the scatterplot example is visible
6. close web serve with cmd+C
7. in package.json, upgrade the following:

"deck.gl": "^6.1.0",
"luma.gl": "^6.0.1",
"react-vis": "^1.11.1"

these are latest versions
8. now run yarn and then yarn start

Expected
Demo should still work, and render scatterplot

Actual
Scatteprlot does not render.

Error from console:

draw-layers.js:257 Uncaught TypeError: Cannot assign to read only property 'viewport' of object '[object Object]'
    at Function.assign (<anonymous>)
    at drawLayerInViewport (draw-layers.js:257)
    at draw-layers.js:229
    at Array.forEach (<anonymous>)
    at drawLayersInViewport (draw-layers.js:201)
    at draw-layers.js:89
    at Array.forEach (<anonymous>)
    at drawLayers (draw-layers.js:83)
    at draw-layers.js:132
    at withParameters (context-state.js:182)

Problem installing npm and running it

When I try to install npm i get all these errors

npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm ERR! Unexpected end of JSON input while parsing near '...mi47eBseEM9jHbyD9\nhp'

npm ERR! A complete log of this run can be found in:
npm ERR! C:**\AppData\Roaming\npm-cache_logs\2020-06-22T08_05_45_748Z-debug.log

and when I want to run it a get all of these

[email protected] start C:\Users\genesisbell\vis-academy\src\demos\building-a-geospatial-app\starting-code
webpack-dev-server --config ./webpack.config.js --mode development

'webpack-dev-server' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: webpack-dev-server --config ./webpack.config.js --mode development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! C:**\AppData\Roaming\npm-cache_logs\2020-06-22T08_02_50_642Z-debug.log

Named modules, Diffing + legacy code

I just finished the first tutorial, amazing stuff! Been waiting for doing something like this but never found a good place to start, now I have it. Thanks for coming up with this academy!

I want to leave some feedback after finishing it:

• webpack plugin for named modules on HMR, this would help apprentices to debug quickier
• It would be great to see changes easier, this is called Diff Highlighting, after investigating a bit how it could be done, I found 2 ways:

1. This project is using Ocular, that also uses PrismJS, this is an example that hooks on Prism to add CSS classes to lines that you want to diff: https://github.com/survivejs-sites/survivejs-es/blob/master/utils/highlight.js
2. Ocular is using marked (good decision!), this is an example using Marked renderer.code hook: https://gist.github.com/choxi/6fa98f7b203bf2dfdcfa (source highlightjs/highlight.js#480)

• In https://uber-common.github.io/vis-academy/#/building-a-geospatial-app/4-a-basic-chart, a component called Spinner is used but never imported
• In the same page an object called hoveredObject is used in render, but never declared, same with a function called _onHover
• In the same page it says: "This code produces this output:", but there is no example

I could contribute to some of those changes if you agree with them :)

Step by step code snippets differ from Github repo (Building a Graph Vis)

On many places the step by step code snippers differ from Github repo. Example:

In tutorial

  onHoverNode = pickedObj => {
    // 1. check if is hovering on a node
    const hoveredNodeID = pickedObj.object && pickedObj.object.id;
    const graph = new Graph(this.state.graph);
    if (hoveredNodeID) {
      // 2. highlight the selected node and connected edges
      const connectedEdgeIDs =
        this.state.graph.findConnectedEdges(hoveredNodeID).map(e => e.id);
      graph.nodes.forEach(n => n.isHighlighted = n.id === hoveredNodeID);
      graph.edges.forEach(e => e.isHighlighted = connectedEdgeIDs.includes(e.id));
    } else {
      // 3. unset all nodes and edges
      graph.nodes.forEach(n => n.isHighlighted = false);
      graph.edges.forEach(e => e.isHighlighted = false);      
    }
    // 4. update component state
    this.setState({graph, hoveredNodeID});
  }

On Github:

  onHoverNode = pickedObj => {
    // check if is hovering on a node
    const hoveredNodeID = pickedObj.object && pickedObj.object.id;
    const graph = new Graph(this.state.graph);
    if (hoveredNodeID) {
      // highlight the selected node, connected edges, and neighbor nodes
      const connectedEdges = this.state.graph.findConnectedEdges(hoveredNodeID);
      const connectedEdgeIDs = connectedEdges.map(e => e.id);
      const hightlightNodes = connectedEdges.reduce((res, e) => {
        if (!res.includes(e.source)) {
          res.push(e.source);
        }
        if (!res.includes(e.target)) {
          res.push(e.target);
        }
        return res;
      }, [])
      graph.nodes.forEach(n => n.isHighlighted = hightlightNodes.includes(n.id));
      graph.edges.forEach(e => e.isHighlighted = connectedEdgeIDs.includes(e.id));
    } else {
      // unset all nodes and edges
      graph.nodes.forEach(n => n.isHighlighted = false);
      graph.edges.forEach(e => e.isHighlighted = false);      
    }
    // update component state
    this.setState({graph, hoveredNodeID});
  }

Allocation failed - process out of memory

I have successfully run the embedded app 3-load-config using a different datasets and config files. However, above files sizes of 50mb, I receive the error FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory when running npm run start. I have attempted to add --max-old-space-size=2048 flags to the npm run start command without success. The dataset loads easily on the kepler.gl demo page.

What configuration do I need to change for larger file sizes to work (50-250mb)?

updateTriggers lack explanation (Building a Graph Vis - 1. Graph Render)

The final code overview of the first chapter of this tutorial includes updateTriggers. I am not sure where these come from, what they do or whether they are part of chapters to come.

Can't do any testing - TypeError: Converting circular structure to JSON

I've ran through the first geospatial app course just fine. On to testing.

cd src/demos/testing-a-geospatial-app/4-testing-actions && npm i && npm run test

gives me the error Cannot find module 'babel-register'

npm i -D babel-register && npm run test

gives me the error Couldn't find preset "stage-2" relative to directory

npm i -D babel-preset-stage-2 && npm run test

Gives me the error Converting circular structure to JSON

Unsure where to go from here.

WebGL: INVALID_ENUM: bindFramebuffer: invalid target (Building a Graph Vis - 4. Interacting with Graph)

After implementation of the interactive functionality my browser logs multiple (256) of WebGL errors. WebGL: INVALID_ENUM: bindFramebuffer: invalid target Seems to be problems in the pickObject method?

Geospatial App - update section titles

Section titles should reflect what someone will learn by completing that section of the tutorial. To clarify, here's a suggestion:

Section Title Changes

1. Make a Map

2. Plot data on a map

3.Add layers to the map

4.Add a chart to the map

5. Handle events on the map

6. Enable different packages to interact on the map

Section 3 and 4 of the "Building a Graph Vis" are not loading

Section 2: http://vis.academy/#/graph-vis/2-basic-graph-application (loads properly)
Section 3: http://vis.academy/#/graph-vis/3-plugin-layout-engine (broken)
Section 4: http://vis.academy/#/graph-vis/4-interacting-with-graph (broken)

Displaying the cursor as crosshair on the map

For the building-a-geospatial-app tutorial, I found that on the website the cursor displayed as a crosshair over the map but with the code from the tutorial, it displayed as a hand on both of my browsers. In order to fix that I added:
style={{cursor: 'crosshair'}}
to the end of the DeckGL tag in the return statement of the deckgl-overlay.js file.

environment variable of Mapbox access token have a different name...?

from tutorial:
http://vis.academy/#/installing-a-coding-environment/installing-tools-mac

export MAPBOX_TOKEN="[your mapbox access token]"

from source:
https://github.com/uber-common/vis-academy/blob/master/src/demos/kepler.gl/1-basic-keplergl/webpack.config.js

new webpack.EnvironmentPlugin(['MapboxAccessToken'])

File from tutorial is missing

https://github.com/uber-common/vis-academy/blob/kepler.gl/src/demos/kepler.gl/1-load-data/src/app.js

File from tutorial leads to 404 Page

Bugs in graph tutorial

Hey all,

Thanks for putting this together -- much appreciated. Am going through the graph tutorial at the moment and have a blank screen with no visible errors in the console.

Also am trying to keep up to date with the newest releases of deck.gl and after updating my npm package to "deck.gl": "^6.0.3", it seems that OrthographicViewport can now be substituted with OrthographicView, which DeckGL can include with propview as opposed to viewport.

New viewport in createViewport():

return new OrthographicView({ width, height, left: (-width / 2), top: (-height / 2) });

I'm not getting anything showing up on the screen with these changes in place. I do see something, however, when I comment out getSourcePosition() in createEdgeLayer():

Curious as to what's going on -- no nodes are visible? Would appreciate assistance.

Changes to Section 1: Make a Map

Remove the section "1. Start with a bare React Component" because this is redundant; we can assume someone going through this tutorial knows the file they will be in to write code and will see the starter code in the file when they open the folder in their text editor. And, we can assume basic React knowledge so when someone sees the starter code, they will know 'oh, this is a bare component that will only display a div with some text'

Rename the section to: "Build the basic Map"

• Add a high level brief description of what you'll build by the end of this section. Possibly "You will render a map with basic properties that will make it interactive. This is the base we need to later add data overlays and create the interactions between layers."

A few small changes for a big impact:

1. Move the 'checkout complete code..' to the end of this section.
2. Start the section with a clear description of what they will build and why. Possibly "Setup a React Component with a viewport that includes: dimension, location, zoom and maxZoom."
3. Would it make sense to have 'Add the map Component' as the first thing to do? Currently, you describe it right away in the first paragraph and then reference it in Adding Default Viewport State. So, make that the 1st thing to do (instead of step 3).
4. Remove Step numbers (1,2,3..) because that will make it easier to maintain in the future. If you add / remove steps or change them around, you won't have to update all the numbers.
5. For each step that requires someone to write code, start with the instructions for what to build. Then explain why it's important or how to build that. Then, have the code solution.

`yarn install` fails with 401 Unauthorized error

"https://unpm.uberinternal.com/ocular/-/ocular-0.2.16.tgz: Request failed \"401 Unauthorized\"".

Step by step code snippets differ from Github repo (Building a Geospatial App)

Here:
https://github.com/uber-common/vis-academy/blob/master/src/docs/building-a-geospatial-app/4-basic-charts.md

In the last code block of step 1,
<DeckGLOverlay //... settings={this.state.settings}/>
should be
<DeckGLOverlay //... {...this.state.settings}/>
otherwise it breaks the settings panel/layer interaction.
FYI.

Changes to Scatterplot section

• Rename section to "Plot data on a map: ScatterplotLayer"
• Update learning objective. Replace "first contact with Deck.GL" with "Use Deck.GL to add ScatterplotLayer"

A few small changes to have a big impact:

1. move "checkout the completed code.." to the end of the section
2. Update Step 1 - taxi data

• Simplify the instructions: "Add a _processData method that will - you guessed it - process the taxi data. We need: latitude, longitude, and pickup (to color the dots). And, call the method _processData when the component mounts
• Add a question after the code block - "How can you test that you got the data points you need for the map?"

3. Change Step 2 "Render the deck.gl Component" and update instruction to just be 'Add Deck.gl to deckgl-overlay.js'
4. In Step 3, make a new section to update the layers array and title it "Initialize the ScatterplotLayer". Then, add a brief description "We have to initialize each deck.gl layer separately. Edit the render() function to initialize the ScatterplotLayer with the properties it needs. (then have the code block). Add: Check your map. What do you see?
5. Add section title: Add getColor callback. Make those instructions its own section. Instructions: Color the dots by pickup or dropoff. Edit ScatterplotLayer to have a unique color for pickup or dropoff by changing the getColor callback.
   Add: Check the map. You should have a map with taxi data, in 2 colors.
6. Add Section title: Review ScatterplotLayer properties. Keep that content that you have that is a brief review.
7. Remove 'optional section' with skip instructions (implied with an online tutorial and the sidebar with the section titles makes it easy for someone to click what they want to learn)_
8. Rename Step 4 "Bonus: Add a few more functionalities". Add a brief explanation why this is bonus -- possibly "Feel free to add other functionalities. This is more exposure to what Deck.gl can do and how it looks in a React Component."

Remove Step numbers (1,2,3..) and just have the headers that describe what you'll build in that section. This keeps the instructions maintainable if you make changes in the future.

Idea - Add a bonus challenge to play with other taxi data to plot on the map. This will give engineers a chance to play with other data that comes in the taxiData, see what makes sense on the map and what doesn't, and for people newer to React, more exposure to how to access data in an object and get it to render on the page. If this sounds interesting, add this challenge before the section of reviewing the scatterplot layer properties. Instructions could be "Want to keep playing around with scatterplot data? Change the data you are using from taxiData and plot something else on the map."

Can't able to load data from big query.

Trying to load data from GCP bigquery. I have done the environment variable setting of GCP JSON file. Still getting this error while running the application.

@ start C:\keplerapi
webpack-dev-server --progress --hot --open

10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
10% building modules 3/8 modules 5 active ...i\node_modules\webpack\hot\emitter.jswebpack: wait until bundle finished: /
Hash: a28a75822c9b773bc7a3
Version: webpack 2.7.0
Time: 14196ms
Asset Size Chunks Chunk Names
bundle.js 17.4 MB 0 [emitted] [big] app
bundle.js.map 19.8 MB 0 [emitted] app
chunk {0} bundle.js, bundle.js.map (app) 16.4 MB [entry] [rendered]
[0] .//react/react.js 56 bytes {0} [built]
[1075] .//react-router/es/index.js 1.46 kB {0} [built]
[1121] (webpack)/hot/emitter.js 77 bytes {0} [built]
[1122] ./src/main.js 2.32 kB {0} [built]
[1123] (webpack)-dev-server/client?http://localhost:8080 7.93 kB {0} [built]
[1124] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
[1423] ./src/app.js 7.11 kB {0} [built]
[1427] ./src/store.js 2.2 kB {0} [built]
[2045] .//loglevel/lib/loglevel.js 7.86 kB {0} [built]
[2388] .//strip-ansi/index.js 161 bytes {0} [built]
[2420] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[2421] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[2422] (webpack)/hot nonrecursive ^./log$ 160 bytes {0} [built]
[2423] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
[2437] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js 52 bytes {0} [built]
+ 2423 hidden modules

ERROR in /keplerapi//google-auth-library/build/src/auth/googleauth.js
Module not found: Error: Can't resolve 'child_process' in '/keplerapi/node_modules/google-auth-library/build/src/auth'
@ /keplerapi//google-auth-library/build/src/auth/googleauth.js 18:24-48
@ /keplerapi//google-auth-library/build/src/index.js
@ /keplerapi//@google-cloud/common/build/src/util.js
@ /keplerapi//@google-cloud/common/build/src/index.js
@ /keplerapi//@google-cloud/bigquery/build/src/index.js
@ /keplerapi/data/bigquery.js
@ /keplerapi/data/query.js
@ ./src/app.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
webpack: Failed to compile.

Corrections to the Testing UIs section

1. We are told to add
   import "./components"; import "./smoke-screens";
   To our index.js. Neither of these files exist yet.

2. At the end of the "shallow mounting" section, the webpage refers to a componentDidUnmount method, which does not exist in React.

Scatterplot first code does not work

I'm following the tutorial but ran into the following issue. The code before "2. Add data" in https://vis.academy/#/building-a-geospatial-app/2-map-data-overlays-scatterplot
does not work for me. After examinating the full complete code, which works fine, I noticed a difference in
<StaticMap style={this.state.style} />

In the full complete working code, it is like this:
<StaticMap mapStyle={this.state.style} />

I replaced style with mapStyle as in the working code and it works fine now. Please correct this as I was struggling with this issue for some time till I found out this typo. Thanks!

2-load-data source code link

Hey,
How are you, I hope you're doing fine,
First of all I would like to thank all the contributors of this, you don't how much you have extended my way !

the second thing is that, I just noticed a small issue in your tutorial, The source code link in http://vis.academy/#/kepler.gl/2-load-data

is pointing to "https://github.com/uber-common/vis-academy/blob/kepler.gl/src/demos/kepler.gl/1-load-data/src/app.js"
which doesn't exist

and it instead should point to "https://github.com/uber-common/vis-academy/blob/kepler.gl/src/demos/kepler.gl/2-load-data/src/app.js"

Thank you once again
Have a good day !

Images in the "Visualization Guidelines" are not displayed

See http://vis.academy/#/building-a-geospatial-app/visualization-guidelines/dont-too-much-to-see

add triggers to GraphRender (Building a Graph Vis - 3. Plugin Layout Engine)

In step 4. Position Update Trigger of this chapter is stated that the triggers should be added to the LayoutEngine.js while the example shows the code is added to functions of the GraphRender.js.

What does successfully setting up the coding environment look like?

I am working on setting up my environment for the Vis Academy using Windows 10. While the instructions have mostly been clear, I have been tripped up on the very last portion of Installing a coding environment > Downloading code examples, Specifically, Verifying that everything works.

I believe that I was able to successfully able to load all the packages by doing the following:

cd vis-academy/src/demos/building-a-geospatial-app/starting-code
npm install

When I run npm run start I get the following output:

> [email protected] start C:\Users\maptastik\Documents\LEARNING\vis-academy\src\demos\building-a-geospatial-app\starting-code
> webpack-dev-server --config ./webpack.config.js --mode development

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from ./dist
i ｢wdm｣: Hash: 47104cbf6ee5f9330e70
Version: webpack 4.29.1
Time: 1491ms
Built at: 2019-02-04 22:33:24
    Asset      Size  Chunks             Chunk Names
bundle.js  1.21 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js 52 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.78 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.11 KiB {main} [built]
[./src/index.js] 187 bytes {main} [built]
    + 25 hidden modules
i ｢wdm｣: Compiled successfully.

While the instructions from the Vis Academy state to open up http://localhost:3030 in my browser, it appears that the server is actually running at http://localhost:8080. It looks like this mismatch in ports will be resolved by #81. Alas, I navigated to http://localhost:8080 in my browser. Here is what I see:

I am certain this will seem an obtuse questions, but is this what success looks like when setting up the environment?

The instructions state (emphasis mine):

We are going to build the app from the first lesson, "Building a Geospatial App", to make sure that everything works.

However, what shows up in my browser is this indicator that my Mapbox token is set. Is that what "everything" is? I'm a little confused because I thought we checked out Mapbox token in the section Installing a coding environment > Installing Tools - Windows.