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": "placeholder </a>",
	"popdensity": "placeholder</a>",
	"encampments": "placeholder</a>",
	"encampmentsacre": "placeholder</a>"
}

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

/* .counties {
  fill: none;
} */

/* .states {
  fill: none;
  stroke-width: 20;
  stroke: #9400D3;
  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>

<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">
        <p>The best way to understand the makeup of this country is data, not narrative. Pick which dataset is informative to you and see how it changes across states.</p>


  <div class="dropdown">
  	<select class="select_box" id="opts">
  		<p></p>
  		<option value="default">Select a dataset</option>
  		<option value="population">Population</option>
  		<option value="popdensity">Population Density</option>
      <option value="encampments">Encampments</option>
      <option value="encampmentsacre">Encampments per Acre</option>
  	</select>
  </div>

					</div>
				</div>

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

<script src="https://d3js.org/topojson.v2.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
// console.log("groovy")

//Alerts for browser compatibility
if (navigator.vendor ==  "Apple Computer, Inc." && !/Mobi|Android/i.test(navigator.userAgent)) {
	alert("This visualization doesn't work very well in Safari. Try using Chrome if you can!");
}

if (/Mobi|Android/i.test(navigator.userAgent)) {
    alert("This visualization doesn't work very well on mobile. Try using Chrome on Desktop if you can!")
}

var w = 1000;
var h = 650;

console.log("d3 executed!")

//Create variable for updating dataset
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 tooltip = d3.select("body .viz-row").append("div")
.attr("class", "tooltip")
.style("opacity", 0);

//Display data function

// load the dataset specified in the dropdown
function displayData(dataset) {

	console.log("displayData executed on " + dataset);

// the combining the json and values appears to be working
	// load the csv file with all the data
	d3.csv("SFData.csv", function(data) {
		//Set domain for color scale
		color.domain([
			d3.min(data, function(d) { return parseFloat(d[dataset]); }),
			d3.max(data, function(d) { return parseFloat(d[dataset]); })
		]);

		//Load in GeoJSON data with all the json
		d3.json("bs.json", function(json) {
			// json.transform.translate = [100,0]
			var jsonClone = JSON.parse(JSON.stringify(json));
			json = topojson.feature(json, json.objects.SFgeojson).features
			jsonClone = topojson.feature(jsonClone, jsonClone.objects.SFgeojson)

			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;
						// console.log(json[j].properties.value)
						break;
					}
				}

			}

			//Bind data and create one path per GeoJSON feature
			var projection = d3.geoIdentity()
											.reflectY(true)
											.fitSize([w,h],jsonClone)

			var pathFlipped = d3.geoPath()
			.projection(projection);

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

			mapPath.transition()
			.duration(900)
			.style("fill", function(d) {
				//Get data value
				var value = d.properties.value;
				if (value) {
					return "rgb(" + color(value) + ",0,0)";
				} else {
					//If default dataset
					if (dataset == "default") {
											console.log("2")
						return "black";
					//If any other dataset
					} else {
											console.log("3")
						return "#ccc";
					}
				}
			});

			mapPath.on("mouseover", function(d) {

				//Inject data value into paragraph

				//Remove old text
				d3.select(".blurb-row .dropdown #value-label")
				.remove()

				//Display new text
				var paragraph = d3.select(".blurb-row .dropdown")
				.append("p")
				.text(function() {
					return (d.properties.value);
				})
				.attr("id", "value-label")
				.classed("supreme", true)
				.style("font-size", "1em")
				.style("display", "inline")
				.style("margin-left", "30px");

				//Highlight current state
				d3.select(this)
				.transition()
				.duration(300)
				.style("opacity", .6);

			})
			.on("mouseout", function(d) {

				//Remove old text
				d3.select(".dropdown #value-label")
				.remove()

				//Return state to original opacity
				d3.select(this)
				.transition()
				.duration(350)
				.style("opacity", 1);

			});

		});

	});

};

//Display text function
function displayInformation(dataset) {

	//Load in dataset:description json file
	d3.json("descriptions.json", function(json) {
		var description = json[dataset];

		//Remove old text
		d3.select("#dataset-description")
		.remove()

		//Display new text
		var paragraph = d3.select("body .blurb-row")
		.append("p")
		.html(description)
		.attr("id", "dataset-description")
		.style("font-size", "1em")
		.style("font-family", "Futura, sans-serif")
		.style("font-style", "italic");

	});

}

//Load initial data and description
displayData("default");
displayInformation("default");

// handle on click event
d3.select('#opts')
  .on('change', function() {
    newData = d3.select(this).property('value');
    displayInformation(newData);
    displayData(newData);
});

## SFData.csv

          
            nhood
            population
            popdensity
            encampments
            encampmentsacre

            
              Bayview Hunters Point
              37600
              11.4
              1241
              0.376260638

            
              Bernal Heights
              26140
              37.9
              557
              0.807586075

            
              Castro/Upper Market
              21090
              38.4
              4607
              8.388278805

            
              Chinatown
              14820
              103.1
              141
              0.980910931

            
              Excelsior
              39340
              44.2
              82
              0.092130147

            
              Financial District/South Beach
              17460
              24.3
              5215
              7.257989691

            
              Glen Park
              8210
              19.2
              79
              0.184750305

            
              Golden Gate Park
              90
              0.1
              203
              0.225555556

            
              Haight Ashbury
              18050
              50.7
              1166
              3.275135734

            
              Hayes Valley
              18250
              58.1
              644
              2.050213699

            
              Inner Richmond
              22500
              47.2
              314
              0.658702222

            
              Inner Sunset
              29120
              32
              124
              0.136263736

            
              Japantown
              3650
              47.3
              128
              1.658739726

            
              Lakeshore
              14300
              7.8
              24
              0.013090909

            
              Lincoln Park
              320
              1.3
              9
              0.0365625

            
              Lone Mountain/USF
              18070
              48.7
              82
              0.220996126

            
              Marina
              25110
              38.3
              576
              0.878566308

            
              McLaren Park
              850
              2.2
              19
              0.049176471

            
              Mission
              58640
              48.6
              17388
              14.41092769

            
              Mission Bay
              10530
              20.2
              2141
              4.1071415

            
              Nob Hill
              22300
              97
              2957
              12.862287

            
              Noe Valley
              18650
              39.1
              55
              0.115308311

            
              North Beach
              12600
              39.4
              622
              1.944984127

            
              Oceanview/Merced/Ingleside
              28010
              41.6
              84
              0.124755444

            
              Outer Mission
              24270
              37.8
              129
              0.20091471

            
              Outer Richmond
              44870
              39.2
              331
              0.289173167

            
              Pacific Heights
              24070
              47.3
              631
              1.239979227

            
              Portola
              16410
              31.1
              157
              0.29754418

            
              Potrero Hill
              13770
              18.9
              2212
              3.036078431

            
              Presidio
              3830
              2.5
              9
              0.005874674

            
              Presidio Heights
              10720
              33.3
              85
              0.264039179

            
              Russian Hill
              17830
              56.4
              146
              0.461828379

            
              Seacliff
              2460
              18.1
              3
              0.022073171

            
              South of Market
              19180
              33.9
              12189
              21.54364442

            
              Sunset/Parkside
              81050
              29.9
              167
              0.06160765

            
              Tenderloin
              28220
              112.3
              3929
              15.63524805

            
              Treasure Island
              3090
              5.4
              7
              0.01223301

            
              Twin Peaks
              7410
              17.5
              30
              0.070850202

            
              Visitacion Valley
              18570
              47.4
              28
              0.071470113

            
              West of Twin Peaks
              38180
              19.5
              60
              0.030644316

            
              Western Addition
              22220
              59.5
              2134
              5.714356436
	{
	"default": "Select a dataset from the dropdown above, then mouse over any state to highlight and view data values.",
	"population": "placeholder </a>",
	"popdensity": "placeholder</a>",
	"encampments": "placeholder</a>",
	"encampmentsacre": "placeholder</a>"
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<style>

	/* .counties {
	fill: none;
	} */

	/* .states {
	fill: none;
	stroke-width: 20;
	stroke: #9400D3;
	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>

	<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">
	<p>The best way to understand the makeup of this country is data, not narrative. Pick which dataset is informative to you and see how it changes across states.</p>


	<div class="dropdown">
	<select class="select_box" id="opts">
	<p></p>
	<option value="default">Select a dataset</option>
	<option value="population">Population</option>
	<option value="popdensity">Population Density</option>
	<option value="encampments">Encampments</option>
	<option value="encampmentsacre">Encampments per Acre</option>
	</select>
	</div>

	</div>
	</div>

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

	<script src="https://d3js.org/topojson.v2.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>
	// console.log("groovy")

	//Alerts for browser compatibility
	if (navigator.vendor == "Apple Computer, Inc." && !/Mobi\|Android/i.test(navigator.userAgent)) {
	alert("This visualization doesn't work very well in Safari. Try using Chrome if you can!");
	}

	if (/Mobi\|Android/i.test(navigator.userAgent)) {
	alert("This visualization doesn't work very well on mobile. Try using Chrome on Desktop if you can!")
	}

	var w = 1000;
	var h = 650;

	console.log("d3 executed!")

	//Create variable for updating dataset
	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 tooltip = d3.select("body .viz-row").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	//Display data function

	// load the dataset specified in the dropdown
	function displayData(dataset) {

	console.log("displayData executed on " + dataset);

	// the combining the json and values appears to be working
	// load the csv file with all the data
	d3.csv("SFData.csv", function(data) {
	//Set domain for color scale
	color.domain([
	d3.min(data, function(d) { return parseFloat(d[dataset]); }),
	d3.max(data, function(d) { return parseFloat(d[dataset]); })
	]);

	//Load in GeoJSON data with all the json
	d3.json("bs.json", function(json) {
	// json.transform.translate = [100,0]
	var jsonClone = JSON.parse(JSON.stringify(json));
	json = topojson.feature(json, json.objects.SFgeojson).features
	jsonClone = topojson.feature(jsonClone, jsonClone.objects.SFgeojson)

	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;
	// console.log(json[j].properties.value)
	break;
	}
	}

	}

	//Bind data and create one path per GeoJSON feature
	var projection = d3.geoIdentity()
	.reflectY(true)
	.fitSize([w,h],jsonClone)

	var pathFlipped = d3.geoPath()
	.projection(projection);

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

	mapPath.transition()
	.duration(900)
	.style("fill", function(d) {
	//Get data value
	var value = d.properties.value;
	if (value) {
	return "rgb(" + color(value) + ",0,0)";
	} else {
	//If default dataset
	if (dataset == "default") {
	console.log("2")
	return "black";
	//If any other dataset
	} else {
	console.log("3")
	return "#ccc";
	}
	}
	});

	mapPath.on("mouseover", function(d) {

	//Inject data value into paragraph

	//Remove old text
	d3.select(".blurb-row .dropdown #value-label")
	.remove()

	//Display new text
	var paragraph = d3.select(".blurb-row .dropdown")
	.append("p")
	.text(function() {
	return (d.properties.value);
	})
	.attr("id", "value-label")
	.classed("supreme", true)
	.style("font-size", "1em")
	.style("display", "inline")
	.style("margin-left", "30px");

	//Highlight current state
	d3.select(this)
	.transition()
	.duration(300)
	.style("opacity", .6);

	})
	.on("mouseout", function(d) {

	//Remove old text
	d3.select(".dropdown #value-label")
	.remove()

	//Return state to original opacity
	d3.select(this)
	.transition()
	.duration(350)
	.style("opacity", 1);

	});

	});

	});

	};

	//Display text function
	function displayInformation(dataset) {

	//Load in dataset:description json file
	d3.json("descriptions.json", function(json) {
	var description = json[dataset];

	//Remove old text
	d3.select("#dataset-description")
	.remove()

	//Display new text
	var paragraph = d3.select("body .blurb-row")
	.append("p")
	.html(description)
	.attr("id", "dataset-description")
	.style("font-size", "1em")
	.style("font-family", "Futura, sans-serif")
	.style("font-style", "italic");

	});

	}

	//Load initial data and description
	displayData("default");
	displayInformation("default");

	// handle on click event
	d3.select('#opts')
	.on('change', function() {
	newData = d3.select(this).property('value');
	displayInformation(newData);
	displayData(newData);
	});
nhood	population	popdensity	encampments	encampmentsacre
Bayview Hunters Point	37600	11.4	1241	0.376260638
Bernal Heights	26140	37.9	557	0.807586075
Castro/Upper Market	21090	38.4	4607	8.388278805
Chinatown	14820	103.1	141	0.980910931
Excelsior	39340	44.2	82	0.092130147
Financial District/South Beach	17460	24.3	5215	7.257989691
Glen Park	8210	19.2	79	0.184750305
Golden Gate Park	90	0.1	203	0.225555556
Haight Ashbury	18050	50.7	1166	3.275135734
Hayes Valley	18250	58.1	644	2.050213699
Inner Richmond	22500	47.2	314	0.658702222
Inner Sunset	29120	32	124	0.136263736
Japantown	3650	47.3	128	1.658739726
Lakeshore	14300	7.8	24	0.013090909
Lincoln Park	320	1.3	9	0.0365625
Lone Mountain/USF	18070	48.7	82	0.220996126
Marina	25110	38.3	576	0.878566308
McLaren Park	850	2.2	19	0.049176471
Mission	58640	48.6	17388	14.41092769
Mission Bay	10530	20.2	2141	4.1071415
Nob Hill	22300	97	2957	12.862287
Noe Valley	18650	39.1	55	0.115308311
North Beach	12600	39.4	622	1.944984127
Oceanview/Merced/Ingleside	28010	41.6	84	0.124755444
Outer Mission	24270	37.8	129	0.20091471
Outer Richmond	44870	39.2	331	0.289173167
Pacific Heights	24070	47.3	631	1.239979227
Portola	16410	31.1	157	0.29754418
Potrero Hill	13770	18.9	2212	3.036078431
Presidio	3830	2.5	9	0.005874674
Presidio Heights	10720	33.3	85	0.264039179
Russian Hill	17830	56.4	146	0.461828379
Seacliff	2460	18.1	3	0.022073171
South of Market	19180	33.9	12189	21.54364442
Sunset/Parkside	81050	29.9	167	0.06160765
Tenderloin	28220	112.3	3929	15.63524805
Treasure Island	3090	5.4	7	0.01223301
Twin Peaks	7410	17.5	30	0.070850202
Visitacion Valley	18570	47.4	28	0.071470113
West of Twin Peaks	38180	19.5	60	0.030644316
Western Addition	22220	59.5	2134	5.714356436