You just need to see the demos: D3 Gallery
Tweaked example from Let’s Make a Bar Chart tutorial
var data = [1, 1, 2, 3, 5, 8, 13]; var x = d3.scale.linear() .domain([0, d3.max(data)]) .range([0, 420]); d3.select("#chart") .selectAll("div") .data(data) .enter().append("div") .style("width", function(d) { return x(d) + "px"; }) .text(function(d) { console.log(d); return d; });
Adds the cells to mesonet.info quadrangles map:
var voronoi = d3.geom.voronoi().clipExtent([[0,0],quadDim]); var polygons = voronoi(vertices); for (var i=0; i<polygons.length; i++) { if (!polygons[i]) { continue; } var points = []; for (var j=0; j<polygons[i].length; j++) { points.push([quadrangle[0][0]-polygons[i][j][0],quadrangle[0][1]+polygons[i][j][1]]); } var color = isNaN(data[i]) ? [64, 64, 64] : HeatMap.color(this.cell.min, this.cell.max,data[i]); var label = isNaN(data[i]) ? null : data[i]+"\u2109"; var ngon = L.polygon(points,{ weight: 1, color: "rgb(200,200,200)", fillColor: "rgb("+color[0]+","+color[1]+","+color[2]+")", fillOpacity: 0.25}); this.cellLayer.addLayer(ngon); }
Remember that D3 can: