SeabassWells/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

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

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

</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 viewerport -->
<svg width="960" height="600"></svg>
</body>

<script>

/*
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.json("output.topojson"),
  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]) {
  console.log(promises)
  svg.append("g")
      .attr("class", "nhoods")
    .selectAll("path")
    .data(topojson.feature(pop, pop.objects.analysisneighborhoods).features)
    .enter().append("path")
    .attr("fill", function(d) { console.log(d) ; })
    .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>

## understandSFdata.csv

          
            nhood
            popdensity

            
              Bayview Hunters Point
              11.4

            
              Bernal Heights
              37.9

            
              Castro/Upper Market
              38.4

            
              Chinatown
              103.1

            
              Excelsior
              44.2

            
              Financial District/South Beach
              24.3

            
              Glen Park
              19.2

            
              Golden Gate Park
              0.1

            
              Haight Ashbury
              50.7

            
              Hayes Valley
              58.1

            
              Inner Richmond
              47.2

            
              Inner Sunset
              32

            
              Japantown
              47.3

            
              Lakeshore
              7.8

            
              Lincoln Park
              1.3

            
              Lone Mountain/USF
              48.7

            
              Marina
              38.3

            
              McLaren Park
              2.2

            
              Mission
              48.6

            
              Mission Bay
              20.2

            
              Nob Hill
              97

            
              Noe Valley
              39.1

            
              North Beach
              39.4

            
              Oceanview/Merced/Ingleside
              41.6

            
              Outer Mission
              37.8

            
              Outer Richmond
              39.2

            
              Pacific Heights
              47.3

            
              Portola
              31.1

            
              Potrero Hill
              18.9

            
              Presidio
              2.5

            
              Presidio Heights
              33.3

            
              Russian Hill
              56.4

            
              Seacliff
              18.1

            
              South of Market
              33.9

            
              Sunset/Parkside
              29.9

            
              Tenderloin
              112.3

            
              Treasure Island
              5.4

            
              Twin Peaks
              17.5

            
              Visitacion Valley
              47.4

            
              West of Twin Peaks
              19.5

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

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

	</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 viewerport -->
	<svg width="960" height="600"></svg>
	</body>

	<script>

	/*
	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.json("output.topojson"),
	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]) {
	console.log(promises)
	svg.append("g")
	.attr("class", "nhoods")
	.selectAll("path")
	.data(topojson.feature(pop, pop.objects.analysisneighborhoods).features)
	.enter().append("path")
	.attr("fill", function(d) { console.log(d) ; })
	.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>
	nhood	popdensity
	Bayview Hunters Point	11.4
	Bernal Heights	37.9
	Castro/Upper Market	38.4
	Chinatown	103.1
	Excelsior	44.2
	Financial District/South Beach	24.3
	Glen Park	19.2
	Golden Gate Park	0.1
	Haight Ashbury	50.7
	Hayes Valley	58.1
	Inner Richmond	47.2
	Inner Sunset	32
	Japantown	47.3
	Lakeshore	7.8
	Lincoln Park	1.3
	Lone Mountain/USF	48.7
	Marina	38.3
	McLaren Park	2.2
	Mission	48.6
	Mission Bay	20.2
	Nob Hill	97
	Noe Valley	39.1
	North Beach	39.4
	Oceanview/Merced/Ingleside	41.6
	Outer Mission	37.8
	Outer Richmond	39.2
	Pacific Heights	47.3
	Portola	31.1
	Potrero Hill	18.9
	Presidio	2.5
	Presidio Heights	33.3
	Russian Hill	56.4
	Seacliff	18.1
	South of Market	33.9
	Sunset/Parkside	29.9
	Tenderloin	112.3
	Treasure Island	5.4
	Twin Peaks	17.5
	Visitacion Valley	47.4
	West of Twin Peaks	19.5
	Western Addition	59.5