SeabassWells/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>

  </style>

  <script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>

</head>

<body>

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


  <script>
// 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>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>

	</style>

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>

	</head>

	<body>

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


	<script>
	// 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>