Poygon Example

by Rushan Sakhibgareev

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.js"></script>

JavaScript

var vis = d3.select("body").append("svg")
         .attr("width", 1000)
         .attr("height", 667),

scaleX = d3.scale.linear()
        .domain([-30,30])
        .range([0,600]),

scaleY = d3.scale.linear()
        .domain([0,100])
        .range([500,0]),


poly = {
   color: "blue",
   points: [{"x":0.0, "y":25.0},
        {"x":8.5,"y":23.4},
        {"x":13.0,"y":21.0},
        {"x":19.0,"y":15.5}]
},

poly2 = {
   color: d3.rgb(12,266,34),
   points: [{"x":0.0, "y":55.0},
        {"x":8.5,"y":53.4},
        {"x":13.0,"y":51.0},
        {"x":19.0,"y":45.5}]
};        

vis.selectAll("polygon")
    .data([poly, poly2])
  .enter().append("polygon")
    .attr("points",function(d) { 
        return d.points.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
    .attr("fill",function(d){return d.color})    
    .attr("stroke",function(d){return d.color})
    .attr("stroke-width",2);