@@ -33,7 +33,9 @@ const stateCodeToName = {
33
33
34
34
// Fetch PUMA details, including state names based on the hardcoded map
35
35
const pumaDetails = await db .query (`
36
- SELECT DISTINCT puma, puma_name, state_code FROM data WHERE year = ${ selectedYear}
36
+ SELECT DISTINCT puma, FIRST(puma_name) AS puma_name, state_code
37
+ FROM data
38
+ GROUP BY puma, state_code
37
39
` ).then (data => data .map (d => ({
38
40
puma: d .puma ,
39
41
stateCode: d .state_code ,
@@ -42,14 +44,12 @@ const pumaDetails = await db.query(`
42
44
43
45
console .log (" PUMA Details:" , pumaDetails);
44
46
45
- // Sort pumaDetails alphabetically by state name and then by PUMA code
47
+ // Sort pumaDetails alphabetically by state name and then by PUMA name
46
48
pumaDetails .sort ((a , b ) => {
47
49
const stateCompare = stateCodeToName[a .stateCode ].localeCompare (stateCodeToName[b .stateCode ]);
48
50
if (stateCompare !== 0 ) return stateCompare;
49
- return a .puma .localeCompare (b .puma );
51
+ return a .label .localeCompare (b .label );
50
52
});
51
-
52
- console .log (" Sorted PUMA Details:" , pumaDetails);
53
53
```
54
54
55
55
``` js
@@ -84,13 +84,23 @@ const income = await db.query(`
84
84
` );
85
85
```
86
86
87
+ <!-- ```js
88
+ const medianIncome = await db.query(`
89
+ SELECT
90
+ quantile_cont(0.5) WITHIN GROUP (ORDER BY income) AS median_income
91
+ FROM data
92
+ WHERE year = ${selectedYear} AND puma = '${selectedPUMA}' AND state_code = '${selectedStateCode}';
93
+ `);
94
+ ``` -->
95
+
87
96
``` js
88
97
function incomeChart (income , width ) {
89
98
// Create a histogram with a logarithmic base.
90
99
return Plot .plot ({
91
100
width,
92
101
marginLeft: 60 ,
93
- x: { type: " log" },
102
+ x: { type: " log" , domain: [5000 , 500000 ], // Set the domain of the x-axis to be fixed between 1000 and 500,000
103
+ },
94
104
y: { axis: null }, // Hide the y-axis
95
105
color: { legend: " swatches" , columns: 6 , domain: orderSectors },
96
106
marks: [
@@ -110,6 +120,7 @@ function incomeChart(income, width) {
110
120
}
111
121
)
112
122
),
123
+ // Plot.ruleX([medianIncome], {stroke: "red", strokeWidth: 2})
113
124
],
114
125
});
115
126
}
0 commit comments