Skip to content

Instantly share code, notes, and snippets.

@SeabassWells

SeabassWells/.block

Created February 4, 2019 22:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SeabassWells/b484c221055bf31c53c365da8dc5f2ae to your computer and use it in GitHub Desktop.
Save SeabassWells/b484c221055bf31c53c365da8dc5f2ae to your computer and use it in GitHub Desktop.
Download ZIP
sf-map
Raw
.block
license: mit
Raw
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>
Raw
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);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment