Part of a series of examples. See:
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
<Html> | |
<Head> | |
<!-- want to ask about this, is this their default styling for tiles or rules for cartoCSS and can I can change it up? --> | |
<link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' /> | |
<script src='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script> | |
<script src="olymStates.geojson" type="text/javascript"></script> | |
<Style> | |
#map { | |
width:900px; |
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> | |
<html> | |
<head> | |
<title>Multiple concurrent popups w/ leaflet</title> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
<!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]--> | |
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script> | |
<link type="text/css" rel="stylesheet" href="mtLeaf.css"/> |
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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>D3: Mercator projection applied to stuff</title> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<style type="text/css"> | |
/* No style rules here yet */ | |
</style> |
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> | |
<html> | |
<head> | |
<title>Leaflet w/ geojson Polygons & addStyle()</title> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
<!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]--> | |
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script> | |
<script type="text/javascript" src="./sfBOSleaf.geojson" ></script> |
The gnomonic projection is available as d3.geo.gnomonic. See also the interactive version.
This is copied from mbostock's example
It shows what happens when you start a transition and select shit that would also include shit but it's not inside the async function where it's getting created so it never gets selected and transitioned.
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> | |
<html> | |
<head> | |
<title>Leaflet w/ geojson Polygons & addStyle()</title> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
<!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]--> | |
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script> | |
<script type="text/javascript" src="http://bl.ocks.org/mpmckenna8/raw/9959871/sfBOSleaf.geojson" ></script> |
Based on Mike Bostock’s [World Map][0], modified to automatically colour countries such that no adjacent countries share the same colour.
This is done by extracting the topology via [TopoJSON][1] and greedily picking colours until the constraint is fulfilled.
See also: [Graph coloring][2] on Wikipedia.
Update: Greedily colouring is now performed in a single line, thanks to 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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>D3: Mercator projection applied to stuff</title> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<style type="text/css"> | |
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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>SFBOS districts w/ labels</title> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<style type="text/css"> | |
/* No style rules here yet */ |