D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Sokrates86
Full window
Github gist
Multiple polygons with d3.js
<!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>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js