sf_choropleth

Built with blockbuilder.org

forked from SeabassWells's block: sf_choropleth

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>

/* .counties {
  fill: none;
} */
/*
.borders {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
} */

</style>

</head>
<body>
  
<svg width="960" height="600"></svg>
</body>

/*
v1: choropleth map, no interactivity for one dataset
steps:
set the svg parent element with height and width//
set the color scale for the nhoods//
load the data//
set the path for the nhoods and nhood borders//
color the map//

// defines the svg variable and the width/height variables
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

//makes a map for the unemployment variable
var population = d3.map();

// initializes the path variable as a geoPath
var path = d3.geoPath();

// initializes the color variable.
var color = d3.scaleThreshold()
    .domain(d3.range(5, 100))
    .range(d3.schemeBlues[9]);

// set the promises variable as an array
var promises = [
  d3.json("SFnhoods.json"),
  d3.csv("understandSFdata.csv", function(d) { population.set(d.nhood, +d.popdensity); })
]

// this says return the variable promises and if it was successful, then trigger the function ready
Promise.all(promises).then(ready)

function ready([pop]) {

svg.append("g")
      .attr("class", "nhoods")
    .selectAll("path")
    .data(topojson.feature(pop, pop.objects.SFgeojson).features)
    .enter().append("path")
      .attr("fill", function(d) { return color(d.popdensity = population.get(d.properties.nhood)); })
      .attr("d", path)
    .append("title")
      .text(function(d) { return d.popdensity; });

}

</script>

https://d3js.org/d3.v5.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js

https://d3js.org/topojson.v2.min.js