Visualization via D3

R. Alexander Miłowski

milowski@ischool.berkeley.edu

School of Information, UC Berkeley

What is D3?

You just need to see the demos: D3 Gallery

A Simplistic Example

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; });

Voronoi Diagrams on Leaflet

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);
}
         

Strategies to Learn More

  1. Look at some simple examples (e.g., Let's Make a Bar Chart, the tutorial list) but your outcomes may vary.
  2. Do you understand how this pie chart is built?
  3. Cut-paste-modify an example that is close to what you want.
  4. Dig through the API reference to see if has what you need.
  5. Remember that D3 can:

    • find and manipulate the DOM, style, etc.
    • help render data via packaged visualizations,
    • perform fundamental math, statistics, and algorithms on your data.