SeabassWells/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## bs.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              bs.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## descriptions.json
{
	"default": "Select a dataset from the dropdown above, then mouse over any state to highlight and view data values.",
  "population": "Total manufacturing output in $Billions, 2016. Source: <a href='http://www.nam.org/Data-and-Reports/State-Manufacturing-Data/State-Manufacturing-Data/April-2017/2017-State-Manufacturing-Data-Table/' target='_blank'>National Association of Manufacturers</a>",
	"popdensity": "Unemployment rate as a percentage of the labor force and defined by place of residence, March 2018. Source: <a href='https://www.bls.gov/web/laus/laumstrk.htm' target='_blank'>Bureau of Labor Statistics</a>",
	"encampments": "Total population, 2010. Source: <a href='http://www.ipl.org/div/stateknow/popchart.html' target='_blank'>IPL2</a>",
	"encampmentsacre": "Cash receipts by commodity, 2016. Source: <a href='https://data.ers.usda.gov/reports.aspx?ID=17844' target='_blank'>USDA Economic Research Service</a>"
}

## index.html
<!DOCTYPE html>

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

</style>

</head>
<body>

<div class="container-fluid">
    <div class="row" style="padding-bottom: 35px;">
      <div class="col-md-8 offset-md-2">
        <h1 class="supreme"><a href="/" style="color: white;">&larr;</a> San Fran </h1>
      </div>
    </div>
    <!-- begin content -->
    <div class="row" style="padding-bottom: 25px;">
      <div class="col-md-8 offset-md-2 blurb-row">
					</div>
				</div>

<!-- viz row -->
<div class="row">
  <div class="col-md-8 offset-md-2 viz-row">
  </div>
</div>
</div>

<script src="http://d3js.org/topojson.v1.min.js"></script>
<script  type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
<script  type="text/javascript" src="main.js"></script>

</body>

## main.js
// try with one dataset

console.log("updated")

var w = 1000;
var h = 650;

var newData;

var svg = d3.select("body .viz-row")
            .append("svg")
              .attr("width", w)
              .attr("height", h);

var path = d3.geoPath()

var color = d3.scaleLinear()
.range([0,255])

var dataset = "population"

// var projection = d3.geoIdentity()
// 								.reflectY(true)
// 								.fitSize([w,h],topojson.feature(pop, pop.objects.SFgeojson))

//Define path generator, using the Albers USA projection
var path = d3.geoPath()


d3.csv("SFData.csv", function(data) {
  console.log(data["population"])
  // console.log(data[population])
		color.domain([
			d3.min(data, function(d) { return parseFloat(d[dataset]); }),
			d3.max(data, function(d) { return parseFloat(d[dataset]); })
		]);

	d3.json("bs.json", function(json) {
		json = topojson.feature(json, json.objects.SFgeojson).features

		for (var i = 0; i < data.length; i++) {
			var dataState = data[i].nhood;
			var dataValue = parseFloat(data[i][dataset]);
			for (var j = 0; j < json.length; j++) {
					var jsonState = json[j].properties.nhood;
					if (dataState == jsonState) {
						json[j].properties.value = dataValue;
						break;
					}
				}
			}

      console.log(json)

			mapPath = svg.selectAll("path")
			.data(json).enter()
			.append("path")
			.attr("d", path);

      console.log(json)

			mapPath.transition()
			.duration(900)
			.style("fill", function(d) {
				var value = d.properties.value;
				if (value) {
					return "rgb(" + color(value) + ",0,0)";
				} else {
					if (dataset == "default") {
						return "black";
					} else {
						return "#ccc";
					}
				}
			})

    })

  })

## SFData.csv

          
            nhood
            population

            
              Bayview Hunters Point
              37600

            
              Bernal Heights
              26140

            
              Castro/Upper Market
              21090

            
              Chinatown
              14820

            
              Excelsior
              39340

            
              Financial District/South Beach
              17460

            
              Glen Park
              8210

            
              Golden Gate Park
              90

            
              Haight Ashbury
              18050

            
              Hayes Valley
              18250

            
              Inner Richmond
              22500

            
              Inner Sunset
              29120

            
              Japantown
              3650

            
              Lakeshore
              14300

            
              Lincoln Park
              320

            
              Lone Mountain/USF
              18070

            
              Marina
              25110

            
              McLaren Park
              850

            
              Mission
              58640

            
              Mission Bay
              10530

            
              Nob Hill
              22300

            
              Noe Valley
              18650

            
              North Beach
              12600

            
              Oceanview/Merced/Ingleside
              28010

            
              Outer Mission
              24270

            
              Outer Richmond
              44870

            
              Pacific Heights
              24070

            
              Portola
              16410

            
              Potrero Hill
              13770

            
              Presidio
              3830

            
              Presidio Heights
              10720

            
              Russian Hill
              17830

            
              Seacliff
              2460

            
              South of Market
              19180

            
              Sunset/Parkside
              81050

            
              Tenderloin
              28220

            
              Treasure Island
              3090

            
              Twin Peaks
              7410

            
              Visitacion Valley
              18570

            
              West of Twin Peaks
              38180

            
              Western Addition
              22220
	{
	"default": "Select a dataset from the dropdown above, then mouse over any state to highlight and view data values.",
	"population": "Total manufacturing output in $Billions, 2016. Source: <a href='http://www.nam.org/Data-and-Reports/State-Manufacturing-Data/State-Manufacturing-Data/April-2017/2017-State-Manufacturing-Data-Table/' target='_blank'>National Association of Manufacturers</a>",
	"popdensity": "Unemployment rate as a percentage of the labor force and defined by place of residence, March 2018. Source: <a href='https://www.bls.gov/web/laus/laumstrk.htm' target='_blank'>Bureau of Labor Statistics</a>",
	"encampments": "Total population, 2010. Source: <a href='http://www.ipl.org/div/stateknow/popchart.html' target='_blank'>IPL2</a>",
	"encampmentsacre": "Cash receipts by commodity, 2016. Source: <a href='https://data.ers.usda.gov/reports.aspx?ID=17844' target='_blank'>USDA Economic Research Service</a>"
	}
	<!DOCTYPE html>

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

	</style>

	</head>
	<body>

	<div class="container-fluid">
	<div class="row" style="padding-bottom: 35px;">
	<div class="col-md-8 offset-md-2">
	<h1 class="supreme"><a href="/" style="color: white;">←</a> San Fran </h1>
	</div>
	</div>
	<!-- begin content -->
	<div class="row" style="padding-bottom: 25px;">
	<div class="col-md-8 offset-md-2 blurb-row">
	</div>
	</div>

	<!-- viz row -->
	<div class="row">
	<div class="col-md-8 offset-md-2 viz-row">
	</div>
	</div>
	</div>

	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
	<script type="text/javascript" src="main.js"></script>

	</body>
	// try with one dataset

	console.log("updated")

	var w = 1000;
	var h = 650;

	var newData;

	var svg = d3.select("body .viz-row")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	var path = d3.geoPath()

	var color = d3.scaleLinear()
	.range([0,255])

	var dataset = "population"

	// var projection = d3.geoIdentity()
	// .reflectY(true)
	// .fitSize([w,h],topojson.feature(pop, pop.objects.SFgeojson))

	//Define path generator, using the Albers USA projection
	var path = d3.geoPath()



	d3.csv("SFData.csv", function(data) {
	console.log(data["population"])
	// console.log(data[population])
	color.domain([
	d3.min(data, function(d) { return parseFloat(d[dataset]); }),
	d3.max(data, function(d) { return parseFloat(d[dataset]); })
	]);

	d3.json("bs.json", function(json) {
	json = topojson.feature(json, json.objects.SFgeojson).features

	for (var i = 0; i < data.length; i++) {
	var dataState = data[i].nhood;
	var dataValue = parseFloat(data[i][dataset]);
	for (var j = 0; j < json.length; j++) {
	var jsonState = json[j].properties.nhood;
	if (dataState == jsonState) {
	json[j].properties.value = dataValue;
	break;
	}
	}
	}

	console.log(json)

	mapPath = svg.selectAll("path")
	.data(json).enter()
	.append("path")
	.attr("d", path);

	console.log(json)

	mapPath.transition()
	.duration(900)
	.style("fill", function(d) {
	var value = d.properties.value;
	if (value) {
	return "rgb(" + color(value) + ",0,0)";
	} else {
	if (dataset == "default") {
	return "black";
	} else {
	return "#ccc";
	}
	}
	})

	})

	})
	nhood	population
	Bayview Hunters Point	37600
	Bernal Heights	26140
	Castro/Upper Market	21090
	Chinatown	14820
	Excelsior	39340
	Financial District/South Beach	17460
	Glen Park	8210
	Golden Gate Park	90
	Haight Ashbury	18050
	Hayes Valley	18250
	Inner Richmond	22500
	Inner Sunset	29120
	Japantown	3650
	Lakeshore	14300
	Lincoln Park	320
	Lone Mountain/USF	18070
	Marina	25110
	McLaren Park	850
	Mission	58640
	Mission Bay	10530
	Nob Hill	22300
	Noe Valley	18650
	North Beach	12600
	Oceanview/Merced/Ingleside	28010
	Outer Mission	24270
	Outer Richmond	44870
	Pacific Heights	24070
	Portola	16410
	Potrero Hill	13770
	Presidio	3830
	Presidio Heights	10720
	Russian Hill	17830
	Seacliff	2460
	South of Market	19180
	Sunset/Parkside	81050
	Tenderloin	28220
	Treasure Island	3090
	Twin Peaks	7410
	Visitacion Valley	18570
	West of Twin Peaks	38180
	Western Addition	22220