CS-GY 6313 - Information Visualization
New York University
2025-10-03
User Interface | Graphics Library | Notebook |
---|---|---|
observablehq.com | D3 | Week 5 Lab Notebook |
Today we will be a coding-heavy lab where we will practice with color scales and geodata. The lab will be divided into these sessions:
d3.scaleLinear()
→ for numeric datad3.scaleLog()
→ for skewed data (e.g. income)d3.scaleTime()
→ for time/date axesWe can use d3.scaleSequential()
with numeric, continuous data to generate gradients:
This is generally good for:
Use d3.scaleOrdinal() + d3.schemeCategory10
, as an example.
Other categorical schemes provided here.
Categorical scale are good for:
In this coding session, you will be practicing with producing a scatter plot based on health data from different countries/regions. This session uses the gapminder data.
An initialized chart with titles, but it’s missing the axes and data.
d3.scaleLinear()
, d3.scaleLog()
)domain()
and range()
when setting up plot axes.What is a Choropleth Map?
Example Src: D3
In the example, we plotted a simple Mercator map. In this coding session, we will make it more interesting by binding the geodata to another dataset: population
.
If you recall in Week 3 Exercise,, we generated the geomap of USA counties and their population data. To achieve this, we needed to link the population data to the geodata by some common feature. In that case, we joined the two datasets based on an id feature that was basically the zip codes of each USA county.
In this coding session, we will do something similar, but in D3 and using a world map instead of the USA counties map. We have provided the basic code for the Mercator map both in the example above and in this code session’s starter code. It’s your job to color the countries of the map to show their population sizes.
The barebones code for the Mercator map.
Map()
to act as a lookup dictionary when mapping countries to populations.Image src: “Color Advice for Data Visualization with D3.js” by Elijah Meeks
In this section, we’ll be copying the scatter plot data used in Coding Session #1 but with some different twists. In the first coding session, you were tasked with using either d3.sequentialBlues
for the health data or d3.schemeCategory10
for the categorical region data. However, many of these pre-determined schema can be hard to visually parse for people with ocular deficiencies such as color blindness.
To simulate the different variations of color blindness, you can go to this website. This is a very useful simulator that alters a sample image to let you see what certain ocular conditions look like.
For this coding session, you will copy-paste your code from Coding Session #1 and modify it to use a color scheme that aims to make the coloration accessible to people with Deuteranopia (green-blindness). One way we can do this is to use ColorBrewer palettes. For more information, look at this repository of different color palettes and search for “ColorBrewer”.
Once you have what you believe is an acceptable color visualization, hop over to https://bioapps.byu.edu/colorblind_image_tester and upload a PNG of your plot to receive a rating of whether it’s friendly or not to people with Deuteranopia.