Skip to content
This repository has been archived by the owner on Sep 26, 2024. It is now read-only.

Changes to Scatterplot section #55

Open
jkarnowski opened this issue Feb 13, 2018 · 0 comments
Open

Changes to Scatterplot section #55

jkarnowski opened this issue Feb 13, 2018 · 0 comments

Comments

@jkarnowski
Copy link

  • 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?"
  1. Change Step 2 "Render the deck.gl Component" and update instruction to just be 'Add Deck.gl to deckgl-overlay.js'
  2. 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?
  3. 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.
  4. Add Section title: Review ScatterplotLayer properties. Keep that content that you have that is a brief review.
  5. 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)_
  6. 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."

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant