Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/cali.json

Last active August 29, 2015 14:01
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 mpmckenna8/f63960e4c8970f1691da to your computer and use it in GitHub Desktop.
Save mpmckenna8/f63960e4c8970f1691da to your computer and use it in GitHub Desktop.
Download ZIP
Cali d3 black and orange simple
Raw
readme.md

The first d3 map I tried to make with data I made from Natural Earth stuff basically trying to apply mbostocks Let's make a map tutorial to do my own thing.

Go giants!

Display the source blob
Display the rendered blob
Raw
cali.json
{"type":"Topology","transform":{"scale":[0.001024766028874296,0.000946834953985681],"translate":[-124.37165376163607,32.53336526988928]},"objects":{"casubun":{"type":"GeometryCollection","geometries":[{"type":"MultiPolygon","arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6]]],"id":"US"}]},"calcities":{"type":"GeometryCollection","geometries":[{"type":"Point","coordinates":[2050,5640],"properties":{"name":"Berkeley"}},{"type":"Point","coordinates":[7098,146],"properties":{"name":"National City"}},{"type":"Point","coordinates":[558,7155],"properties":{"name":"Mendocino"}},{"type":"Point","coordinates":[3593,3267],"properties":{"name":"Paso Robles"}},{"type":"Point","coordinates":[6805,1488],"properties":{"name":"Riverside"}},{"type":"Point","coordinates":[5005,3410],"properties":{"name":"Delano"}},{"type":"Point","coordinates":[2009,5306],"properties":{"name":"San Mateo"}},{"type":"Point","coordinates":[2063,5892],"properties":{"name":"Vallejo"}},{"type":"Point","coordinates":[277,8821],"properties":{"name":"Arcata"}},{"type":"Point","coordinates":[3007,5729],"properties":{"name":"Stockton"}},{"type":"Point","coordinates":[7172,2498],"properties":{"name":"Barstow"}},{"type":"Point","coordinates":[6910,2116],"properties":{"name":"Victorville"}},{"type":"Point","coordinates":[6082,1718],"properties":{"name":"Pasadena"}},{"type":"Point","coordinates":[4933,4005],"properties":{"name":"Visalia"}},{"type":"Point","coordinates":[8601,274],"properties":{"name":"El Centro"}},{"type":"Point","coordinates":[3623,2904],"properties":{"name":"San Luis Obispo"}},{"type":"Point","coordinates":[3796,5037],"properties":{"name":"Merced"}},{"type":"Point","coordinates":[2689,6979],"properties":{"name":"Yuba City"}},{"type":"Point","coordinates":[1933,8506],"properties":{"name":"Redding"}},{"type":"Point","coordinates":[1631,6249],"properties":{"name":"Santa Rosa"}},{"type":"Point","coordinates":[6867,726],"properties":{"name":"Oceanside"}},{"type":"Point","coordinates":[3300,5410],"properties":{"name":"Modesto"}},{"type":"Point","coordinates":[6384,1211],"properties":{"name":"Irvine"}},{"type":"Point","coordinates":[1133,6993],"properties":{"name":"Ukiah"}},{"type":"Point","coordinates":[9522,2445],"properties":{"name":"Needles"}},{"type":"Point","coordinates":[5833,5102],"properties":{"name":"Bishop"}},{"type":"Point","coordinates":[7649,1314],"properties":{"name":"Palm Springs"}},{"type":"Point","coordinates":[3840,2542],"properties":{"name":"Santa Maria"}},{"type":"Point","coordinates":[4906,3880],"properties":{"name":"Tulare"}},{"type":"Point","coordinates":[2012,9270],"properties":{"name":"Mt. Shasta"}},{"type":"Point","coordinates":[167,9741],"properties":{"name":"Crescent City"}},{"type":"Point","coordinates":[6063,1324],"properties":{"name":"Long Beach"}},{"type":"Point","coordinates":[5222,2996],"properties":{"name":"Bakersfield"}},{"type":"Point","coordinates":[2099,5530],"properties":{"name":"Oakland"}},{"type":"Point","coordinates":[6085,2286],"properties":{"name":"Lancaster"}},{"type":"Point","coordinates":[2474,7599],"properties":{"name":"Chico"}},{"type":"Point","coordinates":[2418,4295],"properties":{"name":"Monterey"}},{"type":"Point","coordinates":[2664,4382],"properties":{"name":"Salinas"}},{"type":"Point","coordinates":[2289,4688],"properties":{"name":"Santa Cruz"}},{"type":"Point","coordinates":[6899,1678],"properties":{"name":"San Bernardino"}},{"type":"Point","coordinates":[4539,2008],"properties":{"name":"Santa Barbara"}},{"type":"Point","coordinates":[4488,4451],"properties":{"name":"Fresno"}},{"type":"Point","coordinates":[219,8733],"properties":{"name":"Eureka"}},{"type":"Point","coordinates":[2459,5036],"properties":{"name":"San Jose"}},{"type":"Point","coordinates":[2830,6383],"properties":{"name":"Sacramento"}},{"type":"Point","coordinates":[7016,305],"properties":{"name":"San Diego"}},{"type":"Point","coordinates":[1907,5530],"properties":{"name":"San Francisco"}},{"type":"Point","coordinates":[6040,1540],"properties":{"name":"Los Angeles"}}]}},"arcs":[[[5876,311],[-57,-10],[-63,22],[-54,102],[-60,80],[32,22],[48,-77],[122,-116],[32,-23]],[[4814,722],[-43,-2],[-60,10],[-30,57],[48,4],[46,-8],[35,-45],[4,-16]],[[5878,900],[49,-78],[-71,10],[-74,-4],[-22,42],[-22,59],[-15,15],[-51,5],[-4,5],[-6,29],[14,14],[159,-66],[43,-31]],[[4223,1463],[-68,-15],[-52,14],[-83,102],[176,13],[75,-44],[11,-12],[-59,-58]],[[3967,1575],[-52,-2],[-80,11],[28,24],[44,18],[14,-13],[46,-38]],[[4381,1633],[198,-54],[107,26],[20,-26],[-13,-23],[-241,-41],[-74,29],[-7,39],[-25,38],[35,12]],[[140,9999],[266,0],[257,0],[258,0],[257,0],[257,0],[257,0],[258,0],[257,0],[257,0],[258,0],[257,0],[257,0],[257,0],[258,0],[257,0],[257,0],[0,-198],[0,-198],[0,-198],[0,-198],[0,-198],[0,-198],[1,-199],[0,-198],[0,-198],[0,-198],[0,-198],[0,-198],[0,-198],[0,-198],[0,-198],[0,-198],[229,-173],[228,-172],[229,-173],[228,-173],[229,-172],[228,-173],[229,-173],[228,-172],[179,-146],[179,-145],[179,-146],[179,-145],[179,-146],[179,-146],[179,-145],[179,-146],[247,-209],[248,-209],[248,-209],[248,-210],[248,-209],[247,-209],[248,-210],[265,-223],[0,-89],[52,-119],[156,-216],[18,-52],[2,-1],[6,-54],[61,-59],[146,-82],[33,-40],[0,-3],[-1,-29],[-37,-35],[-161,-118],[-87,-96],[-89,-155],[14,-126],[-4,-105],[-22,-82],[-34,-76],[-45,-70],[-47,-41],[-50,-14],[-17,-92],[15,-170],[55,-103],[95,-37],[58,-56],[21,-76],[-8,-74],[-38,-73],[-64,-40],[-135,-11],[-1,0],[-3,-10],[-112,-11],[-279,-23],[-279,-22],[-279,-23],[-280,-23],[-279,-22],[-279,-23],[-279,-22],[-280,-23],[-2,7],[-7,115],[-45,41],[-58,-25],[-27,150],[15,71],[-7,69],[-55,171],[-145,206],[-313,257],[-160,85],[-125,109],[-79,30],[-100,8],[-29,-49],[-114,34],[17,120],[-110,168],[-91,19],[-227,-11],[-304,92],[-90,55],[-31,99],[-143,86],[-188,83],[-104,-19],[-137,13],[-195,61],[-113,7],[-222,-18],[-83,13],[-76,76],[-83,39],[17,93],[-10,85],[12,67],[-37,145],[29,134],[-25,48],[-47,38],[-147,55],[-27,69],[25,95],[-39,63],[-120,59],[-112,133],[-143,73],[-58,123],[-88,76],[-31,67],[-194,239],[-208,187],[-32,108],[-8,147],[81,90],[44,79],[-4,72],[-13,53],[-71,93],[-277,55],[-225,229],[-13,175],[-89,179],[-1,116],[-13,126],[66,27],[61,-10],[-7,-50],[21,-90],[70,-67],[67,-30],[61,-66],[46,-20],[48,-4],[-26,42],[-27,27],[-33,87],[-62,112],[-73,61],[-36,112],[-31,26],[-20,42],[70,49],[95,36],[127,9],[361,-16],[76,28],[64,-9],[47,4],[-98,29],[-56,-9],[-64,6],[-129,-6],[-52,12],[-58,35],[-37,4],[-120,-61],[-53,7],[-126,67],[-55,10],[-88,-38],[-11,-164],[28,-122],[-53,-13],[-62,51],[-94,29],[-78,46],[-109,85],[-58,31],[-65,-70],[-3,32],[33,82],[-10,138],[99,-110],[-31,77],[-76,85],[-59,30],[-73,152],[-164,92],[-132,147],[-270,245],[-18,215],[-98,272],[42,155],[-6,109],[-48,166],[-51,90],[-218,247],[-211,166],[-31,126],[-15,127],[46,113],[40,118],[29,32],[11,-13],[-8,-26],[30,-8],[11,53],[18,27],[-31,3],[3,17],[19,33],[65,156],[-7,197],[70,241],[-3,79],[-45,172],[-45,102],[-79,73],[35,106],[-3,102],[-16,17]]]}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
/* CSS goes here. */
.casubun.US { fill: black; }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
/* JavaScript goes here. */
var width = 960,
height = 1000;
var projection = d3.geo.mercator()
.scale(2500)
.translate([width / 2, height / 2])
.center([-120,35])
;
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("cali.json", function(cali) {
svg.selectAll(".casubun")
.data(topojson.object(cali, cali.objects.casubun).geometries)
.enter().append("path")
.attr("class", function(d) { return "casubun " + d.id; })
.attr("d", path);
});
d3.select("body").transition()
.style("background-color", "#FB5B1F");
svg.selectAll(".casubun")
.data(topojson.object(cali, cali.objects.casubun).geometries)
.enter().append("path")
.attr("class", function(d) { return "casubun " + d.id; })
.attr("d", path);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment