Skip to content

Instantly share code, notes, and snippets.

@Ognami
Last active July 23, 2018 17:32
Show Gist options
  • Save Ognami/0ce1d2777c97f4adedfd06e32996076a to your computer and use it in GitHub Desktop.
Save Ognami/0ce1d2777c97f4adedfd06e32996076a to your computer and use it in GitHub Desktop.
Mapping individual state.
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = 960 - margin.left - margin.right,
height = 960 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append('g')
.attr('class', 'map');
var projection = d3.geoMercator()
.scale(120);
var path = d3.geoPath().projection(projection);
d3.json("nc-albers.json", function(error, nc) {
//test long,lat
ashville = [-82.554146, 35.601196];
svg.append("path")
.datum({type: "FeatureCollection", features: nc.features})
.attr("d", path)
.style("fill","orange");
// add circles to svg
svg.selectAll("circle")
.data([ashville]).enter()
.append("circle")
.attr("cx", function (d) {console.log(projection(d)); return projection(d)[0]; })
.attr("cy", function (d) { return projection(d)[1]; })
.attr("r", "8px")
.attr("fill", "red");
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
Loading
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