Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8
mpmckenna8 / index.html
Last active August 29, 2015 13:57
Mapbox.js w/ geojson layer of polygons w/ popups
<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;
@mpmckenna8
mpmckenna8 / index.html
Last active August 29, 2015 13:57
Maptimes w/ a Custom Icon
<!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"/>
@mpmckenna8
mpmckenna8 / index.html
Last active August 29, 2015 13:57
SF BOS d3.js geojon data fixed
<!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>
@mpmckenna8
mpmckenna8 / index.html
Last active August 29, 2015 13:58
Leaflet w/ geojson Polygons & addStyle()
<!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>
@mpmckenna8
mpmckenna8 / README.md
Last active August 29, 2015 13:58 — forked from mbostock/.block
@mpmckenna8
mpmckenna8 / index.html
Last active August 29, 2015 13:58
BOS label geojson
<!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!

@mpmckenna8
mpmckenna8 / index.html
Last active August 29, 2015 13:59
CSS styling some topojson data D3
<!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">
@mpmckenna8
mpmckenna8 / index.html
Last active August 29, 2015 13:59
Label topojson data D3
<!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 */