uber-archive / vis-academy Goto Github PK
View Code? Open in Web Editor NEWA set of tutorials on how our frameworks make effective data visualization applications.
Home Page: http://vis.academy
License: MIT License
A set of tutorials on how our frameworks make effective data visualization applications.
Home Page: http://vis.academy
License: MIT License
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)
Section titles should reflect what someone will learn by completing that section of the tutorial. To clarify, here's a suggestion:
A few small changes to have a big impact:
_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 mountslayers
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?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."
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:
renderer.code
hook: https://gist.github.com/choxi/6fa98f7b203bf2dfdcfa (source highlightjs/highlight.js#480)Spinner
is used but never importedhoveredObject
is used in render
, but never declared, same with a function called _onHover
I could contribute to some of those changes if you agree with them :)
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)?
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.
We are told to add
import "./components"; import "./smoke-screens";
To our index.js. Neither of these files exist yet.
At the end of the "shallow mounting" section, the webpage refers to a componentDidUnmount method, which does not exist in React.
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!
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
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]/react-router/es/index.js 1.46 kB {0} [built]
[1075] ./
[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]/strip-ansi/index.js 161 bytes {0} [built]
[2388] ./
[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/google-auth-library/build/src/auth/googleauth.js 18:24-48
Module not found: Error: Can't resolve 'child_process' in '/keplerapi/node_modules/google-auth-library/build/src/auth'
@ /keplerapi/
@ /keplerapi//google-auth-library/build/src/index.js/@google-cloud/common/build/src/util.js
@ /keplerapi/
@ /keplerapi//@google-cloud/common/build/src/index.js/@google-cloud/bigquery/build/src/index.js
@ /keplerapi/
@ /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.
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.
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 !
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
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. Use
pixels instead
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
Add clarity by organizing prereq/setup by:
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:
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)yarn
or npm
package manager installedsrc/demos/building-a-geospatial-app/starting-code/src/app.js
and start with the folder: starting-code.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.
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.
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'])
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?
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});
}
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:
Create a new application using create-react-app. Delete everything in the /src folder except for Index.js and App.js.
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"));
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>
);
}
}
Npm install react-map-gl and deck.gl.
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?
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.
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.
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"
A few small changes for a big impact:
Steps to reproduce:
vis-academy
cd src/demos/2-scatterplot-overlay
yarn
yarn start
localhost:3030
that the scatterplot example is visiblepackage.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)
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
.
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
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.