Skip to content

Instantly share code, notes, and snippets.

@kellyfelkins

kellyfelkins/index.html

Created March 24, 2014 14:56
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 kellyfelkins/9741723 to your computer and use it in GitHub Desktop.
Save kellyfelkins/9741723 to your computer and use it in GitHub Desktop.
Download ZIP
A simple d3js geo example displaying 3 points in San Francisco.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 500,
height = 500,
scale = 100000,
longitude = -122.4167,
latitude = 37.7833
var data = [
{ lat: 37.781040, lon: -122.497681 },
{ lat: 37.720504, lon: -122.495622 },
{ lat: 37.723220, lon: -122.395028 }
]
var chart = d3.select(".chart")
.attr("width", width);
var projection = d3.geo.albers()
.translate([width / 2, height / 2])
.scale(scale)
.rotate([-longitude, 0])
.center([0, latitude]);
chart.selectAll("points")
.data(data)
.enter()
.append("svg:circle")
.attr("cx", function (d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function (d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 5)
.append("title")
.text(function (d) {
return d.lat + ',' + d.lon;
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment