Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/charts/d3/pies/donut_arc_tween.js
Vendored
+95
View File
@@ -0,0 +1,95 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - arc tween animation
*
* Demo d3.js demonstration of arc tween animation
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
donutTweenAnimation('#d3-donut-arc-tween', 120);
// Chart setup
function donutTweenAnimation(element, radius) {
// Basic setup
// ------------------------------
// Define main variables
var τ = 2 * Math.PI;
// Create chart
// ------------------------------
// Add SVG element
var container = d3.select(element).append("svg");
// Add SVG group
var svg = container
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius / 1.4)
.startAngle(0);
//
// Append chart elements
//
// Add the background arc, from 0 to 100% (τ).
var background = svg.append("path")
.datum({endAngle: τ})
.style("fill", "#eee")
.attr("d", arc);
// Add the foreground arc in orange, currently showing 12.7%.
var foreground = svg.append("path")
.datum({endAngle: .127 * τ})
.style("fill", "#7986CB")
.attr("d", arc);
// Start a transition to a new random angle
setInterval(function() {
foreground.transition()
.duration(750)
.call(arcTween, Math.random() * τ);
}, 1500);
// Creates a tween on the specified transition's "d" attribute, transitioning
// any selected arcs from their current angle to the specified new angle.
function arcTween(transition, newAngle) {
transition.attrTween("d", function(d) {
// Interpolate between the two angles
var interpolate = d3.interpolate(d.endAngle, newAngle);
// Return value of the attrTween
return function(t) {
// Calculate the current arc angle based on the transition time, t
d.endAngle = interpolate(t);
// Lastly, compute the arc path given the updated data
return arc(d);
};
});
}
}
});
assets/js/charts/d3/pies/donut_basic.js
Vendored
+94
View File
@@ -0,0 +1,94 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - basic donut chart
*
* Demo d3.js donut chart setup with .csv data source
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
donutBasic('#d3-donut-basic', 120);
// Chart setup
function donutBasic(element, radius) {
// Basic setup
// ------------------------------
// Colors
var color = d3.scale.category20();
// Create chart
// ------------------------------
// Add SVG element
var container = d3.select(element).append("svg");
// Add SVG group
var svg = container
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius / 1.75);
// Pie
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
// Load data
// ------------------------------
d3.csv("assets/demo_data/d3/pies/pies_basic.csv", function(error, data) {
// Pull out values
data.forEach(function(d) {
d.population = +d.population;
});
//
// Append chart elements
//
// Bind data
var g = svg.selectAll(".d3-arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "d3-arc");
// Add arc path
g.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color(d.data.age); });
// Add text labels
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("fill", "#fff")
.style("font-size", 12)
.style("text-anchor", "middle")
.text(function(d) { return d.data.age; });
});
}
});
assets/js/charts/d3/pies/donut_entry_animation.js
Vendored
+145
View File
@@ -0,0 +1,145 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - donut chart entry animation
*
* Demo d3.js donut chart setup with .csv data source and loading animation
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
donutEntryAnimation('#d3-donut-entry-animation', 120);
// Chart setup
function donutEntryAnimation(element, radius) {
// Basic setup
// ------------------------------
// Colors
var color = d3.scale.category20();
// Create chart
// ------------------------------
// Add SVG element
var container = d3.select(element).append("svg");
// Add SVG group
var svg = container
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius / 1.75);
// Pie
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
// Load data
// ------------------------------
d3.csv("assets/demo_data/d3/pies/pies_basic.csv", function(error, data) {
// Pull out values
data.forEach(function(d) {
d.population = +d.population;
});
//
// Append chart elements
//
// Bind data
var g = svg.selectAll(".d3-arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "d3-arc");
// Add arc path
g.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color(d.data.age); })
.transition()
.ease("linear")
.duration(1000)
.attrTween("d", tweenPie);
// Add text labels
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("opacity", 0)
.style("fill", "#fff")
.style("text-anchor", "middle")
.text(function(d) { return d.data.age; })
.transition()
.ease("linear")
.delay(1000)
.duration(500)
.style("opacity", 1);
// Tween
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return arc(i(t)); };
}
// Animate donut
// ------------------------------
$('.donut-animation').on('click', function (b) {
// Remove old paths
svg.selectAll("path").remove();
// Arc path
g.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color(d.data.age); })
.transition()
.ease("linear")
.duration(1000)
.attrTween("d", tweenPie);
// Text labels
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.style("opacity", 0)
.style("fill", "#fff")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.age; })
.transition()
.ease("linear")
.delay(1000)
.duration(500)
.style("opacity", 1);
});
});
}
});
assets/js/charts/d3/pies/donut_multiple.js
Vendored
+74
View File
@@ -0,0 +1,74 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - multiple donut charts
*
* Demo d3.js multiple donut charts setup
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
donutMultiple('#d3-donut-multiple', 110, 10);
// Chart setup
function donutMultiple(element, radius, margin) {
// Basic setup
// ------------------------------
// Define the data as a two-dimensional array of numbers
var data = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
];
// Colors
var colors = d3.scale.category10();
// Create chart
// ------------------------------
// Insert an svg element (with margin) for each row in our dataset
var svg = d3.select(element)
.selectAll("svg")
.data(data)
.enter()
.append("svg")
.attr("width", (radius + margin) * 2)
.attr("height", (radius + margin) * 2)
.append("g")
.attr("class", "d3-arc")
.attr("transform", "translate(" + (radius + margin) + "," + (radius + margin) + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.innerRadius(radius / 1.75)
.outerRadius(radius);
//
// Append chart elements
//
// The data for each svg element is a row of numbers (an array)
svg.selectAll("path")
.data(d3.layout.pie())
.enter()
.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d, i) { return colors(i); });
}
});
assets/js/charts/d3/pies/donut_multiple_nesting.js
Vendored
+115
View File
@@ -0,0 +1,115 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - multiple nested donut charts
*
* Demo d3.js multiple donut charts setup with nesting
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
donutMultipleNested('#d3-donut-nesting', 110, 10);
// Chart setup
function donutMultipleNested(element, radius, margin) {
// Basic setup
// ------------------------------
// Colors
var colors = d3.scale.category20c();
// Load data
// ------------------------------
d3.csv("assets/demo_data/d3/pies/pies_nesting.csv", function(flights) {
// Nest the flight data by originating airport
var airports = d3.nest()
.key(function(d) { return d.origin; })
.entries(flights);
// Create chart
// ------------------------------
// Insert an svg element (with margin) for each row in our dataset
var svg = d3.select(element)
.selectAll("svg")
.data(airports)
.enter()
.append("svg")
.attr("width", (radius + margin) * 2)
.attr("height", (radius + margin) * 2)
.append("g")
.attr("transform", "translate(" + (radius + margin) + "," + (radius + margin) + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.innerRadius(radius / 2)
.outerRadius(radius);
// Pie
var pie = d3.layout.pie()
.value(function(d) { return +d.count; })
.sort(function(a, b) { return b.count - a.count; });
//
// Append chart elements
//
// Add a label for the airport
svg.append("text")
.attr("dy", ".35em")
.style("text-anchor", "middle")
.style("font-weight", 500)
.text(function(d) { return d.key; });
// Pass the nested values to the pie layout
var g = svg.selectAll("g")
.data(function(d) { return pie(d.values); })
.enter()
.append("g")
.attr("class", "d3-arc");
// Add a colored arc path, with a mouseover title showing the count
g.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return colors(d.data.carrier); })
.append("title")
.text(function(d) { return d.data.carrier + ": " + d.data.count; });
// Add a label to the larger arcs, translated to the arc centroid and rotated.
g.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("text")
.attr("dy", ".35em")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })
.style("fill", "#fff")
.style("font-size", 12)
.style("text-anchor", "middle")
.text(function(d) { return d.data.carrier; });
// Computes the label angle of an arc, converting from radians to degrees.
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a;
}
});
}
});
assets/js/charts/d3/pies/donut_update.js
Vendored
+120
View File
@@ -0,0 +1,120 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - donut chart update animation
*
* Demo d3.js donut chart setup with .tsv data source and update animation
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Create Uniform checkbox
$(".donut-radios input").uniform({
radioClass: 'choice'
});
// Initialize chart
pieUpdateAnimation('#d3-donut-update', 120);
// Chart setup
function pieUpdateAnimation(element, radius) {
// Basic setup
// ------------------------------
// Colors
var color = d3.scale.category20();
// Create chart
// ------------------------------
// Add SVG element
var container = d3.select(element).append("svg");
// Add SVG group
var svg = container
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius / 1.75);
// Pie
var pie = d3.layout.pie()
.value(function(d) { return d.lemons; })
.sort(null);
// Load data
// ------------------------------
d3.tsv("assets/demo_data/d3/pies/donuts_update.tsv", function(error, data) {
// Pull out values
data.forEach(function(d) {
d.lemons = +d.lemons || 0;
d.melons = +d.melons || 0;
});
//
// Append chart elements
//
// Bind data
var path = svg.datum(data).selectAll("path")
.data(pie)
.enter()
.append("path")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc)
.style("stroke", "#fff")
.each(function(d) { this._current = d; }); // store the initial angles
// Apply change event
d3.selectAll(".donut-radios input").on("change", change);
// Change values on page load
var timeout = setTimeout(function() {
d3.select("input[value=\"melons\"]").property("checked", true).each(change);
$.uniform.update();
}, 2000);
// Change values
function change() {
var value = this.value;
clearTimeout(timeout);
pie.value(function(d) { return d[value]; }); // change the value function
path = path.data(pie); // compute the new angles
path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}
});
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
}
});
assets/js/charts/d3/pies/pie_arc_tween.js
Vendored
+95
View File
@@ -0,0 +1,95 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - arc tween animation
*
* Demo d3.js demonstration of arc tween animation
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
pieTweenAnimation('#d3-pie-arc-tween', 120);
// Chart setup
function pieTweenAnimation(element, radius) {
// Basic setup
// ------------------------------
// Define main variables
var τ = 2 * Math.PI;
// Create chart
// ------------------------------
// Add SVG element
var container = d3.select(element).append("svg");
// Add SVG group
var svg = container
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(0)
.startAngle(0);
//
// Append chart elements
//
// Add the background arc, from 0 to 100% (τ).
var background = svg.append("path")
.datum({endAngle: τ})
.style("fill", "#f5f5f5")
.attr("d", arc);
// Add the foreground arc in orange, currently showing 12.7%.
var foreground = svg.append("path")
.datum({endAngle: .127 * τ})
.style("fill", "#81C784")
.attr("d", arc);
// Start a transition to a new random angle
setInterval(function() {
foreground.transition()
.duration(750)
.call(arcTween, Math.random() * τ);
}, 1500);
// Creates a tween on the specified transition's "d" attribute, transitioning
// any selected arcs from their current angle to the specified new angle.
function arcTween(transition, newAngle) {
transition.attrTween("d", function(d) {
// Interpolate between the two angles
var interpolate = d3.interpolate(d.endAngle, newAngle);
// Return value of the attrTween
return function(t) {
// Calculate the current arc angle based on the transition time, t
d.endAngle = interpolate(t);
// Lastly, compute the arc path given the updated data
return arc(d);
};
});
}
}
});
assets/js/charts/d3/pies/pie_basic.js
Vendored
+94
View File
@@ -0,0 +1,94 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - basic pie chart
*
* Demo d3.js pie chart setup with .csv data source
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
pieBasic('#d3-pie-basic', 120);
// Chart setup
function pieBasic(element, radius) {
// Basic setup
// ------------------------------
// Colors
var color = d3.scale.category20();
// Create chart
// ------------------------------
// Add SVG element
var container = d3.select(element).append("svg");
// Add SVG group
var svg = container
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(0);
// Pie
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
// Load data
// ------------------------------
d3.csv("assets/demo_data/d3/pies/pies_basic.csv", function(error, data) {
// Pull out values
data.forEach(function(d) {
d.population = +d.population;
});
//
// Append chart elements
//
// Bind data
var g = svg.selectAll(".d3-arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "d3-arc");
// Add arc path
g.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color(d.data.age); });
// Add text labels
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("fill", "#fff")
.style("font-size", 12)
.style("text-anchor", "middle")
.text(function(d) { return d.data.age; });
});
}
});
assets/js/charts/d3/pies/pie_entry_animation.js
Vendored
+148
View File
@@ -0,0 +1,148 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - pie chart entry animation
*
* Demo d3.js pie chart setup with .csv data source and loading animation
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
pieEntryAnimation('#d3-pie-entry-animation', 120);
// Chart setup
function pieEntryAnimation(element, radius) {
// Basic setup
// ------------------------------
// Colors
var color = d3.scale.category20();
// Create chart
// ------------------------------
// Add SVG element
var container = d3.select(element).append("svg");
// Add SVG group
var svg = container
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(0);
// Pie
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
// Load data
// ------------------------------
d3.csv("assets/demo_data/d3/pies/pies_basic.csv", function(error, data) {
// Pull out values
data.forEach(function(d) {
d.population = +d.population;
});
//
// Append chart elements
//
// Bind data
var g = svg.selectAll(".d3-arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "d3-arc");
// Add arc path
g.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color(d.data.age); })
.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie);
// Add text labels
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("opacity", 0)
.style("fill", "#fff")
.style("font-size", 12)
.style("text-anchor", "middle")
.text(function(d) { return d.data.age; })
.transition()
.ease("linear")
.delay(2000)
.duration(500)
.style("opacity", 1)
// Tween
function tweenPie(b) {
b.innerRadius = 0;
var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
return function(t) { return arc(i(t));
};
}
// Animate pie
// ------------------------------
$('.pie-animation').on('click', function (b) {
// Remove old paths
svg.selectAll("path").remove();
// Arc path
g.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color(d.data.age); })
.transition()
.ease("bounce")
.duration(2000)
.attrTween("d", tweenPie);
// Text labels
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("opacity", 0)
.style("fill", "#fff")
.style("font-size", 12)
.style("text-anchor", "middle")
.text(function(d) { return d.data.age; })
.transition()
.ease("linear")
.delay(2000)
.duration(500)
.style("opacity", 1)
});
});
}
});
assets/js/charts/d3/pies/pie_multiple.js
Vendored
+74
View File
@@ -0,0 +1,74 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - multiple pie charts
*
* Demo d3.js multiple pie charts setup
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
pieMultiple('#d3-pie-multiple', 110, 10);
// Chart setup
function pieMultiple(element, radius, margin) {
// Basic setup
// ------------------------------
// Define the data as a two-dimensional array of numbers
var data = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
];
// Colors
var colors = d3.scale.category10();
// Create chart
// ------------------------------
// Insert an svg element (with margin) for each row in our dataset
var svg = d3.select(element)
.selectAll("svg")
.data(data)
.enter()
.append("svg")
.attr("width", (radius + margin) * 2)
.attr("height", (radius + margin) * 2)
.append("g")
.attr("class", "d3-arc")
.attr("transform", "translate(" + (radius + margin) + "," + (radius + margin) + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(radius);
//
// Append chart elements
//
// The data for each svg element is a row of numbers (an array)
svg.selectAll("path")
.data(d3.layout.pie())
.enter()
.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d, i) { return colors(i); });
}
});
assets/js/charts/d3/pies/pie_multiple_nesting.js
Vendored
+118
View File
@@ -0,0 +1,118 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - multiple nested pie charts
*
* Demo d3.js multiple pie charts setup with nesting
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Initialize chart
pieMultipleNested('#d3-pie-nesting', 110, 10);
// Chart setup
function pieMultipleNested(element, radius, margin) {
// Basic setup
// ------------------------------
// Main variables
var marginTop = 20;
// Colors
var colors = d3.scale.category20c();
// Load data
// ------------------------------
d3.csv("assets/demo_data/d3/pies/pies_nesting.csv", function(flights) {
// Nest the flight data by originating airport
var airports = d3.nest()
.key(function(d) { return d.origin; })
.entries(flights);
// Create chart
// ------------------------------
// Insert an svg element (with margin) for each row in our dataset
var svg = d3.select(element)
.selectAll("svg")
.data(airports)
.enter()
.append("svg")
.attr("width", (radius + margin) * 2)
.attr("height", (radius + margin + marginTop) * 2)
.append("g")
.attr("transform", "translate(" + (radius + margin) + "," + (radius + margin + marginTop) + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(radius);
// Pie
var pie = d3.layout.pie()
.value(function(d) { return +d.count; })
.sort(function(a, b) { return b.count - a.count; });
//
// Append chart elements
//
// Add a label for the airport
svg.append("text")
.attr("dy", ".35em")
.attr("y", -130)
.style("text-anchor", "middle")
.style("font-weight", 500)
.text(function(d) { return d.key; });
// Pass the nested values to the pie layout
var g = svg.selectAll("g")
.data(function(d) { return pie(d.values); })
.enter()
.append("g")
.attr("class", "d3-arc");
// Add a colored arc path, with a mouseover title showing the count
g.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return colors(d.data.carrier); })
.append("title")
.text(function(d) { return d.data.carrier + ": " + d.data.count; });
// Add a label to the larger arcs, translated to the arc centroid and rotated
g.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("text")
.attr("dy", ".35em")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })
.style("fill", "#fff")
.style("font-size", 12)
.style("text-anchor", "middle")
.text(function(d) { return d.data.carrier; });
// Computes the label angle of an arc, converting from radians to degrees
function angle(d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
return a > 90 ? a - 180 : a;
}
});
}
});
assets/js/charts/d3/pies/pie_update.js
Vendored
+121
View File
@@ -0,0 +1,121 @@
/* ------------------------------------------------------------------------------
*
* # D3.js - pie chart update animation
*
* Demo d3.js pie chart setup with .tsv data source and update animation
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Create Uniform checkbox
$(".pie-radios input").uniform({
radioClass: 'choice'
});
// Initialize chart
pieUpdateAnimation('#d3-pie-update', 120);
// Chart setup
function pieUpdateAnimation(element, radius) {
// Basic setup
// ------------------------------
// Colors
var color = d3.scale.category20();
// Create chart
// ------------------------------
// Add SVG element
var container = d3.select(element).append("svg");
// Add SVG group
var svg = container
.attr("width", radius * 2)
.attr("height", radius * 2)
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
// Construct chart layout
// ------------------------------
// Arc
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(0);
// Pie
var pie = d3.layout.pie()
.value(function(d) { return d.apples; })
.sort(null);
// Load data
// ------------------------------
d3.tsv("assets/demo_data/d3/pies/pies_update.tsv", function(error, data) {
// Pull out values
data.forEach(function(d) {
d.apples = +d.apples || 0;
d.oranges = +d.oranges || 0;
});
//
// Append chart elements
//
// Bind data
var path = svg.datum(data)
.selectAll("path")
.data(pie)
.enter()
.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d, i) { return color(i); })
.each(function(d) { this._current = d; }); // store the initial angles
// Apply change event
d3.selectAll(".pie-radios input").on("change", change);
// Change values on page load
var timeout = setTimeout(function() {
d3.select("input[value=\"oranges\"]").property("checked", true).each(change);
$.uniform.update();
}, 2000);
// Change values
function change() {
var value = this.value;
clearTimeout(timeout);
pie.value(function(d) { return d[value]; }); // change the value function
path = path.data(pie); // compute the new angles
path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
}
});
// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
var i = d3.interpolate(this._current, a);
this._current = i(0);
return function(t) {
return arc(i(t));
};
}
}
});