here or see how these visualizations were generated on GitHub. Ping me on Twitter or email if you have ideas for what other variables in the census to look at or how else to display these millions of datapoints!here or see how these visualizations were generated on GitHub. Ping me on Twitter or email if you have ideas for what other variables in the census to look at or how else to display these millions of datapoints!
+80% of visualization is data processing; learn how this data was processed here!↗︎
```js
-const incomeHistogram = FileAttachment("data/income-histogram.parquet").parquet();
-const incomeCanvas = document.createElement("canvas");
+const income = FileAttachment("data/income-histogram.parquet").parquet();
+const rent = FileAttachment("data/rent-histogram.parquet").parquet();
```
```js
-// Assuming modification for categorization based on sector
-const sectorColorMapping = d3.sort(d3.rollups(incomeHistogram.getChild("sector"), (D) => D.length, (d) => d).filter(([d]) => d), ([, d]) => -d).map(([sector, count]) => ({sector, count}));
-const sectorColor = Object.assign(Plot.scale({color: {domain: sectorColorMapping.map((d) => d.sector)}}), {label: "sector"});
-const sectorSwatch = (sector) => html` ${sector}`;
-```
-
-```js
-// Import the rent histogram data from the parquet file
-const rentHistogram = FileAttachment("data/rent-histogram.parquet").parquet();
-const rentCanvas = document.createElement("canvas");
+function incomeChart(income, width) {
+ // Order the sectors by mean income
+ const orderSectors = d3.groupSort(
+ income,
+ (v) => -d3.sum(v, (d) => d.income * d.count) / d3.sum(v, (d) => d.count),
+ (d) => d.sector
+ );
+
+ // Create a histogram with a logarithmic base.
+ return Plot.plot({
+ width,
+ marginLeft: 60,
+ x: { type: "log" },
+ color: { legend: "swatches", columns: 6, domain: orderSectors },
+ marks: [
+ Plot.rectY(
+ income,
+ Plot.binX(
+ { y: "sum" },
+ {
+ x: "income",
+ y: "count",
+ fill: "sector",
+ order: orderSectors,
+ thresholds: d3
+ .ticks(Math.log10(2_000), Math.log10(1_000_000), 40)
+ .map((d) => +(10 ** d).toPrecision(3)),
+ tip: true,
+ }
+ )
+ ),
+ ],
+ });
+}
```
```js
-// Create the color mapping for regions
-const regionColorMapping = d3.sort(d3.rollups(rentHistogram.getChild("region"), (D) => D.length, (d) => d).filter(([d]) => d), ([, d]) => -d).map(([region, count]) => ({ region, count }));
-const regionColor = Object.assign(Plot.scale({ color: { domain: regionColorMapping.map((d) => d.region) } }), {label: "region" });
-const regionSwatch = (region) => html`${region}`;
+function rentChart(rent, width) {
+ // Order the regions by mean rent
+ const orderRegions = d3.groupSort(
+ rent,
+ (v) => d3.sum(v, (d) => d.rent * d.count) / d3.sum(v, (d) => +d.count),
+ (d) => d.region
+ );
+
+ // Create a histogram with a logarithmic base.
+ return Plot.plot({
+ width,
+ marginLeft: 60,
+ x: { type: "log" },
+ color: { legend: "swatches", columns: 6, domain: orderRegions },
+ marks: [
+ Plot.areaY(
+ rent,
+ Plot.binX(
+ { y: "sum" },
+ {
+ x: "rent",
+ y: "count",
+ fill: "region",
+ order: orderRegions,
+ thresholds: d3
+ .ticks(Math.log10(100), Math.log10(10000), 50)
+ .map((d) => +(10 ** d).toPrecision(3)),
+ tip: true,
+ curve: "monotone-x",
+ }
+ )
+ ),
+ ],
+ });
+}
```
-