UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
data = d3.csvParse(
await FileAttachment("County_Zhvi_AllHomes.csv").text(),
d3.autoType
)
render_data_table(data.slice(0, 10))
md`This data is basically showing housing values (according to Zillow) over time. The data is partitioned by region. The data came from Zillow: https://www.zillow.com/research/data/. It calculates typical value of all homes per square foot calculated by taking the estimated home value for each home in a given region and dividing it by the home’s square footage in a county.`
md`Choropleth Map`
totalCost = {
const results = {};
data.forEach(d => {
results[d.StateCodeFIPS * 1000 + d.MunicipalCodeFIPS] = {
fips: d.StateCodeFIPS * 1000 + d.MunicipalCodeFIPS,
county: d.RegionName,
cost: d["2020-04-30"],
state: d.State
};
});
const finalResults = [];
for (const category in results) {
finalResults.push({
county: results[category].county,
cost: results[category].cost,
state: results[category].state,
fips: results[category].fips
});
}
return finalResults;
}
color_scale = d3.scaleSequential(
d3.extent(totalCost, d => d.cost),
d3.interpolateCool
)
md `Bubble Map`
bubble_data = {
const mapping = new Map();
data.forEach(d => {
mapping.set(
convert_fips(d.StateCodeFIPS, d.MunicipalCodeFIPS),
d["2020-04-30"]
);
});
return mapping;
}
function convert_fips(state_fips, municipal_fips) {
if (state_fips < 10) {
return "0" + (state_fips * 1000 + municipal_fips);
} else {
return "" + (state_fips * 1000 + municipal_fips);
}
}
maps = md`## Maps
In the section below, create **two maps** and discuss their **advantages/disadvantages** using the data of your choice. You may **import one map**, but must write the code in this notebook for the other map.`
md` # Choropleth Map`
path = d3.geoPath()
choropleth = {
const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]);
svg
.append("g")
.attr("transform", "translate(610,20)")
.append(() =>
legend({
color: color_scale,
title: "Average Cost Per Square Foot ($)",
width: 260
})
);
svg
.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
// .attr("stroke", "black")
.attr("fill", d => {
const value = totalCost.find(e => e.fips == d.id);
if ((d.fips = value)) {
return color_scale(value.cost);
} else {
return "black";
}
})
.attr("d", path)
.append("title")
.text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}`);
svg
.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
md`A choropleth map uses shading or pattern fills in various areas of a map to represent the value of some variable. Here we are showing the average cost per square foot in different counties in USA. In general the advantage of using a choropleth map is that you can directly compare the differences between all areas since the different levels of shading make it very obvious. The disadvantage is that when the areas have values that are very close to each other, it is hard to tell which one is greater.`
md`Bubble Map`
import { chart as bubble_map } with {
bubble_data as data
} from '@mpfriesen/bubble-map'
bubble_map
md`In general, the advantage of using a bubble map is that we can compare differences between different areas on a map looking at the size of the bubbles. However, this works well only if there is a big difference between values in our dataset, with a small difference, the map would end up like the one we have below. It is very hard to tell which state has higher obesity rate because their sizes are very similar.`
d3 = require("d3")
import { chart, us, states } from "@d3/choropleth"
format = d => `${d}%`
import { legend } from "@d3/color-legend"
topojson = require("topojson-client@3")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
