D3 Examples - Multiple polygons with d3.js

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}
 
</style>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
 
var width = 960,
    height = 700,
 
svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height),
​
scaleX = d3.scale.linear()
        .domain([-30,30]) //Give appropriate range in the scale
        .range([0,width]),
​
scaleY = d3.scale.linear()
        .domain([0,50]) //Give appropriate range in the scale
        .range([height,0]);
​
d3.json("polygons.json", function(data) {
  svg.selectAll("polygon")
    .data(data.Polygons)
    .enter().append("polygon")
    .attr("points",function(d) { 
          return d.points.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
      .attr("stroke","black")
      .attr("stroke-width",2); 
});
 
</script>
    