Skip to content

Instantly share code, notes, and snippets.

@SeabassWells

SeabassWells/.block

Created March 13, 2019 20:42
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/b70b7438d2d986544361c0ee20f62cff to your computer and use it in GitHub Desktop.
Save SeabassWells/b70b7438d2d986544361c0ee20f62cff to your computer and use it in GitHub Desktop.
Download ZIP
neighborhood
Raw
.block
license: mit
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.
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;
} */
/* path {
stroke: #737373;
stroke-width: .1;
} */
#tooltip {
color: #222;
background: #fff;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 2px;
box-shadow: 0px 0px 2px 0px #a6a6a6;
opacity: 0.9;
}
.hidden {
display: none;
}
.header {
font-family: Garamond;
}
#intro-text {
font-size: 1em;
font-family: Palatino, sans-serif;
}
/* stroke: rgb(255, 255, 255);
stroke-width: .5px */
</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">
<div class="col-md-8 offset-md-2">
<h1 class="header"> A Walk through the Neighorhoods </h1>
</div>
</div>
<!-- begin content -->
<div class="row">
<div class="col-md-8 offset-md-2 blurb-row">
<p id="intro-text">People say that San Francisco is many cities, crumpled into one. Pick which dataset is relevant to you and see how it varies across the city.</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="popdensityperacre">Population Density</option>
<option value="percapitaincome">Income</option>
<option value="percentnonwhite">Racial Diversity</option>
<option value="percentinpoverty">Poverty</option>
<option value="medianhomevalue">Home Value</option>
<option value="unemploymentrate">Unemployment</option>
<option value="percapitacriminalarrests">Crime</option>
<option value="percapitaencampments">Homelessness</option>
<option value="medianhoursofsummerfog">Fog</option>
<option value="percentinliquefaction">Liquefaction</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="w3color.js"></script>
<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
var w = 1000;
var h = 620;
// make the hover-over box
// make the dropdown and title
// make the city name and position
// add the extra information
function cmykToRgb(c, m, y, k) {
var r, g, b;
r = Math.round(255 - ((Math.min(1, c * (1 - k) + k)) * 255));
g = Math.round(255 - ((Math.min(1, m * (1 - k) + k)) * 255));
b = Math.round(255 - ((Math.min(1, y * (1 - k) + k)) * 255));
return "rgb("+r+","+g+","+b+")";
}
//Create variable for updating dataset
var newData;
var svg = d3.select("body .viz-row")
.append("svg")
.attr("width", w)
.attr("height", h);
//Define path generator
var path = d3.geoPath()
//
// var a = "rgb(0, 227, 198)"
// var b = "rgb(190, 148, 188)"
// var colorCheck = d3.interpolateRgb(a, b)
// var colorCheck = d3.interpolateRgb("blue", "red");
var color = d3.scaleLinear()
.range([0,255])
var colorcmyk = d3.scaleLinear()
// .range([1,0])
.range([0,1])
var tooltip = d3.select("body .viz-row")
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("opacity", 0);
//Display data function
// load the dataset specified in the dropdown
function displayData(dataset) {
// var max = []
console.log("displayData executed on " + dataset);
// load the csv file with all the data
d3.csv("TheSFData.csv", function(data) {
//Set domain for color scale
// solves a problem caused by the extroardinary ratio of crimes to people in golden gate park
if (dataset === "percapitacriminalarrests") {
colorcmyk.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(200); })
]);
color.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(200); })
]);
}
else if (dataset === "percapitaencampments") {
colorcmyk.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(600); })
]);
color.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(600); })
]);
}
else {
colorcmyk.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(d[dataset]); })
]);
color.domain([
d3.min(data, function(d) { return parseFloat(d[dataset]); }),
d3.max(data, function(d) { return parseFloat(d[dataset]); })
]);
}
// max = d3.max(data, function(d) { return parseFloat(d[dataset]); })
// console.log(max)
//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);
const mapSelection = svg.selectAll("path")
.data(json)
mapSelection
.enter()
.append("path")
.attr("d", pathFlipped)
.style("fill","#f1ebd4")
.style("stroke","#aaaaaa")
.style("stroke-width", "1")
if (dataset == "default") {
for (j in json) {
if ("Financial District/South Beach".includes(json[j].properties.nhood)) {
svg.append("text")
.text("Financial District/")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'})
.append("tspan")
.text("South Beach")
}
else if ("Castro/Upper Market".includes(json[j].properties.nhood)){
svg.append("text")
.text("Castro/")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] - 5) + ')'})
.append("tspan")
.text("Upper Market")
}
else if ("Treasure Island".includes(json[j].properties.nhood)){
svg.append("text")
.text("Treasure")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] - 30) + ')'})
.append("tspan")
.text("Island")
}
else if ("Lone Mountain/USF".includes(json[j].properties.nhood)){
svg.append("text")
.text("Lone Mountain")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 9) + ')'})
}
else if ("Oceanview/Merced/Ingleside".includes(json[j].properties.nhood)){
svg.append("text")
.text("Oceanview/")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 35) + ',' + (pathFlipped.centroid(json[j])[1] - 5) + ')'})
.append("tspan")
.text("Merced/")
.append("tspan")
.text("Ingleside")
.attr("id","nested-text")
}
else if (json[j].properties.nhood === "Presidio Heights") {
svg.append("text")
.text("Presidio")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] ) + ')'})
.append("tspan")
.text("Heights")
}
else if ("Pacific Heights".includes(json[j].properties.nhood)){
svg.append("text")
.text("Pacific")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] -5) + ')'})
.append("tspan")
.text("Heights")
}
else if ("Russian Hill".includes(json[j].properties.nhood)){
svg.append("text")
.text("Russian")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 12) + ',' + (pathFlipped.centroid(json[j])[1] -5) + ')'})
.append("tspan")
.text("Hill")
}
else if ("Sunset/Parkside".includes(json[j].properties.nhood)){
svg.append("text")
.text("Sunset/")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 50) + ',' + (pathFlipped.centroid(json[j])[1] - 50 ) + ')'})
.append("tspan")
.text("Parkside")
}
else if (json[j].properties.nhood === "Inner Richmond"){
svg.append("text")
.text("Inner")
.attr('transform', function(d) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] -5 ) + ')'})
.append("tspan")
.text("Richmond")
}
else {
svg.append("text")
.text(json[j].properties.nhood)
.attr('transform', function(d) {
if (["Outer Richmond"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 50) + ',' + (pathFlipped.centroid(json[j])[1] + 10) + ')'}
else if (["Golden Gate Park"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 60) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Sunset/Parkside"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 53) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Bayview Hunters Point"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 50) + ',' + (pathFlipped.centroid(json[j])[1] + 20) + ')'}
else if (["Visitacion Valley"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 40) + ',' + (pathFlipped.centroid(json[j])[1] + 14) + ')'}
else if (["Excelsior"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 45) + ',' + (pathFlipped.centroid(json[j])[1] + 40) + ')'}
else if (["Bernal Heights"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] - 15) + ')'}
else if (["West of Twin Peaks"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 50) + ',' + (pathFlipped.centroid(json[j])[1] + 20) + ')'}
else if (["Portola"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 10) + ')'}
else if (["Potrero Hill"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 35) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Mission Bay"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 43) + ',' + (pathFlipped.centroid(json[j])[1] + 20) + ')'}
else if (["Inner Sunset"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 40) + ',' + (pathFlipped.centroid(json[j])[1] - 5) + ')'}
else if (["Lincoln Park"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Seacliff"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] ) + ')'}
else if (["Glen Park"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Haight Ashbury"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Noe Valley"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 35) + ',' + (pathFlipped.centroid(json[j])[1] + 10) + ')'}
else if (["McLaren Park"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Twin Peaks"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] - 3) + ')'}
else if (["Treasure Island"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1] - 30) + ')'}
else if (["Outer Mission"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0])) + ',' + (pathFlipped.centroid(json[j])[1] - 20) + ')'}
else if (["Mission"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] - 10) + ')'}
else if (["Chinatown"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 15) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["North Beach"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1]) + ')'}
else if (["Tenderloin"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1]) + ')'} // else if (["Pacific Heights"].includes(json[j].properties.nhood)) {
// return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 40) + ',' + (pathFlipped.centroid(json[j])[1] - 5) + ')'}
// else if (["Russian Hill"].includes(json[j].properties.nhood)) {
// return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 15) + ',' + (pathFlipped.centroid(json[j])[1] + 5) + ')'}
else if (["Nob Hill"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] + 15) + ')'}
else if (["Marina"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 30) + ',' + (pathFlipped.centroid(json[j])[1]) + ')'}
// else if (["Presidio Heights"].includes(json[j].properties.nhood)) {
// return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 25) + ',' + (pathFlipped.centroid(json[j])[1] - 7) + ')'}
else if (["Japantown"].includes(json[j].properties.nhood)) {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 20) + ',' + (pathFlipped.centroid(json[j])[1] + 3) + ')'}
else {
return 'translate(' + (parseFloat(pathFlipped.centroid(json[j])[0]) - 35) + ',' + (pathFlipped.centroid(json[j])[1] + 10) + ')'
}
})
}
}
var addLineBreak = svg.selectAll("tspan")
.attr('x', '0')
.attr('y', '20')
var addLineBreakSpecial = svg.selectAll("#nested-text")
.attr('x', '0')
.attr('y', '40')
var mapLabel = svg.selectAll("text")
.attr('font-size','10 pt')
.attr('fill','#787773')
.attr('text-shadow','#000 0px 0px 0.5px')
.attr('id','mapLabel')
}
// add pause
// if its quick, try the random color scheme from bl.ocks
// re-arrange the name when it's in its final place
else {
//Remove old text
d3.selectAll("#mapLabel")
.remove()
}
mapSelection.transition()
.duration(900)
.style("fill", function(d) {
//Get data value
var value = d.properties.value;
if (value || value == "0") {
// console.log("1")
// console.log(colorCheck(value/max))
// console.log(value/max)
// // return colorCheck(value/max);
// console.log(value)
// console.log(colorcmyk(value))
return "rgb(" + color(value) + ",0,0)";
// return cmykToRgb(colorcmyk(value), .5);
// return cmykToRgb(colorcmyk(value), .02, .12, .05);
// return cmykToRgb(.98,0,.15,colorcmyk(value));
} else {
//If default dataset
if (dataset == "default") {
// console.log("2")
return "#f1ebd4";
//If any other dataset
} else {
// console.log("3")
// return "#f1ebd4";
return "#000";
}
}
});
// var tooltip = d3.select(".viz-row")
// .append("div")
// .attr("id", "tooltip")
// .style("position", "absolute")
// .style("z-index", "10")
// .style("visibility", "hidden")
// .text("a simple tooltip");
mapSelection.on("mouseover", function(d) {
//add hover over box
//Inject data value into paragraph
//Remove old text
d3.select(".blurb-row .dropdown #value-label")
.remove()
// remove old
// d3.select("#tooltip")
// .style("visibility","visibile")
//
// .on("mouseover", function(){return tooltip.style("visibility", "visible");})
// .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
// .on("mouseout", function(){return tooltip.style("visibility", "hidden");});
//Display new text
var paragraph = d3.select(".blurb-row .dropdown")
.append("p")
.text(function() {
var value = d.properties.value;
if (value || value == "0") {
//Based on the dataset, we'll return different tooltips (formatting in terms of percentages, etc.)
if (["percapitaincome", "medianhomevalue"].includes(dataset)) {
return (d.properties.nhood + ": $" + d.properties.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
} else if (["percentnonwhite", "percentinpoverty", "unemploymentrate",
"percentinliquefaction"].includes(dataset)){
return (d.properties.nhood + ": " + d.properties.value + "%");
} else if (["medianhoursofsummerfog"].includes(dataset)){
return (d.properties.nhood + ": " + d.properties.value + " hours");
} else if (["popdensityperacre", "population"].includes(dataset)){
return (d.properties.nhood + ": " + d.properties.value + "K");
} else if (["percapitacriminalarrests", "percapitaencampments"].includes(dataset)){
return (d.properties.nhood + ": " + d.properties.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
} if (dataset=="default"){
return (d.properties.nhood);
} else {
return (d.properties.nhood + ": " + d.properties.value);
}
}
else {
return "-"
}
})
.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("mouseover", function(){return tooltip.style("visibility", "visible");})
// .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
// .on("mouseout", function(){return tooltip.style("visibility", "hidden");});
})
.on("mousemove", function(d,i) {
var mouse = d3.mouse(svg.node()).map( function(d) { return parseInt(d); } );
tooltip
.classed("hidden", false)
.attr("style", "left:"+(mouse[0]+25)+"px;top:"+mouse[1]+"px")
.html(d.properties.nhood)
})
.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);
tooltip.classed("hidden", true)
});
// // just the pop over
// mapSelection.on("mouseover", function(d) {
//
// // add text box
// d3.select(this)
// .append("div")
// .attr("id", "tooltip")
// .style("z-index", "10")
// .text("a simple tooltip")
// .style("position", "absolute")
// .style("top", (d3.event.pageY-10)+"px")
// .style("left",(d3.event.pageX+10)+"px")
// .style("visibility","visible")
//
// });
//
// mapSelection.on("mousemove", function(d) {
//
// // move text box
// d3.select("#tooltip")
// .style("top", (d3.event.pageY-10)+"px")
// .style("left",(d3.event.pageX+10)+"px")
// .style("visibility","visible")
// });
//
// .on("mouseout", function(d) {
//
//
// d3.select(this)
// .append("div")
// .attr("id", "tooltip")
// .style("z-index", "10")
// .text("a simple tooltip")
// .style("position", "absolute")
// .style("top", (d3.event.pageY-10)+"px")
// .style("left",(d3.event.pageX+10)+"px");
//
// // .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
// // .on("mouseout", function(){return tooltip.style("visibility", "hidden");});
//
// // remove old
// d3.select("#tooltip")
// .style("visibility","visibile")
});
});
};
// https://socviz.co/maps.html#map-u.s.-state-level-data
// I like those colors a lot ^
//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", "Georgia, 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