Skip to content

Latest commit

 

History

History
75 lines (51 loc) · 1.7 KB

readme.md

File metadata and controls

75 lines (51 loc) · 1.7 KB

D3.js Map Data Across the Globe

A zoomable world map showing meteorites landed

This is my D3 map for freeCodeCamp's last D3.js challenge.

Meteorites

User Stories

  • I can see where all Meteorites landed on a world map.
  • I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.
  • I can mouse over the meteorite's data point for additional data.

Todo

  • Add rolling zoom and pan
  • Position map to user's location on page load

Tools Used

  • D3.js version 4
  • Webpack module bundler
  • Babel.js compiler
  • ESLint linter with Airbnb's config
  • Sass with PostCSS' Autoprefixer

Install and Build

You need to have either yarn or npm installed on your computer.

Clone this repo

git clone https://github.com/zsoltime/d3-map-data.git <new-folder-name>
cd <new-folder-name>

Install dependencies

yarn
# OR
npm install

Build dev bundle

It builds the app to the dist folder. It creates the JavaScript bundle without uglifying it, and compiles Sass to CSS.

yarn build:dev
# OR
npm run build:dev

Start dev server

Once you built the dev bundle you can start the dev server. Open http://localhost:8080 to view it in browser.

yarn start
# OR
npm start

Build production bundle

It builds the app to the dist folder. It creates the JavaScript bundle, uglifies it, compiles Sass to CSS and minifies it - ready to deploy.

yarn build:dist
# OR
npm run build:dist