first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,155 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js - basic sunbirst diagram
|
||||
*
|
||||
* Demo sunbirst diagram setup with .json data source
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var D3SunburstBasic = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Uniform
|
||||
var _componentUniform = function() {
|
||||
if (!$().uniform) {
|
||||
console.warn('Warning - uniform.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize
|
||||
$('.basic-options input').uniform();
|
||||
};
|
||||
|
||||
// Chart
|
||||
var _sunburstBasic = function() {
|
||||
if (typeof d3 == 'undefined') {
|
||||
console.warn('Warning - d3.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Main variables
|
||||
var element = document.getElementById('d3-sunburst-basic'),
|
||||
width = 400,
|
||||
height = 400;
|
||||
|
||||
|
||||
// Initialize chart only if element exsists in the DOM
|
||||
if(element) {
|
||||
|
||||
// Basic setup
|
||||
// ------------------------------
|
||||
|
||||
// Define main variables
|
||||
var radius = Math.min(width, height) / 2,
|
||||
color = d3.scale.category20();
|
||||
|
||||
|
||||
|
||||
// Create chart
|
||||
// ------------------------------
|
||||
|
||||
var svg = d3.select(element).append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
||||
|
||||
|
||||
|
||||
// Construct chart layout
|
||||
// ------------------------------
|
||||
|
||||
// Partition layout
|
||||
var partition = d3.layout.partition()
|
||||
.sort(null)
|
||||
.size([2 * Math.PI, radius * radius])
|
||||
.value(function(d) { return 1; });
|
||||
|
||||
// Arc
|
||||
var arc = d3.svg.arc()
|
||||
.startAngle(function(d) { return d.x; })
|
||||
.endAngle(function(d) { return d.x + d.dx; })
|
||||
.innerRadius(function(d) { return Math.sqrt(d.y); })
|
||||
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
|
||||
|
||||
|
||||
|
||||
// Load data
|
||||
// ------------------------------
|
||||
|
||||
d3.json("../../../../global_assets/demo_data/d3/sunburst/sunburst_basic.json", function(error, root) {
|
||||
|
||||
// Add sunbirst
|
||||
var path = svg.datum(root).selectAll("path")
|
||||
.data(partition.nodes)
|
||||
.enter()
|
||||
.append("path")
|
||||
.attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
|
||||
.attr("d", arc)
|
||||
.style("stroke", "#fff")
|
||||
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
|
||||
.style("fill-rule", "evenodd")
|
||||
.each(stash);
|
||||
|
||||
// Change data
|
||||
d3.selectAll(".basic-options input").on("change", function change() {
|
||||
var value = this.value === "count"
|
||||
? function() { return 1; }
|
||||
: function(d) { return d.size; };
|
||||
|
||||
// Transition
|
||||
path.data(partition.value(value).nodes)
|
||||
.transition()
|
||||
.duration(750)
|
||||
.attrTween("d", arcTween);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Stash the old values for transition.
|
||||
function stash(d) {
|
||||
d.x0 = d.x;
|
||||
d.dx0 = d.dx;
|
||||
}
|
||||
|
||||
// Interpolate the arcs in data space.
|
||||
function arcTween(a) {
|
||||
var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
|
||||
return function(t) {
|
||||
var b = i(t);
|
||||
a.x0 = b.x;
|
||||
a.dx0 = b.dx;
|
||||
return arc(b);
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_componentUniform();
|
||||
_sunburstBasic();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
D3SunburstBasic.init();
|
||||
});
|
||||
@@ -0,0 +1,206 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js - sunbirst diagram combined
|
||||
*
|
||||
* Demo sunbirst diagram setup with interactive zoom and data update combination
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var D3SunburstCombined = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Uniform
|
||||
var _componentUniform = function() {
|
||||
if (!$().uniform) {
|
||||
console.warn('Warning - uniform.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize
|
||||
$('.combined-options input').uniform();
|
||||
};
|
||||
|
||||
// Chart
|
||||
var _sunburstCombined = function() {
|
||||
if (typeof d3 == 'undefined') {
|
||||
console.warn('Warning - d3.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Main variables
|
||||
var element = document.getElementById('d3-sunburst-combined'),
|
||||
width = 400,
|
||||
height = 400;
|
||||
|
||||
|
||||
// Initialize chart only if element exsists in the DOM
|
||||
if(element) {
|
||||
|
||||
// Basic setup
|
||||
// ------------------------------
|
||||
|
||||
// Define main variables
|
||||
var radius = Math.min(width, height) / 2;
|
||||
|
||||
|
||||
|
||||
// Construct scales
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
var x = d3.scale.linear()
|
||||
.range([0, 2 * Math.PI]);
|
||||
|
||||
// Vertical
|
||||
var y = d3.scale.sqrt()
|
||||
.range([0, radius]);
|
||||
|
||||
// Colors
|
||||
var color = d3.scale.category20();
|
||||
|
||||
|
||||
|
||||
// Create chart
|
||||
// ------------------------------
|
||||
|
||||
var svg = d3.select(element).append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
||||
|
||||
|
||||
|
||||
// Construct chart layout
|
||||
// ------------------------------
|
||||
|
||||
// Partition layout
|
||||
var partition = d3.layout.partition()
|
||||
.sort(null)
|
||||
.value(function(d) { return 1; });
|
||||
|
||||
// Arc
|
||||
var arc = d3.svg.arc()
|
||||
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
|
||||
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
|
||||
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
|
||||
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
|
||||
|
||||
|
||||
|
||||
// Load data
|
||||
// ------------------------------
|
||||
|
||||
// Keep track of the node that is currently being displayed as the root.
|
||||
var node;
|
||||
|
||||
d3.json("../../../../global_assets/demo_data/d3/sunburst/sunburst_basic.json", function(error, root) {
|
||||
node = root;
|
||||
|
||||
// Append sunbirst
|
||||
var path = svg.datum(root).selectAll(".d3-sunbirst")
|
||||
.data(partition.nodes)
|
||||
.enter()
|
||||
.append("path")
|
||||
.attr("class", "d3-sunbirst")
|
||||
.attr("d", arc)
|
||||
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
|
||||
.on("click", click)
|
||||
.each(stash);
|
||||
|
||||
// Change data
|
||||
d3.selectAll(".combined-options input").on("change", function change() {
|
||||
var value = this.value === "count"
|
||||
? function() { return 1; }
|
||||
: function(d) { return d.size; };
|
||||
|
||||
// Transition
|
||||
path
|
||||
.data(partition.value(value).nodes)
|
||||
.transition()
|
||||
.duration(750)
|
||||
.attrTween("d", arcTweenData);
|
||||
});
|
||||
|
||||
// Animate on click
|
||||
function click(d) {
|
||||
node = d;
|
||||
path.transition()
|
||||
.duration(750)
|
||||
.attrTween("d", arcTweenZoom(d));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Setup for switching data: stash the old values for transition.
|
||||
function stash(d) {
|
||||
d.x0 = d.x;
|
||||
d.dx0 = d.dx;
|
||||
}
|
||||
|
||||
// When switching data: interpolate the arcs in data space.
|
||||
function arcTweenData(a, i) {
|
||||
var oi = d3.interpolate({x: a.x0, dx: a.dx0}, a);
|
||||
function tween(t) {
|
||||
var b = oi(t);
|
||||
a.x0 = b.x;
|
||||
a.dx0 = b.dx;
|
||||
return arc(b);
|
||||
}
|
||||
if (i == 0) {
|
||||
// If we are on the first arc, adjust the x domain to match the root node
|
||||
// at the current zoom level. (We only need to do this once.)
|
||||
var xd = d3.interpolate(x.domain(), [node.x, node.x + node.dx]);
|
||||
return function(t) {
|
||||
x.domain(xd(t));
|
||||
return tween(t);
|
||||
};
|
||||
}
|
||||
else {
|
||||
return tween;
|
||||
}
|
||||
}
|
||||
|
||||
// When zooming: interpolate the scales
|
||||
function arcTweenZoom(d) {
|
||||
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
|
||||
yd = d3.interpolate(y.domain(), [d.y, 1]),
|
||||
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
|
||||
|
||||
return function(d, i) {
|
||||
return i
|
||||
? function(t) { return arc(d); }
|
||||
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_componentUniform();
|
||||
_sunburstCombined();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
D3SunburstCombined.init();
|
||||
});
|
||||
@@ -0,0 +1,160 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js - sunbirst diagram with distortion
|
||||
*
|
||||
* Demo sunbirst diagram setup with interactive distortion
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var D3SunburstDistortion = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Chart
|
||||
var _sunburstDistortion = function() {
|
||||
if (typeof d3 == 'undefined') {
|
||||
console.warn('Warning - d3.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Main variables
|
||||
var element = document.getElementById('d3-sunburst-distortion'),
|
||||
width = 400,
|
||||
height = 400;
|
||||
|
||||
|
||||
// Initialize chart only if element exsists in the DOM
|
||||
if(element) {
|
||||
|
||||
// Basic setup
|
||||
// ------------------------------
|
||||
|
||||
// Define main variables
|
||||
var radius = Math.min(width, height) / 2;
|
||||
color = d3.scale.category20c();
|
||||
|
||||
|
||||
|
||||
// Create chart
|
||||
// ------------------------------
|
||||
|
||||
var svg = d3.select(element).append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
||||
|
||||
|
||||
|
||||
// Construct chart layout
|
||||
// ------------------------------
|
||||
|
||||
// Partition layout
|
||||
var partition = d3.layout.partition()
|
||||
.size([2 * Math.PI, radius])
|
||||
.value(function(d) { return d.size; });
|
||||
|
||||
// Arc
|
||||
var arc = d3.svg.arc()
|
||||
.startAngle(function(d) { return d.x; })
|
||||
.endAngle(function(d) { return d.x + d.dx; })
|
||||
.innerRadius(function(d) { return d.y; })
|
||||
.outerRadius(function(d) { return d.y + d.dy; });
|
||||
|
||||
|
||||
|
||||
// Load data
|
||||
// ------------------------------
|
||||
|
||||
d3.json("../../../../global_assets/demo_data/d3/sunburst/sunburst_basic.json", function(root) {
|
||||
|
||||
// Add sunbirst
|
||||
path = svg.data([root]).selectAll("path")
|
||||
.data(partition.nodes)
|
||||
.enter()
|
||||
.append("path")
|
||||
.attr("d", arc)
|
||||
.style("stroke", "#fff")
|
||||
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
|
||||
.on("click", magnify)
|
||||
.each(stash);
|
||||
});
|
||||
|
||||
|
||||
// Distort the specified node to 80% of its parent.
|
||||
function magnify(node) {
|
||||
if (parent = node.parent) {
|
||||
var parent,
|
||||
x = parent.x,
|
||||
k = .8;
|
||||
|
||||
parent.children.forEach(function(sibling) {
|
||||
x += reposition(sibling, x, sibling === node
|
||||
? parent.dx * k / node.value
|
||||
: parent.dx * (1 - k) / (parent.value - node.value));
|
||||
});
|
||||
}
|
||||
else {
|
||||
reposition(node, 0, node.dx / node.value);
|
||||
}
|
||||
|
||||
path.transition()
|
||||
.duration(750)
|
||||
.attrTween("d", arcTween);
|
||||
}
|
||||
|
||||
// Recursively reposition the node at position x with scale k.
|
||||
function reposition(node, x, k) {
|
||||
node.x = x;
|
||||
if (node.children && (n = node.children.length)) {
|
||||
var i = -1, n;
|
||||
while (++i < n) x += reposition(node.children[i], x, k);
|
||||
}
|
||||
return node.dx = node.value * k;
|
||||
}
|
||||
|
||||
// Stash the old values for transition.
|
||||
function stash(d) {
|
||||
d.x0 = d.x;
|
||||
d.dx0 = d.dx;
|
||||
}
|
||||
|
||||
// Interpolate the arcs in data space.
|
||||
function arcTween(a) {
|
||||
var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
|
||||
return function(t) {
|
||||
var b = i(t);
|
||||
a.x0 = b.x;
|
||||
a.dx0 = b.dx;
|
||||
return arc(b);
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_sunburstDistortion();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
D3SunburstDistortion.init();
|
||||
});
|
||||
@@ -0,0 +1,143 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js - sunbirst diagram with zoom
|
||||
*
|
||||
* Demo sunbirst diagram setup with interactive zoom
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
// Setup module
|
||||
// ------------------------------
|
||||
|
||||
var D3SunburstZoom = function() {
|
||||
|
||||
|
||||
//
|
||||
// Setup module components
|
||||
//
|
||||
|
||||
// Chart
|
||||
var _sunburstZoom = function() {
|
||||
if (typeof d3 == 'undefined') {
|
||||
console.warn('Warning - d3.min.js is not loaded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Main variables
|
||||
var element = document.getElementById('d3-sunburst-zoom'),
|
||||
width = 400,
|
||||
height = 400;
|
||||
|
||||
|
||||
// Initialize chart only if element exsists in the DOM
|
||||
if(element) {
|
||||
|
||||
// Basic setup
|
||||
// ------------------------------
|
||||
|
||||
// Define main variables
|
||||
var radius = Math.min(width, height) / 2;
|
||||
|
||||
|
||||
|
||||
// Construct scales
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
var x = d3.scale.linear()
|
||||
.range([0, 2 * Math.PI]);
|
||||
|
||||
// Vertical
|
||||
var y = d3.scale.sqrt()
|
||||
.range([0, radius]);
|
||||
|
||||
// Colors
|
||||
var color = d3.scale.category20c();
|
||||
|
||||
|
||||
|
||||
// Create chart
|
||||
// ------------------------------
|
||||
|
||||
var svg = d3.select(element).append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
|
||||
|
||||
|
||||
|
||||
// Construct chart layout
|
||||
// ------------------------------
|
||||
|
||||
// Partition layout
|
||||
var partition = d3.layout.partition()
|
||||
.value(function(d) { return d.size; });
|
||||
|
||||
// Arc
|
||||
var arc = d3.svg.arc()
|
||||
.startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
|
||||
.endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
|
||||
.innerRadius(function(d) { return Math.max(0, y(d.y)); })
|
||||
.outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });
|
||||
|
||||
|
||||
|
||||
// Load data
|
||||
// ------------------------------
|
||||
|
||||
d3.json("../../../../global_assets/demo_data/d3/sunburst/sunburst_basic.json", function(error, root) {
|
||||
|
||||
// Append sunbirst
|
||||
var path = svg.selectAll(".d3-sunbirst")
|
||||
.data(partition.nodes(root))
|
||||
.enter()
|
||||
.append("path")
|
||||
.attr("class", "d3-sunbirst")
|
||||
.attr("d", arc)
|
||||
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
|
||||
.on("click", click);
|
||||
|
||||
// Run transition on click
|
||||
function click(d) {
|
||||
path.transition()
|
||||
.duration(750)
|
||||
.attrTween("d", arcTween(d));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Interpolate the scales
|
||||
function arcTween(d) {
|
||||
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
|
||||
yd = d3.interpolate(y.domain(), [d.y, 1]),
|
||||
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
|
||||
return function(d, i) {
|
||||
return i
|
||||
? function(t) { return arc(d); }
|
||||
: function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); return arc(d); };
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//
|
||||
// Return objects assigned to module
|
||||
//
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
_sunburstZoom();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
|
||||
// Initialize module
|
||||
// ------------------------------
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
D3SunburstZoom.init();
|
||||
});
|
||||
Reference in New Issue
Block a user