Skip to content

Latest commit

 

History

History
53 lines (43 loc) · 4.6 KB

TUTORIAL.md

File metadata and controls

53 lines (43 loc) · 4.6 KB
Raw

NASA Meteorite Visualizer

Tutorial

Requirements

Google Chrome Browser

A Code Editor

Steps

  1. index.html setup basic html5 launcher page
  2. index.html import d3, topojson, and moment libraries
  3. index.html stub and link ./css/styles.css
  4. index.html stub and import ./js/meteorites.js
  5. styles.css set the background color
  6. world-50m.json save world data json file to ./data/ directory as ./data/world-50m.json
  7. meteorites.js add initial variables and script to render d3.geo.mercator map with land, projection, and graticule using the world-50m.json data file.
  8. styles.css add styles for map
  9. meteorites.js d3.json(-->world) use d3 to load json formatted meteorite data from https://data.nasa.gov look at data
  10. meteorites.js d3.json(-->meteorites) create coordinates by filtering out data from features that do not have geometry look at data
  11. meteorites.js d3.json(-->meteorites) filter coordinates further by only including geometry with type "Point" look at data
  12. meteorites.js d3.json(-->meteorites) generate formatted data needed by d3 in the format { date, lat, long } from the filtered coordinates look at data
  13. meteorites.js d3.json(-->meteorites) sort the resulting coordinate data by year in ascending order look at data
  14. meteorites.js d3.json(-->meteorites) create then invoke a function named showMeteorites() that will add svg elements for each meteorite projected on the map
  15. meteorites.js d3.json(-->meteorites) (above showMeteorites()) generate a new array of unique years from the years in coordinates look at data
  16. meteorites.js d3.json(-->meteorites)
    1. track the curYearIdx by setting it to 0
    2. initialize curYear
    3. (inside showMeteorites()) display curYear in the yearLabel svg element
  17. meteorites.js d3.json(-->meteorites)
    1. initialize a new array named coordsThisYear
    2. in the showMeteorites() function, set coordsThisYear to the coordinates that belong to the current year
    3. then set the fallingMeteorites data to coordsThisYear
  18. meteorites.js showMeteorites()
    1. before fallingMeteorites, remove all previous star-container elements.
    2. before the end of showMeteorites() conditionally increment curYearIdx, looping through the years.
    3. set curYear to the new curYearIdx.
    4. add a setTimeout to invoke showMetorites again
    5. (after the showMeteorites() function) replace the initial invocation with a 1000 ms delay.
  19. meteorites.js fallingMeteorites.enter() replace the white circle with a shape (svg path) of a falling meteorite from http://codepen.io/nakaz/pen/dMdPmZ
  20. [meteorites.js fallingMeteorites.enter()] add a star class attribute to the new svg path
    1. styles.css add styles and animation to the "falling star"
  21. styles.css style the .year-label text

Extending and Experimentation

add more animation delays in css (hint, nth-child(__))

display the names of each meteorite!

make each meteorite render a different size based on it's actual size