Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/index.html

Last active August 29, 2015 13:59
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/10608840 to your computer and use it in GitHub Desktop.
Save mpmckenna8/10608840 to your computer and use it in GitHub Desktop.
Download ZIP
CSS styling some topojson data D3
Raw
readme.md

So I did a topojson dataset which also has the some points for labels so maybe one day I'll append some text to this bad boy.

What I typed into the terminal to make the topojson:

sfBOS matthewmckenna$ topojson \

-o sfbosArc.json
-p
sfBOScle.geojson
labelSFbosD3.geojson bounds: -122.49272855226758 37.715893280886796 -122.37087002221702 37.82289853793412 (spherical) pre-quantization: 0.0136m (1.22e-7°) 0.0119m (1.07e-7°) topology: 0 arcs, 0 points post-quantization: 1.36m (0.0000122°) 1.19m (0.0000107°) prune: retained 0 / 0 arcs (NaN%)

Raw
index.html
<!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">
.dist01{
fill:green;
}
.dist02{
fill:blue;
opacity:.7;
}
.dist03{
fill:purple;
}
.dist04{
fill:#cab2d6;
}
.dist05{
fill:#ff7f00;
}
.dist06{
fill:#e31a1c;
}
.dist07{
fill:#fdbf6f;
Opacity:.3;
}
.dist08{
fill:pink;
}
.dist09{
fill:#a6cee3;
}
.dist10{
fill:#ffff99;
}
.dist11{
fill:#b2df8a;
}
</style>
</head>
<body>
<script type="text/javascript">
// style this thing beter and add some interactivity and labels and stuff....
//Width and height
var w = 500;
var h = 300;
//Define map projection
var projection = d3.geo.mercator()
.translate([w/2, h/2])
.scale([98900])
.center([ -122.43198394775389,37.76365837331252])
;
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load in the data data
d3.json('sfbosArc.json',function(err, sf){
svg.selectAll(".dist")
.data(topojson.feature(sf, sf.objects.sfBOScle).features)
.enter().append("path")
.attr("class",function(d,i){
console.log(d.properties.DISTRICT)
return "dist" +d.properties.DISTRICT
})
.attr("d",path)
})
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
sfbosArc.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment