My first D3 map showing my travel across the US. This visualization was built by modifying choropleth example code by Scott Murray, tooltip example code by Malcolm Maclean, and legend code example by Mike Bostock.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<div class="graph"></div> | |
<script> | |
var width = 700, height = 400; | |
var svg = d3.select(".graph").append("svg") | |
.attr("viewBox", "0 0 " + (width) + " " + (height)) | |
.style("max-width", "700px"); | |
var url = "https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wfs?service=wfs&request=GetFeature&typeName=cbs_arrondissementsgebied_2019_gegeneraliseerd&outputFormat=json&srsName=EPSG:4326"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<div class="graph"></div> | |
<script> | |
var width = 700, height = 400; | |
var svg = d3.select(".graph").append("svg") | |
.attr("viewBox", "0 0 " + (width) + " " + (height)) | |
.style("max-width", "700px"); | |
var url = "https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wfs?service=wfs&request=GetFeature&typeName=cbs_arrondissementsgebied_2019_gegeneraliseerd&outputFormat=json&srsName=EPSG:4326"; | |
d3.json(url, function(error, mapdata) { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<style> | |
path { | |
fill: #ccc; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
path:hover { | |
fill: orange; |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style> | |
</style> | |
</head> | |
<body> | |
<script type='text/javascript'> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<style> | |
svg { | |
border: 1px solid red; | |
width: 600px; | |
height: 400px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<style> | |
path { | |
fill: #ccc; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
path:hover { | |
fill: orange; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<style> | |
path { | |
fill: #ccc; | |
stroke: #fff; | |
stroke-width: .5px; | |
} | |
path:hover { | |
fill: orange; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Import package | |
import requests | |
# Assign URL to variable: url | |
url = 'http://www.omdbapi.com/?apikey=72bc447a&t=social+network' | |
# Package the request, send the request and catch the response: r | |
r = requests.get(url) | |
# Decode the JSON data into a dictionary: json_data |