d3js-charts 1.1.0

data/lib/chart_templates/css/pie_chart.css.erb

@@ -0,0 +1,8 @@
+<%= element %> {
+  font: 10px sans-serif;
+}
+
+.arc path {
+  stroke: #fff;
+}
+

data/lib/chart_templates/css/polar_area_diagram.css.erb

@@ -0,0 +1,5 @@
+<%= element %> svg g#polar_body g.polar_series g.polar_attr path {
+    fill: #0000FF;
+    stroke: #4682B4;
+    stroke-width: 1;
+}

data/lib/chart_templates/css/radar_chart.css.erb

@@ -0,0 +1,6 @@
+<%= element + '_body' %> {
+  overflow: hidden;
+  margin: 0;
+  font-size: 14px;
+  font-family: "Helvetica Neue", Helvetica;
+}

data/lib/chart_templates/css/streamgraph.css.erb

@@ -0,0 +1,26 @@
+<%= element %>_body {
+  font: 10px sans-serif;
+  min-width: 600px;
+  max-height: 400px;
+}
+
+<%= element %> { 
+  background: #fff;
+}
+
+<%= element %> p {
+  font: 12px helvetica;
+}
+
+<%= element %> .axis path, .axis line {
+  fill: none;
+  stroke: #000;
+  stroke-width: 2px;
+  shape-rendering: crispEdges;
+}
+
+<%= element %> button {
+  position: absolute;
+  right: 50px;
+  top: 10px;
+}

data/lib/chart_templates/css/treemap.css.erb

@@ -0,0 +1,20 @@
+<%= element %> {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  position: relative;
+  width: 960px;
+}
+
+<%= element %> form {
+    position: absolute;
+    margin-left: 20px;
+    margin-top: 0px;
+}
+
+<%= element %> .node {
+  border: solid 1px white;
+  font: 10px sans-serif;
+  line-height: 12px;
+  overflow: hidden;
+  position: absolute;
+  text-indent: 2px;
+}

data/lib/chart_templates/css/vertical_bar_chart.css.erb

@@ -0,0 +1,23 @@
+.bar {
+  fill: steelblue;
+}
+
+.bar:hover {
+  fill: brown;
+}
+
+.axis {
+  font: 10px sans-serif;
+}
+
+.axis path,
+.axis line {
+  fill: none;
+  stroke: #000;
+  shape-rendering: crispEdges;
+}
+
+.x.axis path {
+  display: none;
+}
+

data/lib/chart_templates/js/bubble_chart.js.erb

@@ -0,0 +1,49 @@
+var diameter = 960,
+    format = d3.format(",d"),
+    color = d3.scale.category20c();
+
+var bubble = d3.layout.pack()
+    .sort(null)
+    .size([diameter, diameter])
+    .padding(1.5);
+
+var bubble_svg = d3.select("<%= element %>").append("svg")
+    .attr("width", diameter)
+    .attr("height", diameter)
+    .attr("class", "bubble");
+
+d3.json("<%= data %>", function(error, root) {
+  var node = bubble_svg.selectAll(".node")
+      .data(bubble.nodes(classes(root))
+      .filter(function(d) { return !d.children; }))
+    .enter().append("g")
+      .attr("class", "node")
+      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
+
+  node.append("title")
+      .text(function(d) { return d.className + ": " + format(d.value); });
+
+  node.append("circle")
+      .attr("r", function(d) { return d.r; })
+      .style("fill", function(d) { return color(d.packageName); });
+
+  node.append("text")
+      .attr("dy", ".3em")
+      .style("text-anchor", "middle")
+      .text(function(d) { return d.className.substring(0, d.r / 3); });
+});
+
+// Returns a flattened hierarchy containing all leaf nodes under the root.
+function classes(root) {
+  var classes = [];
+
+  function recurse(name, node) {
+    if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
+    else classes.push({packageName: name, className: node.name, value: node.size});
+  }
+
+  recurse(null, root);
+  return {children: classes};
+}
+
+d3.select(self.frameElement).style("height", diameter + "px");

data/lib/chart_templates/js/histogram.js.erb

@@ -0,0 +1,55 @@
+// Generate a Bates distribution of 10 random variables.
+var values = [ <%= data.join(', ') %> ];
+
+// A formatter for counts.
+var formatCount = d3.format(",.0f");
+
+var margin = {top: 10, right: 30, bottom: 30, left: 30},
+    width = 960 - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+var x = d3.scale.linear()
+    .domain([0, 1])
+    .range([0, width]);
+
+// Generate a histogram using twenty uniformly-spaced bins.
+var data = d3.layout.histogram()
+    .bins(x.ticks(20))
+    (values);
+
+var y = d3.scale.linear()
+    .domain([0, d3.max(data, function(d) { return d.y; })])
+    .range([height, 0]);
+
+var xAxis = d3.svg.axis()
+    .scale(x)
+    .orient("bottom");
+
+var svg = d3.select("<%= element %>").append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+  .append("g")
+    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+var bar = svg.selectAll(".bar")
+    .data(data)
+  .enter().append("g")
+    .attr("class", "bar")
+    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
+
+bar.append("rect")
+    .attr("x", 1)
+    .attr("width", x(data[0].dx) - 1)
+    .attr("height", function(d) { return height - y(d.y); });
+
+bar.append("text")
+    .attr("dy", ".75em")
+    .attr("y", 6)
+    .attr("x", x(data[0].dx) / 2)
+    .attr("text-anchor", "middle")
+    .text(function(d) { return formatCount(d.y); });
+
+svg.append("g")
+    .attr("class", "x axis")
+    .attr("transform", "translate(0," + height + ")")
+    .call(xAxis);

data/lib/chart_templates/js/horizontal_bar_chart.js.erb

@@ -0,0 +1,13 @@
+function bar_chart( element, data ) {
+	var x = d3.scale.linear().domain( [0, d3.max(data)] ).range( [0, 420] );
+	d3.select(element)
+	  .selectAll("div")
+	    .data(data)
+	  .enter().append("div")
+	    .style("width", function(d) { return x(d) + "px"; })
+	    .text(function(d) { return d; });
+}
+
+$(document).ready(function(){ 
+	bar_chart( "<%= element %>", [ <%= data.join(', ') %> ] ); 
+});

data/lib/chart_templates/js/line_chart.js.erb

@@ -0,0 +1,65 @@
+$(document).ready(function(){ 
+
+/* implementation heavily influenced by http://bl.ocks.org/1166403 */
+		
+		// define dimensions of graph
+		var m = [80, 80, 80, 80]; // margins
+		var w = 1000 - m[1] - m[3]; // width
+		var h = 400 - m[0] - m[2]; // height
+		
+		// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
+		var data = [ <%= data.join(', ') %> ];
+
+		// X scale will fit all values from data[] within pixels 0-w
+		var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
+		// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
+		var y = d3.scale.linear().domain([0, 10]).range([h, 0]);
+			// automatically determining max range can work something like this
+			// var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);
+
+		// create a line function that can convert data[] into x and y points
+		var line = d3.svg.line()
+			// assign the X function to plot our line as we wish
+			.x(function(d,i) { 
+				// verbose logging to show what's actually being done
+				console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
+				// return the X coordinate where we want to plot this datapoint
+				return x(i); 
+			})
+			.y(function(d) { 
+				// verbose logging to show what's actually being done
+				console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
+				// return the Y coordinate where we want to plot this datapoint
+				return y(d); 
+			})
+
+			// Add an SVG element with the desired dimensions and margin.
+			var graph = d3.select("<%= element %>").append("svg:svg")
+			      .attr("width", w + m[1] + m[3])
+			      .attr("height", h + m[0] + m[2])
+			    .append("svg:g")
+			      .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+
+			// create yAxis
+			var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
+			// Add the x-axis.
+			graph.append("svg:g")
+			      .attr("class", "x axis")
+			      .attr("transform", "translate(0," + h + ")")
+			      .call(xAxis);
+
+
+			// create left yAxis
+			var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
+			// Add the y-axis to the left
+			graph.append("svg:g")
+			      .attr("class", "y axis")
+			      .attr("transform", "translate(-25,0)")
+			      .call(yAxisLeft);
+			
+  			// Add the line by appending an svg:path element with the data line we created above
+			// do this AFTER the axes above so that the line is above the tick-lines
+				graph.append("svg:path").attr("d", line(data));
+				
+
+});

data/lib/chart_templates/js/pie_chart.js.erb

@@ -0,0 +1,44 @@
+var pie_width  = 960,
+    pie_height = 500,
+    pie_radius = Math.min(pie_width, pie_height) / 2;
+
+var pie_color = d3.scale.ordinal()
+    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+
+var pie_arc = d3.svg.arc()
+    .outerRadius(pie_radius - 10)
+    .innerRadius(0);
+
+var pie = d3.layout.pie()
+    .sort(null)
+    .value(function(pie_d) { return pie_d.population; });
+
+var svg = d3.select("<%= element %>").append("svg")
+    .attr("class", "pie_svg")
+    .attr("width", pie_width)
+    .attr("height", pie_height)
+  .append("g")
+    .attr("transform", "translate(" + pie_width / 2 + "," + pie_height / 2 + ")");
+
+d3.csv("<%= data %>", function(error, data) {
+
+  data.forEach(function(pie_d) {
+    pie_d.population = +pie_d.population;
+  });
+
+  var g = d3.select("<%= element %> g").selectAll(".pie_arc")
+      .data(pie(data))
+    .enter().append("g")
+      .attr("class", "pie_arc");
+
+  g.append("path")
+      .attr("d", pie_arc)
+      .style("fill", function(pie_d) { return pie_color(pie_d.data.age); });
+
+  g.append("text")
+      .attr("transform", function(pie_d) { return "translate(" + pie_arc.centroid(pie_d) + ")"; })
+      .attr("dy", ".35em")
+      .style("text-anchor", "middle")
+      .text(function(pie_d) { return pie_d.data.age; });
+
+});

data/lib/chart_templates/js/polar_area_diagram.js.erb

@@ -0,0 +1,184 @@
+var timeseries, sdat, series, minVal = 0, maxVal = 6, radius, radiusLength;
+var w = 500, h = 500, axis = 6, time = 10, ruleColor = '#CCC';
+var vizPadding = {
+    top: 25,
+    right: 25,
+    bottom: 25,
+    left: 25
+};
+var numticks = maxVal / 0.5;
+var viz, vizBody, maxs, keys;
+
+var loadViz = function(){
+  d3.json("<%= data %>", function(error, json_data) {
+    timeseries = json_data["timeseries"];
+    sdat       = json_data["sdat"];
+    keys       = json_data["keys"];
+
+    buildBase();
+    setScales();
+    drawBars(0);
+    addLineAxes();
+    addCircleAxes();
+  });
+};
+
+var buildBase = function(){
+    viz = d3.select("<%= element %>")
+                .append('svg:svg')
+                    .attr('width', w)
+                    .attr('height', h);
+
+    viz.append("svg:rect")
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('height', 0)
+            .attr('width', 0)
+            .attr('height', 0);
+    
+    vizBody = viz.append("svg:g")
+        .attr('id', 'polar_body');
+};
+
+setScales = function () {
+  var heightCircleConstraint,
+      widthCircleConstraint,
+      circleConstraint,
+      centerXPos,
+      centerYPos;
+
+  //need a circle so find constraining dimension
+  heightCircleConstraint = h - vizPadding.top - vizPadding.bottom;
+  widthCircleConstraint = w - vizPadding.left - vizPadding.right;
+  circleConstraint = d3.min([heightCircleConstraint, widthCircleConstraint]);
+
+  radius = d3.scale.linear().domain([0, maxVal])
+      .range([0, (circleConstraint / 2)]);
+  radiusLength = radius(maxVal);
+
+  //attach everything to the group that is centered around middle
+  centerXPos = widthCircleConstraint / 2 + vizPadding.left;
+  centerYPos = heightCircleConstraint / 2 + vizPadding.top;
+
+  vizBody.attr("transform", "translate(" + centerXPos + ", " + centerYPos + ")");
+};
+
+addCircleAxes = function() {
+    var radialTicks = radius.ticks(numticks), circleAxes, i;
+        
+    vizBody.selectAll('.circle-ticks').remove();
+        
+    circleAxes = vizBody.selectAll('.circle-ticks')
+      .data(sdat)
+      .enter().append('svg:g')
+      .attr("class", "polar_circle-ticks");
+
+    circleAxes.append("svg:circle")
+      .attr("r", function (d, i) { return radius(d); })
+      .attr("class", "polar_circle")
+      .style("stroke", ruleColor)
+      .style("opacity", 0.7)
+      .style("fill", "none");
+
+    circleAxes.append("svg:text")
+      .attr("text-anchor", "left")
+      .attr("dy", function (d) { return -1 * radius(d); })
+      .text(String);
+}
+
+addLineAxes = function () {
+  var radialTicks = radius.ticks(numticks), lineAxes;
+
+  vizBody.selectAll('.line-ticks').remove();
+
+  lineAxes = vizBody.selectAll('.line-ticks')
+      .data(keys)
+      .enter().append('svg:g')
+      .attr("transform", function (d, i) {
+          return "rotate(" + ((i / axis * 360) - 90) +
+              ")translate(" + radius(maxVal) + ")";
+      })
+      .attr("class", "polar_line-ticks");
+
+  lineAxes.append('svg:line')
+      .attr("x2", -1 * radius(maxVal))
+      .style("stroke", ruleColor)
+      .style("opacity", 0.75)
+      .style("fill", "none");
+
+  lineAxes.append('svg:text')
+      .text(function(d,i){ return keys[i]; })
+      .attr("text-anchor", "middle")
+//      .attr("transform", function (d, i) {
+//          return (i / axis * 360) < 180 ? null : "rotate(90)";
+//      });
+};
+
+var draw = function (val) {
+  var groups,
+      lines,
+      linesToUpdate;
+
+  groups = vizBody.selectAll('.series')
+      .data(timeseries[val]);
+  groups.enter().append("svg:g")
+      .attr('class', 'polar_series')
+      .style('fill', "blue")
+      .style('stroke', "blue");
+      
+  groups.exit().remove();
+
+  lines = groups.append('svg:path')
+      .attr("class", "polar_line")
+      .attr("id", "polar_userdata")
+      .attr("d", d3.svg.area.radial()
+          .radius(function (d) { return 0; })
+          .angle(function (d, i) { return (i / axis) * 2 * Math.PI; }))
+      .style("stroke-width", 3)
+      .style("fill", "blue")
+      .style("opacity", 0.4);
+
+  lines.attr("d", d3.svg.area.radial()
+      .outerRadius(function (d) { return radius(d); })
+      .innerRadius(function(d) { return 0; })
+      .angle(function (d, i) { return (i / axis) * 2 * Math.PI; }));
+};
+
+
+var drawBars = function(val) {
+    var groups, bar;
+    poler_pie = d3.layout.pie().value(function(d) { return d; }).sort(null);
+    d = [];
+    for(i = 0; i<timeseries[val][0].length; i++) { d.push(1); }
+
+    groups = vizBody.selectAll('.series')
+        .data([d]);
+    groups.enter().append("svg:g")
+        .attr('class', 'polar_series')
+        .style('fill', "blue")
+        .style('stroke', "black");
+      
+    groups.exit().remove();
+    
+    bar = d3.svg.arc()
+        .innerRadius( 0 )
+        .outerRadius( function(d,i) { return radius( timeseries[val][0][i] ); });
+        
+    arcs = groups.selectAll(".series g.arc")
+        .data(poler_pie)
+        .enter()
+            .append("g")
+                .attr("class", "polar_attr");
+                
+    arcs.append("path")
+        .attr("fill", "blue")
+        .attr("d", bar)
+        .style("opacity", 0.4);
+}
+
+function redraw( val ) {        
+    vizBody.selectAll('#polar_userdata').remove();
+    drawBar( val );
+}
+
+loadViz();