Published
Edited
Nov 13, 2019
md`# Bay Area RHNA table`
chart = {
const tbl = d3.select(html`
<table>
<thead>
<tr>
<th></th>
<td>very low income</td>
<td>low income</td>
<td>moderate income</td>
<td>above moderate income</td>
<td>total</td>
</tr>
</thead>
</table>`);
var tr = tbl.selectAll('tbody tr')
.data(filteredRhna)
.enter()
.append('tr');
tr.append("th")
.text(function(d) { return d.place; });
tr.selectAll("td")
.data(function(d) { return housing_type.map(function(k) { return d[k] })})
.enter().append("td").append("svg").attr("width", 100)
.attr("height", 30).append("svg")
.attr("width", 100)
.attr("height", 30)
.append("rect")
.attr("height", 30)
.attr("width", function(d) { if (d > 1) { return 100; } else { return d * 100; } })
.append("rect")
.attr("height", 30)
.attr("width", function(d) { if (d > 1) { return 0; } else { return 100 - d * 100; } })
tr.selectAll("td svg")
.append("text")
.attr("y",15)
//.attr("x", function(d) { return d*100; })
.attr("x", 0)
.attr("text-anchor", "left")
.style("fill", "white")
.text(function(d) { return Math.round(d*100) + "%"; });
return tbl.node();
}
housing_type = rhna.columns.filter(function(key) {
return key == "percent_vli" | key == "percent_li" | key == "percent_mi" | key == "percent_ami" | key == "percent_total"
});
keys = rhna.columns.filter(function(key) {
return key == "place" | key == "percent_vli" | key == "percent_li" | key == "percent_mi" | key == "percent_ami" | key == "percent_total"
});
rhna
margin = ({top: 10, right: 10, bottom: 20, left: 40})
height = 500
filteredRhna = rhna.filter(function(d)
{
if(( d["place"] == "San Francisco") || (d["place"] == "Oakland"))
{
return d;
}
})
rhna = d3.csv("https://gist.githubusercontent.com/adebruine/cfdac06f12b84f69a6a254beb7e5cb10/raw/fe14ebf7003f69bb332c5ff36f388c5e979955ae/rhna_progress_2007.csv")
d3 = require("d3@5")
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.
