Twelve cities, each carrying four variables of a different measurement type. Rather than a scatterplot, the cities are split into one small panel per region, so every city keeps its own labelled row. Hover any bar for the exact values.
I mapped population (ratio) to bar length. Length is the channel people compare most accurately, and because all bars start at zero, it will be easier for a viewer to compare the populations across cities. Region names became the panels rather than a color, since nominal categories have no order and separating them spatially avoids spending a color scale on labels that carry no magnitude. That also keeps region comparisons honest: within a panel the reader compares cities, and across panels they compare regions. Temperature (interval) is the single-hue blue fill, light to dark, depending on the temperature value. Development level is the row of one to three pips beside each city, with values Low, Medium, and High.
In conclusion, from the visualization I want a viewer to notice the trend for the cool, larger, more developed north and west against the warm, small, less developed south. The inverse relationship between temperature and population becomes especially visible as the darkest bars sitting consistently among the shortest.
data/students_multivariate.csv, loaded with
d3.csv. Every row is one student carrying five columns,
four of which the scatterplot below encodes at once.
The walkthrough scatterplot maps study_hours to x-position,
score to y-position, major to colour and
year to size. It uses d3.scaleLinear for the
positions, d3.scaleOrdinal for colour and size,
d3.axisBottom and d3.axisLeft for the axes, and
a hover tooltip for the per-student detail.