Skip to content

Instantly share code, notes, and snippets.

@RainismZ

RainismZ/.block

Created September 27, 2017 22:34
Show Gist options
  • Save RainismZ/ceff4ee2400d48822fa39fae0606d270 to your computer and use it in GitHub Desktop.
Save RainismZ/ceff4ee2400d48822fa39fae0606d270 to your computer and use it in GitHub Desktop.
Download ZIP
LA visualization
Raw
.block
license: mit
Raw
README.md

The dataset is about HCIDLA Affordable Housing Projects Catalog And Listing (2003 To Present). URL / Downloadable CSV

This stacked bar chart shows imput of projects group by communities.

Code forked from Mike Bostock’s Block.

Raw
index.html
<!DOCTYPE html>
<style>
.axis .domain {
display: none;
}
</style>
<svg width="960" height="640"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 140, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#98abc5", "#8a89a6", "#7b6888"]);
d3.csv("money_filtered.csv", function(d, i, columns) {
for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
d.total = t;
return d;
}, function(error, data) {
if (error) throw error;
var keys = data.columns.slice(1);
data.sort(function(a, b) { return b.total - a.total; });
x.domain(data.map(function(d) { return d.COMMUNITY; }));
y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
z.domain(keys);
g.append("g")
.selectAll("g")
.data(d3.stack().keys(keys)(data))
.enter().append("g")
.attr("fill", function(d) { return z(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.data.COMMUNITY); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-1em")
.attr("dy", "-.5em")
.attr("transform", "rotate(-90)");
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", 2)
.attr("y", y(y.ticks().pop()) + 0.5)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "start")
.text("Input (USD)");
var legend = g.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(keys.slice().reverse())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 19)
.attr("width", 19)
.attr("height", 19)
.attr("fill", z);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9.5)
.attr("dy", "0.32em")
.text(function(d) { return d; });
});
</script>
Raw
money_filtered.csv
COMMUNITY HCIDLA FUNDED LEVERAGE TAX EXEMPT CONDUIT BOND
ADAMS-NORMANDIE 3225000 24532619 4641342
ALSACE 0 6771719 10247566
ANGELINO HEIGHTS 1647000 8292373 0
ATWATER VILLAGE 15282629 23669584 0
BOYLE HEIGHTS 26811315 95162997 759870
CANOGA PARK 23563000 39728219 7603714
CENTRAL 24370206 141417521 37302884
CENTURY PALMS/COVE 2055350 44095280 28774304
CHATSWORTH 1931627 9229203 0
CHINATOWN 19826841 70647851 3810000
COUNTRY CLUB PARK 8687337 24518509 10420936
CRENSHAW DIST 0 21646461 25059214
DEL REY 9389134 28060445 0
DOWNTOWN 24062127 128075574 102905000
E. HOLLYWOOD 3132000 49307507 39061698
ECHO PARK 3758668 13202632 0
EL SERENO 1769655 11345458 0
ELYSIAN VALLEY 6199789 19630043 10287000
EXPOSITION PARK 13418300 112352951 42067556
FIGUEROA PARK SQ. 0 7103994 10208936
FLORENCE-FIRESTONE 2444000 40832339 29739186
GLASSELL PARK 11379687 50470336 10562729
GRAMERCY PLACE 2000000 31674331 0
GREEN MEADOWS 6001178 39100241 4641342
HARBOR CITY 2673764 50797383 41877000
HARBOR GATEWAY 10452270 61857364 0
HARVARD HEIGHTS 18492833 48814273 6420000
HARVARD PARK 17075014 25039156 2397110
HIGHLAND PARK 3100000 14391642 6787000
HOLLYWOOD 24340895 169183116 37055900
HYDE PARK 5281147 8428737 0
JEFFERSON PARK 3250000 13946974 0
KOREATOWN 33586421 152889886 8791256
LAKE VIEW TERRACE 3805976 15063116 0
LINCOLN HEIGHTS 18398107 121475146 10247566
LITTLE TOKYO 6033465 36124055 0
LOS FELIZ 0 7334438 8579256
MELROSE 15944208 103014878 59256502
N. HOLLYWOOD 6281534 34991165 3211916
NORTH HILLS 28148241 101577401 250000
PACOIMA 5614285 66330847 9100000
PANORAMA CITY 34877221 139833827 0
PICO-UNION 18089821 115271772 41932704
RANCHO PARK 2400000 8573015 0
RESEDA 5143467 83352486 13000000
SAN PEDRO 4875640 10632391 1162445
SHERMAN OAKS 0 7321491 9334100
SILVER LAKE 7119092 39494582 1850000
SOUTH PARK 12482135 50719990 0
ST. ELMO VILLAGE 0 7438473 4641342
SUN VALLEY 4326358 27325430 0
SUNLAND 0 9454441 5245559
SYLMAR 10300000 28718513 5442000
TEMPLE-BEAUDRY 55677645 185297555 17851003
THAI TOWN 17560000 71295360 0
TUJUNGA 1745082 12860088 0
UNIVERSITY PARK 3827162 54123580 25515342
VALLEY GLEN 19265428 31899352 13299726
VAN NUYS 3228000 46918514 48608645
VENICE 750000 4590602 0
VERMONT KNOLLS 4650000 6013775 0
VERMONT SQUARE 3017456 15172897 0
VERMONT VISTA 14941938 80674045 28542962
VERNON CENTRAL 37892739 69813012 25008278
VICTORIA PARK 4925829 13299964 0
WATTS 11986178 101259325 40874374
WELLINGTON SQUARE 6635267 12056911 0
WEST ADAMS 14375000 66823759 44640500
WEST VERNON 13626625 97065968 15158000
WESTLAKE 71619584 261715149 73675422
WHOLESALE DISTRICT 59080499 323862556 11338566
WILMINGTON 6744285 51072686 22337212
WILSHIRE CENTER 7223409 59565011 35970778
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment