d3js-charts 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +1 -0
- data/CHANGELOG.md +3 -0
- data/D3-LICENSE +26 -0
- data/Gemfile +3 -0
- data/Gemfile.lock +117 -0
- data/LICENSE +25 -0
- data/README.md +72 -0
- data/Rakefile +2 -0
- data/app/assets/javascripts/d3.js +9263 -0
- data/app/assets/javascripts/d3.min.js +5 -0
- data/d3js-charts.gemspec +21 -0
- data/lib/chart_generators/bar_chart_generator.rb +23 -0
- data/lib/chart_generators/base_generator.rb +76 -0
- data/lib/chart_generators/bubble_chart_generator.rb +11 -0
- data/lib/chart_generators/histogram_generator.rb +11 -0
- data/lib/chart_generators/line_chart_generator.rb +11 -0
- data/lib/chart_generators/pie_chart_generator.rb +11 -0
- data/lib/chart_generators/polar_area_diagram_generator.rb +11 -0
- data/lib/chart_generators/radar_chart_generator.rb +11 -0
- data/lib/chart_generators/streamgraph_generator.rb +11 -0
- data/lib/chart_generators/treemap_generator.rb +11 -0
- data/lib/chart_helpers/common/bar_chart.rb +16 -0
- data/lib/chart_helpers/common/histogram.rb +12 -0
- data/lib/chart_helpers/common/line_chart.rb +11 -0
- data/lib/chart_helpers/common/pie_chart.rb +11 -0
- data/lib/chart_helpers/common_plots/biplot.rb +0 -0
- data/lib/chart_helpers/common_plots/box_plot.rb +0 -0
- data/lib/chart_helpers/common_plots/dot_plot.rb +0 -0
- data/lib/chart_helpers/common_plots/probability_plot.rb +0 -0
- data/lib/chart_helpers/common_plots/scatterplot.rb +0 -0
- data/lib/chart_helpers/field_specific/candlestick_chart.rb +0 -0
- data/lib/chart_helpers/field_specific/kagi_chart.rb +0 -0
- data/lib/chart_helpers/field_specific/open_high_low_close_chart.rb +0 -0
- data/lib/chart_helpers/field_specific/sparkline.rb +0 -0
- data/lib/chart_helpers/less_common/bubble_chart.rb +8 -0
- data/lib/chart_helpers/less_common/polar_area_diagram.rb +8 -0
- data/lib/chart_helpers/less_common/radar_chart.rb +9 -0
- data/lib/chart_helpers/less_common/streamgraph.rb +9 -0
- data/lib/chart_helpers/less_common/treemap.rb +16 -0
- data/lib/chart_helpers/less_common/waterfall_chart.rb +0 -0
- data/lib/chart_helpers/other/control_chart.rb +0 -0
- data/lib/chart_helpers/other/greninger_chart.rb +0 -0
- data/lib/chart_helpers/other/heatmap.rb +0 -0
- data/lib/chart_helpers/other/natal_chart.rb +0 -0
- data/lib/chart_helpers/other/nomogram.rb +0 -0
- data/lib/chart_helpers/other/pareto_chart.rb +0 -0
- data/lib/chart_helpers/other/run_chart.rb +0 -0
- data/lib/chart_helpers/other/strip_chart.rb +0 -0
- data/lib/chart_helpers/other/structure_chart.rb +0 -0
- data/lib/chart_helpers/other/vowel_chart.rb +0 -0
- data/lib/chart_helpers/well_known_named/gantt_chart.rb +0 -0
- data/lib/chart_helpers/well_known_named/nolan_chart.rb +0 -0
- data/lib/chart_helpers/well_known_named/pert_chart.rb +0 -0
- data/lib/chart_helpers/well_known_named/smith_chart.rb +0 -0
- data/lib/chart_templates/css/bubble_chart.css.erb +3 -0
- data/lib/chart_templates/css/histogram.css.erb +19 -0
- data/lib/chart_templates/css/horizontal_bar_chart.css.erb +8 -0
- data/lib/chart_templates/css/line_chart.css.erb +35 -0
- data/lib/chart_templates/css/pie_chart.css.erb +8 -0
- data/lib/chart_templates/css/polar_area_diagram.css.erb +5 -0
- data/lib/chart_templates/css/radar_chart.css.erb +6 -0
- data/lib/chart_templates/css/streamgraph.css.erb +26 -0
- data/lib/chart_templates/css/treemap.css.erb +20 -0
- data/lib/chart_templates/css/vertical_bar_chart.css.erb +23 -0
- data/lib/chart_templates/js/bubble_chart.js.erb +49 -0
- data/lib/chart_templates/js/histogram.js.erb +55 -0
- data/lib/chart_templates/js/horizontal_bar_chart.js.erb +13 -0
- data/lib/chart_templates/js/line_chart.js.erb +65 -0
- data/lib/chart_templates/js/pie_chart.js.erb +44 -0
- data/lib/chart_templates/js/polar_area_diagram.js.erb +184 -0
- data/lib/chart_templates/js/radar_chart.js.erb +299 -0
- data/lib/chart_templates/js/streamgraph.js.erb +161 -0
- data/lib/chart_templates/js/treemap.js.erb +46 -0
- data/lib/chart_templates/js/vertical_bar_chart.js.erb +59 -0
- data/lib/d3/charts.rb +3 -0
- data/lib/d3/charts/engine.rb +6 -0
- data/lib/d3/charts/railtie.rb +19 -0
- data/lib/d3/charts/version.rb +5 -0
- data/lib/d3js-charts.rb +23 -0
- metadata +150 -0
@@ -0,0 +1,26 @@
|
|
1
|
+
<%= element %>_body {
|
2
|
+
font: 10px sans-serif;
|
3
|
+
min-width: 600px;
|
4
|
+
max-height: 400px;
|
5
|
+
}
|
6
|
+
|
7
|
+
<%= element %> {
|
8
|
+
background: #fff;
|
9
|
+
}
|
10
|
+
|
11
|
+
<%= element %> p {
|
12
|
+
font: 12px helvetica;
|
13
|
+
}
|
14
|
+
|
15
|
+
<%= element %> .axis path, .axis line {
|
16
|
+
fill: none;
|
17
|
+
stroke: #000;
|
18
|
+
stroke-width: 2px;
|
19
|
+
shape-rendering: crispEdges;
|
20
|
+
}
|
21
|
+
|
22
|
+
<%= element %> button {
|
23
|
+
position: absolute;
|
24
|
+
right: 50px;
|
25
|
+
top: 10px;
|
26
|
+
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
<%= element %> {
|
2
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
3
|
+
position: relative;
|
4
|
+
width: 960px;
|
5
|
+
}
|
6
|
+
|
7
|
+
<%= element %> form {
|
8
|
+
position: absolute;
|
9
|
+
margin-left: 20px;
|
10
|
+
margin-top: 0px;
|
11
|
+
}
|
12
|
+
|
13
|
+
<%= element %> .node {
|
14
|
+
border: solid 1px white;
|
15
|
+
font: 10px sans-serif;
|
16
|
+
line-height: 12px;
|
17
|
+
overflow: hidden;
|
18
|
+
position: absolute;
|
19
|
+
text-indent: 2px;
|
20
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
.bar {
|
2
|
+
fill: steelblue;
|
3
|
+
}
|
4
|
+
|
5
|
+
.bar:hover {
|
6
|
+
fill: brown;
|
7
|
+
}
|
8
|
+
|
9
|
+
.axis {
|
10
|
+
font: 10px sans-serif;
|
11
|
+
}
|
12
|
+
|
13
|
+
.axis path,
|
14
|
+
.axis line {
|
15
|
+
fill: none;
|
16
|
+
stroke: #000;
|
17
|
+
shape-rendering: crispEdges;
|
18
|
+
}
|
19
|
+
|
20
|
+
.x.axis path {
|
21
|
+
display: none;
|
22
|
+
}
|
23
|
+
|
@@ -0,0 +1,49 @@
|
|
1
|
+
var diameter = 960,
|
2
|
+
format = d3.format(",d"),
|
3
|
+
color = d3.scale.category20c();
|
4
|
+
|
5
|
+
var bubble = d3.layout.pack()
|
6
|
+
.sort(null)
|
7
|
+
.size([diameter, diameter])
|
8
|
+
.padding(1.5);
|
9
|
+
|
10
|
+
var bubble_svg = d3.select("<%= element %>").append("svg")
|
11
|
+
.attr("width", diameter)
|
12
|
+
.attr("height", diameter)
|
13
|
+
.attr("class", "bubble");
|
14
|
+
|
15
|
+
d3.json("<%= data %>", function(error, root) {
|
16
|
+
var node = bubble_svg.selectAll(".node")
|
17
|
+
.data(bubble.nodes(classes(root))
|
18
|
+
.filter(function(d) { return !d.children; }))
|
19
|
+
.enter().append("g")
|
20
|
+
.attr("class", "node")
|
21
|
+
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
22
|
+
|
23
|
+
node.append("title")
|
24
|
+
.text(function(d) { return d.className + ": " + format(d.value); });
|
25
|
+
|
26
|
+
node.append("circle")
|
27
|
+
.attr("r", function(d) { return d.r; })
|
28
|
+
.style("fill", function(d) { return color(d.packageName); });
|
29
|
+
|
30
|
+
node.append("text")
|
31
|
+
.attr("dy", ".3em")
|
32
|
+
.style("text-anchor", "middle")
|
33
|
+
.text(function(d) { return d.className.substring(0, d.r / 3); });
|
34
|
+
});
|
35
|
+
|
36
|
+
// Returns a flattened hierarchy containing all leaf nodes under the root.
|
37
|
+
function classes(root) {
|
38
|
+
var classes = [];
|
39
|
+
|
40
|
+
function recurse(name, node) {
|
41
|
+
if (node.children) node.children.forEach(function(child) { recurse(node.name, child); });
|
42
|
+
else classes.push({packageName: name, className: node.name, value: node.size});
|
43
|
+
}
|
44
|
+
|
45
|
+
recurse(null, root);
|
46
|
+
return {children: classes};
|
47
|
+
}
|
48
|
+
|
49
|
+
d3.select(self.frameElement).style("height", diameter + "px");
|
@@ -0,0 +1,55 @@
|
|
1
|
+
// Generate a Bates distribution of 10 random variables.
|
2
|
+
var values = [ <%= data.join(', ') %> ];
|
3
|
+
|
4
|
+
// A formatter for counts.
|
5
|
+
var formatCount = d3.format(",.0f");
|
6
|
+
|
7
|
+
var margin = {top: 10, right: 30, bottom: 30, left: 30},
|
8
|
+
width = 960 - margin.left - margin.right,
|
9
|
+
height = 500 - margin.top - margin.bottom;
|
10
|
+
|
11
|
+
var x = d3.scale.linear()
|
12
|
+
.domain([0, 1])
|
13
|
+
.range([0, width]);
|
14
|
+
|
15
|
+
// Generate a histogram using twenty uniformly-spaced bins.
|
16
|
+
var data = d3.layout.histogram()
|
17
|
+
.bins(x.ticks(20))
|
18
|
+
(values);
|
19
|
+
|
20
|
+
var y = d3.scale.linear()
|
21
|
+
.domain([0, d3.max(data, function(d) { return d.y; })])
|
22
|
+
.range([height, 0]);
|
23
|
+
|
24
|
+
var xAxis = d3.svg.axis()
|
25
|
+
.scale(x)
|
26
|
+
.orient("bottom");
|
27
|
+
|
28
|
+
var svg = d3.select("<%= element %>").append("svg")
|
29
|
+
.attr("width", width + margin.left + margin.right)
|
30
|
+
.attr("height", height + margin.top + margin.bottom)
|
31
|
+
.append("g")
|
32
|
+
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
33
|
+
|
34
|
+
var bar = svg.selectAll(".bar")
|
35
|
+
.data(data)
|
36
|
+
.enter().append("g")
|
37
|
+
.attr("class", "bar")
|
38
|
+
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
|
39
|
+
|
40
|
+
bar.append("rect")
|
41
|
+
.attr("x", 1)
|
42
|
+
.attr("width", x(data[0].dx) - 1)
|
43
|
+
.attr("height", function(d) { return height - y(d.y); });
|
44
|
+
|
45
|
+
bar.append("text")
|
46
|
+
.attr("dy", ".75em")
|
47
|
+
.attr("y", 6)
|
48
|
+
.attr("x", x(data[0].dx) / 2)
|
49
|
+
.attr("text-anchor", "middle")
|
50
|
+
.text(function(d) { return formatCount(d.y); });
|
51
|
+
|
52
|
+
svg.append("g")
|
53
|
+
.attr("class", "x axis")
|
54
|
+
.attr("transform", "translate(0," + height + ")")
|
55
|
+
.call(xAxis);
|
@@ -0,0 +1,13 @@
|
|
1
|
+
function bar_chart( element, data ) {
|
2
|
+
var x = d3.scale.linear().domain( [0, d3.max(data)] ).range( [0, 420] );
|
3
|
+
d3.select(element)
|
4
|
+
.selectAll("div")
|
5
|
+
.data(data)
|
6
|
+
.enter().append("div")
|
7
|
+
.style("width", function(d) { return x(d) + "px"; })
|
8
|
+
.text(function(d) { return d; });
|
9
|
+
}
|
10
|
+
|
11
|
+
$(document).ready(function(){
|
12
|
+
bar_chart( "<%= element %>", [ <%= data.join(', ') %> ] );
|
13
|
+
});
|
@@ -0,0 +1,65 @@
|
|
1
|
+
$(document).ready(function(){
|
2
|
+
|
3
|
+
/* implementation heavily influenced by http://bl.ocks.org/1166403 */
|
4
|
+
|
5
|
+
// define dimensions of graph
|
6
|
+
var m = [80, 80, 80, 80]; // margins
|
7
|
+
var w = 1000 - m[1] - m[3]; // width
|
8
|
+
var h = 400 - m[0] - m[2]; // height
|
9
|
+
|
10
|
+
// 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)
|
11
|
+
var data = [ <%= data.join(', ') %> ];
|
12
|
+
|
13
|
+
// X scale will fit all values from data[] within pixels 0-w
|
14
|
+
var x = d3.scale.linear().domain([0, data.length]).range([0, w]);
|
15
|
+
// Y scale will fit values from 0-10 within pixels h-0 (Note the inverted domain for the y-scale: bigger is up!)
|
16
|
+
var y = d3.scale.linear().domain([0, 10]).range([h, 0]);
|
17
|
+
// automatically determining max range can work something like this
|
18
|
+
// var y = d3.scale.linear().domain([0, d3.max(data)]).range([h, 0]);
|
19
|
+
|
20
|
+
// create a line function that can convert data[] into x and y points
|
21
|
+
var line = d3.svg.line()
|
22
|
+
// assign the X function to plot our line as we wish
|
23
|
+
.x(function(d,i) {
|
24
|
+
// verbose logging to show what's actually being done
|
25
|
+
console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
|
26
|
+
// return the X coordinate where we want to plot this datapoint
|
27
|
+
return x(i);
|
28
|
+
})
|
29
|
+
.y(function(d) {
|
30
|
+
// verbose logging to show what's actually being done
|
31
|
+
console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
|
32
|
+
// return the Y coordinate where we want to plot this datapoint
|
33
|
+
return y(d);
|
34
|
+
})
|
35
|
+
|
36
|
+
// Add an SVG element with the desired dimensions and margin.
|
37
|
+
var graph = d3.select("<%= element %>").append("svg:svg")
|
38
|
+
.attr("width", w + m[1] + m[3])
|
39
|
+
.attr("height", h + m[0] + m[2])
|
40
|
+
.append("svg:g")
|
41
|
+
.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
|
42
|
+
|
43
|
+
// create yAxis
|
44
|
+
var xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true);
|
45
|
+
// Add the x-axis.
|
46
|
+
graph.append("svg:g")
|
47
|
+
.attr("class", "x axis")
|
48
|
+
.attr("transform", "translate(0," + h + ")")
|
49
|
+
.call(xAxis);
|
50
|
+
|
51
|
+
|
52
|
+
// create left yAxis
|
53
|
+
var yAxisLeft = d3.svg.axis().scale(y).ticks(4).orient("left");
|
54
|
+
// Add the y-axis to the left
|
55
|
+
graph.append("svg:g")
|
56
|
+
.attr("class", "y axis")
|
57
|
+
.attr("transform", "translate(-25,0)")
|
58
|
+
.call(yAxisLeft);
|
59
|
+
|
60
|
+
// Add the line by appending an svg:path element with the data line we created above
|
61
|
+
// do this AFTER the axes above so that the line is above the tick-lines
|
62
|
+
graph.append("svg:path").attr("d", line(data));
|
63
|
+
|
64
|
+
|
65
|
+
});
|
@@ -0,0 +1,44 @@
|
|
1
|
+
var pie_width = 960,
|
2
|
+
pie_height = 500,
|
3
|
+
pie_radius = Math.min(pie_width, pie_height) / 2;
|
4
|
+
|
5
|
+
var pie_color = d3.scale.ordinal()
|
6
|
+
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
|
7
|
+
|
8
|
+
var pie_arc = d3.svg.arc()
|
9
|
+
.outerRadius(pie_radius - 10)
|
10
|
+
.innerRadius(0);
|
11
|
+
|
12
|
+
var pie = d3.layout.pie()
|
13
|
+
.sort(null)
|
14
|
+
.value(function(pie_d) { return pie_d.population; });
|
15
|
+
|
16
|
+
var svg = d3.select("<%= element %>").append("svg")
|
17
|
+
.attr("class", "pie_svg")
|
18
|
+
.attr("width", pie_width)
|
19
|
+
.attr("height", pie_height)
|
20
|
+
.append("g")
|
21
|
+
.attr("transform", "translate(" + pie_width / 2 + "," + pie_height / 2 + ")");
|
22
|
+
|
23
|
+
d3.csv("<%= data %>", function(error, data) {
|
24
|
+
|
25
|
+
data.forEach(function(pie_d) {
|
26
|
+
pie_d.population = +pie_d.population;
|
27
|
+
});
|
28
|
+
|
29
|
+
var g = d3.select("<%= element %> g").selectAll(".pie_arc")
|
30
|
+
.data(pie(data))
|
31
|
+
.enter().append("g")
|
32
|
+
.attr("class", "pie_arc");
|
33
|
+
|
34
|
+
g.append("path")
|
35
|
+
.attr("d", pie_arc)
|
36
|
+
.style("fill", function(pie_d) { return pie_color(pie_d.data.age); });
|
37
|
+
|
38
|
+
g.append("text")
|
39
|
+
.attr("transform", function(pie_d) { return "translate(" + pie_arc.centroid(pie_d) + ")"; })
|
40
|
+
.attr("dy", ".35em")
|
41
|
+
.style("text-anchor", "middle")
|
42
|
+
.text(function(pie_d) { return pie_d.data.age; });
|
43
|
+
|
44
|
+
});
|
@@ -0,0 +1,184 @@
|
|
1
|
+
var timeseries, sdat, series, minVal = 0, maxVal = 6, radius, radiusLength;
|
2
|
+
var w = 500, h = 500, axis = 6, time = 10, ruleColor = '#CCC';
|
3
|
+
var vizPadding = {
|
4
|
+
top: 25,
|
5
|
+
right: 25,
|
6
|
+
bottom: 25,
|
7
|
+
left: 25
|
8
|
+
};
|
9
|
+
var numticks = maxVal / 0.5;
|
10
|
+
var viz, vizBody, maxs, keys;
|
11
|
+
|
12
|
+
var loadViz = function(){
|
13
|
+
d3.json("<%= data %>", function(error, json_data) {
|
14
|
+
timeseries = json_data["timeseries"];
|
15
|
+
sdat = json_data["sdat"];
|
16
|
+
keys = json_data["keys"];
|
17
|
+
|
18
|
+
buildBase();
|
19
|
+
setScales();
|
20
|
+
drawBars(0);
|
21
|
+
addLineAxes();
|
22
|
+
addCircleAxes();
|
23
|
+
});
|
24
|
+
};
|
25
|
+
|
26
|
+
var buildBase = function(){
|
27
|
+
viz = d3.select("<%= element %>")
|
28
|
+
.append('svg:svg')
|
29
|
+
.attr('width', w)
|
30
|
+
.attr('height', h);
|
31
|
+
|
32
|
+
viz.append("svg:rect")
|
33
|
+
.attr('x', 0)
|
34
|
+
.attr('y', 0)
|
35
|
+
.attr('height', 0)
|
36
|
+
.attr('width', 0)
|
37
|
+
.attr('height', 0);
|
38
|
+
|
39
|
+
vizBody = viz.append("svg:g")
|
40
|
+
.attr('id', 'polar_body');
|
41
|
+
};
|
42
|
+
|
43
|
+
setScales = function () {
|
44
|
+
var heightCircleConstraint,
|
45
|
+
widthCircleConstraint,
|
46
|
+
circleConstraint,
|
47
|
+
centerXPos,
|
48
|
+
centerYPos;
|
49
|
+
|
50
|
+
//need a circle so find constraining dimension
|
51
|
+
heightCircleConstraint = h - vizPadding.top - vizPadding.bottom;
|
52
|
+
widthCircleConstraint = w - vizPadding.left - vizPadding.right;
|
53
|
+
circleConstraint = d3.min([heightCircleConstraint, widthCircleConstraint]);
|
54
|
+
|
55
|
+
radius = d3.scale.linear().domain([0, maxVal])
|
56
|
+
.range([0, (circleConstraint / 2)]);
|
57
|
+
radiusLength = radius(maxVal);
|
58
|
+
|
59
|
+
//attach everything to the group that is centered around middle
|
60
|
+
centerXPos = widthCircleConstraint / 2 + vizPadding.left;
|
61
|
+
centerYPos = heightCircleConstraint / 2 + vizPadding.top;
|
62
|
+
|
63
|
+
vizBody.attr("transform", "translate(" + centerXPos + ", " + centerYPos + ")");
|
64
|
+
};
|
65
|
+
|
66
|
+
addCircleAxes = function() {
|
67
|
+
var radialTicks = radius.ticks(numticks), circleAxes, i;
|
68
|
+
|
69
|
+
vizBody.selectAll('.circle-ticks').remove();
|
70
|
+
|
71
|
+
circleAxes = vizBody.selectAll('.circle-ticks')
|
72
|
+
.data(sdat)
|
73
|
+
.enter().append('svg:g')
|
74
|
+
.attr("class", "polar_circle-ticks");
|
75
|
+
|
76
|
+
circleAxes.append("svg:circle")
|
77
|
+
.attr("r", function (d, i) { return radius(d); })
|
78
|
+
.attr("class", "polar_circle")
|
79
|
+
.style("stroke", ruleColor)
|
80
|
+
.style("opacity", 0.7)
|
81
|
+
.style("fill", "none");
|
82
|
+
|
83
|
+
circleAxes.append("svg:text")
|
84
|
+
.attr("text-anchor", "left")
|
85
|
+
.attr("dy", function (d) { return -1 * radius(d); })
|
86
|
+
.text(String);
|
87
|
+
}
|
88
|
+
|
89
|
+
addLineAxes = function () {
|
90
|
+
var radialTicks = radius.ticks(numticks), lineAxes;
|
91
|
+
|
92
|
+
vizBody.selectAll('.line-ticks').remove();
|
93
|
+
|
94
|
+
lineAxes = vizBody.selectAll('.line-ticks')
|
95
|
+
.data(keys)
|
96
|
+
.enter().append('svg:g')
|
97
|
+
.attr("transform", function (d, i) {
|
98
|
+
return "rotate(" + ((i / axis * 360) - 90) +
|
99
|
+
")translate(" + radius(maxVal) + ")";
|
100
|
+
})
|
101
|
+
.attr("class", "polar_line-ticks");
|
102
|
+
|
103
|
+
lineAxes.append('svg:line')
|
104
|
+
.attr("x2", -1 * radius(maxVal))
|
105
|
+
.style("stroke", ruleColor)
|
106
|
+
.style("opacity", 0.75)
|
107
|
+
.style("fill", "none");
|
108
|
+
|
109
|
+
lineAxes.append('svg:text')
|
110
|
+
.text(function(d,i){ return keys[i]; })
|
111
|
+
.attr("text-anchor", "middle")
|
112
|
+
// .attr("transform", function (d, i) {
|
113
|
+
// return (i / axis * 360) < 180 ? null : "rotate(90)";
|
114
|
+
// });
|
115
|
+
};
|
116
|
+
|
117
|
+
var draw = function (val) {
|
118
|
+
var groups,
|
119
|
+
lines,
|
120
|
+
linesToUpdate;
|
121
|
+
|
122
|
+
groups = vizBody.selectAll('.series')
|
123
|
+
.data(timeseries[val]);
|
124
|
+
groups.enter().append("svg:g")
|
125
|
+
.attr('class', 'polar_series')
|
126
|
+
.style('fill', "blue")
|
127
|
+
.style('stroke', "blue");
|
128
|
+
|
129
|
+
groups.exit().remove();
|
130
|
+
|
131
|
+
lines = groups.append('svg:path')
|
132
|
+
.attr("class", "polar_line")
|
133
|
+
.attr("id", "polar_userdata")
|
134
|
+
.attr("d", d3.svg.area.radial()
|
135
|
+
.radius(function (d) { return 0; })
|
136
|
+
.angle(function (d, i) { return (i / axis) * 2 * Math.PI; }))
|
137
|
+
.style("stroke-width", 3)
|
138
|
+
.style("fill", "blue")
|
139
|
+
.style("opacity", 0.4);
|
140
|
+
|
141
|
+
lines.attr("d", d3.svg.area.radial()
|
142
|
+
.outerRadius(function (d) { return radius(d); })
|
143
|
+
.innerRadius(function(d) { return 0; })
|
144
|
+
.angle(function (d, i) { return (i / axis) * 2 * Math.PI; }));
|
145
|
+
};
|
146
|
+
|
147
|
+
|
148
|
+
var drawBars = function(val) {
|
149
|
+
var groups, bar;
|
150
|
+
poler_pie = d3.layout.pie().value(function(d) { return d; }).sort(null);
|
151
|
+
d = [];
|
152
|
+
for(i = 0; i<timeseries[val][0].length; i++) { d.push(1); }
|
153
|
+
|
154
|
+
groups = vizBody.selectAll('.series')
|
155
|
+
.data([d]);
|
156
|
+
groups.enter().append("svg:g")
|
157
|
+
.attr('class', 'polar_series')
|
158
|
+
.style('fill', "blue")
|
159
|
+
.style('stroke', "black");
|
160
|
+
|
161
|
+
groups.exit().remove();
|
162
|
+
|
163
|
+
bar = d3.svg.arc()
|
164
|
+
.innerRadius( 0 )
|
165
|
+
.outerRadius( function(d,i) { return radius( timeseries[val][0][i] ); });
|
166
|
+
|
167
|
+
arcs = groups.selectAll(".series g.arc")
|
168
|
+
.data(poler_pie)
|
169
|
+
.enter()
|
170
|
+
.append("g")
|
171
|
+
.attr("class", "polar_attr");
|
172
|
+
|
173
|
+
arcs.append("path")
|
174
|
+
.attr("fill", "blue")
|
175
|
+
.attr("d", bar)
|
176
|
+
.style("opacity", 0.4);
|
177
|
+
}
|
178
|
+
|
179
|
+
function redraw( val ) {
|
180
|
+
vizBody.selectAll('#polar_userdata').remove();
|
181
|
+
drawBar( val );
|
182
|
+
}
|
183
|
+
|
184
|
+
loadViz();
|