D3.js
January 19, 2020book : https://www.newline.co/fullstack-d3
blog : https://wattenberger.com/blog/d3#intro
tip: view data: console.tabe(dataset[0])
checklist for designing data vis
- access look at data and determine how to access values you need
- chart dimensions declare physical chart dimensions (pixels)
- draw canvas render chart and bounds
- create scales create scales for every data-to-pysical attribute in chart
- draw data render your data elements
- draw peripherals render axes, labels, legends
- setup interactions initialize event listeners and create interaction behavior
chart usage
line chart
- y axis over time (x axis)
scatter plot
- relationships between two axis
- dot represents a point (could be day)
- third access could be size/color of point
histogram
- better when wider than tall (.6-.5 of width)
maps
As a general rule of thumb, a variant of the Mercator, the Transverse Mercator (d3.geoTransverseMercator()) is a good bet for show- ing maps that cover one country or smaller. The Winkel Tripel (d3.geoWinkel3()) or Equal Earth (d3.geoEqualEarth()) are good bets for maps covering larger areas, such as the whole world
data sources
https://github.com/Derek-Jones/SiP_dataset
https://www.naturalearthdata.com/downloads/50m-cultural-vectors/50m-admin-0-countries-2/
https://databank.worldbank.org/source/world-development-indicators
tools
https://trac.osgeo.org/gdal/wiki/DownloadingGdalBinaries
brew install gdal
convert shape file to json
ogr2ogr -f GeoJSON ./world-geojson2.json ./ne_50m_admin_0_countries.shp