first commit
This commit is contained in:
dev-chiefworks
Vendored
+118
@@ -0,0 +1,118 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js - bubble chart
|
||||
*
|
||||
* Demo of a bubble chart setup with tooltip and .json data source
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: August 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
|
||||
// Initialize chart
|
||||
bubbles('#d3-bubbles', 700);
|
||||
|
||||
// Chart setup
|
||||
function bubbles(element, diameter) {
|
||||
|
||||
|
||||
// Basic setup
|
||||
// ------------------------------
|
||||
|
||||
// Format data
|
||||
var format = d3.format(",d");
|
||||
|
||||
// Color scale
|
||||
color = d3.scale.category10();
|
||||
|
||||
|
||||
|
||||
// Create chart
|
||||
// ------------------------------
|
||||
|
||||
var svg = d3.select(element).append("svg")
|
||||
.attr("width", diameter)
|
||||
.attr("height", diameter)
|
||||
.attr("class", "bubble");
|
||||
|
||||
|
||||
|
||||
// Create chart
|
||||
// ------------------------------
|
||||
|
||||
// Add tooltip
|
||||
var tip = d3.tip()
|
||||
.attr('class', 'd3-tip')
|
||||
.offset([-5, 0])
|
||||
.html(function(d) {
|
||||
return d.className + ": " + format(d.value);;
|
||||
});
|
||||
|
||||
// Initialize tooltip
|
||||
svg.call(tip);
|
||||
|
||||
|
||||
|
||||
// Construct chart layout
|
||||
// ------------------------------
|
||||
|
||||
// Pack
|
||||
var bubble = d3.layout.pack()
|
||||
.sort(null)
|
||||
.size([diameter, diameter])
|
||||
.padding(1.5);
|
||||
|
||||
|
||||
|
||||
// Load data
|
||||
// ------------------------------
|
||||
|
||||
d3.json("assets/demo_data/d3/other/bubble.json", function(error, root) {
|
||||
|
||||
|
||||
//
|
||||
// Append chart elements
|
||||
//
|
||||
|
||||
// Bind data
|
||||
var node = svg.selectAll(".d3-bubbles-node")
|
||||
.data(bubble.nodes(classes(root))
|
||||
.filter(function(d) { return !d.children; }))
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("class", "d3-bubbles-node")
|
||||
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
|
||||
|
||||
// Append circles
|
||||
node.append("circle")
|
||||
.attr("r", function(d) { return d.r; })
|
||||
.style("fill", function(d) { return color(d.packageName); })
|
||||
.on('mouseover', tip.show)
|
||||
.on('mouseout', tip.hide);
|
||||
|
||||
// Append text
|
||||
node.append("text")
|
||||
.attr("dy", ".3em")
|
||||
.style("fill", "#fff")
|
||||
.style("font-size", 12)
|
||||
.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};
|
||||
}
|
||||
}
|
||||
});
|
||||
+451
@@ -0,0 +1,451 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js - streamgraph
|
||||
*
|
||||
* Demo of streamgraph chart setup with tooltip and .csv data source
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: August 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
|
||||
streamgraph('#d3-streamgraph', 400); // initialize chart
|
||||
|
||||
// Chart setup
|
||||
function streamgraph(element, height) {
|
||||
|
||||
|
||||
// Basic setup
|
||||
// ------------------------------
|
||||
|
||||
// Define main variables
|
||||
var d3Container = d3.select(element),
|
||||
margin = {top: 5, right: 50, bottom: 40, left: 50},
|
||||
width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
|
||||
height = height - margin.top - margin.bottom,
|
||||
tooltipOffset = 30;
|
||||
|
||||
// Tooltip
|
||||
var tooltip = d3Container
|
||||
.append("div")
|
||||
.attr("class", "d3-tip e")
|
||||
.style("display", "none")
|
||||
|
||||
// Format date
|
||||
var format = d3.time.format("%m/%d/%y %H:%M");
|
||||
var formatDate = d3.time.format("%H:%M");
|
||||
|
||||
// Colors
|
||||
var colorrange = ['#03A9F4', '#29B6F6', '#4FC3F7', '#81D4FA', '#B3E5FC', '#E1F5FE'];
|
||||
|
||||
|
||||
|
||||
// Construct scales
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
var x = d3.time.scale().range([0, width]);
|
||||
|
||||
// Vertical
|
||||
var y = d3.scale.linear().range([height, 0]);
|
||||
|
||||
// Colors
|
||||
var z = d3.scale.ordinal().range(colorrange);
|
||||
|
||||
|
||||
|
||||
// Create axes
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom")
|
||||
.ticks(d3.time.hours, 4)
|
||||
.innerTickSize(4)
|
||||
.tickPadding(8)
|
||||
.tickFormat(d3.time.format("%H:%M")); // Display hours and minutes in 24h format
|
||||
|
||||
// Left vertical
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.ticks(6)
|
||||
.innerTickSize(4)
|
||||
.outerTickSize(0)
|
||||
.tickPadding(8)
|
||||
.tickFormat(function (d) { return (d/1000) + "k"; });
|
||||
|
||||
// Right vertical
|
||||
var yAxis2 = yAxis;
|
||||
|
||||
// Dash lines
|
||||
var gridAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
.ticks(6)
|
||||
.tickPadding(8)
|
||||
.tickFormat("")
|
||||
.tickSize(-width, 0, 0);
|
||||
|
||||
|
||||
|
||||
// Create chart
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
var container = d3Container.append("svg")
|
||||
|
||||
// SVG element
|
||||
var svg = container
|
||||
.attr('width', width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
|
||||
|
||||
// Construct chart layout
|
||||
// ------------------------------
|
||||
|
||||
// Stack
|
||||
var stack = d3.layout.stack()
|
||||
.offset("silhouette")
|
||||
.values(function(d) { return d.values; })
|
||||
.x(function(d) { return d.date; })
|
||||
.y(function(d) { return d.value; });
|
||||
|
||||
// Nest
|
||||
var nest = d3.nest()
|
||||
.key(function(d) { return d.key; });
|
||||
|
||||
// Area
|
||||
var area = d3.svg.area()
|
||||
.interpolate("cardinal")
|
||||
.x(function(d) { return x(d.date); })
|
||||
.y0(function(d) { return y(d.y0); })
|
||||
.y1(function(d) { return y(d.y0 + d.y); });
|
||||
|
||||
|
||||
|
||||
// Load data
|
||||
// ------------------------------
|
||||
|
||||
d3.csv("assets/demo_data/dashboard/traffic_sources.csv", function (error, data) {
|
||||
|
||||
// Pull out values
|
||||
data.forEach(function (d) {
|
||||
d.date = format.parse(d.date);
|
||||
d.value = +d.value;
|
||||
});
|
||||
|
||||
// Stack and nest layers
|
||||
var layers = stack(nest.entries(data));
|
||||
|
||||
|
||||
|
||||
// Set input domains
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
x.domain(d3.extent(data, function(d, i) { return d.date; }));
|
||||
|
||||
// Vertical
|
||||
y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);
|
||||
|
||||
|
||||
|
||||
// Add grid
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal grid. Must be before the group
|
||||
svg.append("g")
|
||||
.attr("class", "d3-grid-dashed")
|
||||
.call(gridAxis);
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Append chart elements
|
||||
//
|
||||
|
||||
// Stream layers
|
||||
// ------------------------------
|
||||
|
||||
// Create group
|
||||
var group = svg.append('g')
|
||||
.attr('class', 'streamgraph-layers-group');
|
||||
|
||||
// And append paths to this group
|
||||
var layer = group.selectAll(".streamgraph-layer")
|
||||
.data(layers)
|
||||
.enter()
|
||||
.append("path")
|
||||
.attr("class", "streamgraph-layer")
|
||||
.attr("d", function(d) { return area(d.values); })
|
||||
.style('stroke', '#fff')
|
||||
.style('stroke-width', 0.5)
|
||||
.style("fill", function(d, i) { return z(i); });
|
||||
|
||||
// Add transition
|
||||
var layerTransition = layer
|
||||
.style('opacity', 0)
|
||||
.transition()
|
||||
.duration(750)
|
||||
.delay(function(d, i) { return i * 50; })
|
||||
.style('opacity', 1)
|
||||
|
||||
|
||||
|
||||
// Append axes
|
||||
// ------------------------------
|
||||
|
||||
//
|
||||
// Left vertical
|
||||
//
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "d3-axis d3-axis-left d3-axis-solid")
|
||||
.call(yAxis.orient("left"));
|
||||
|
||||
// Hide first tick
|
||||
d3.select(svg.selectAll('.d3-axis-left .tick text')[0][0])
|
||||
.style("visibility", "hidden");
|
||||
|
||||
|
||||
//
|
||||
// Right vertical
|
||||
//
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "d3-axis d3-axis-right d3-axis-solid")
|
||||
.attr("transform", "translate(" + width + ", 0)")
|
||||
.call(yAxis2.orient("right"));
|
||||
|
||||
// Hide first tick
|
||||
d3.select(svg.selectAll('.d3-axis-right .tick text')[0][0])
|
||||
.style("visibility", "hidden");
|
||||
|
||||
|
||||
//
|
||||
// Horizontal
|
||||
//
|
||||
|
||||
var xaxisg = svg.append("g")
|
||||
.attr("class", "d3-axis d3-axis-horizontal d3-axis-solid")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis);
|
||||
|
||||
// Add extra subticks for hidden hours
|
||||
xaxisg.selectAll(".d3-axis-subticks")
|
||||
.data(x.ticks(d3.time.hours), function(d) { return d; })
|
||||
.enter()
|
||||
.append("line")
|
||||
.attr("class", "d3-axis-subticks")
|
||||
.attr("y1", 0)
|
||||
.attr("y2", 4)
|
||||
.attr("x1", x)
|
||||
.attr("x2", x);
|
||||
|
||||
|
||||
|
||||
// Add hover line and pointer
|
||||
// ------------------------------
|
||||
|
||||
// Append group to the group of paths to prevent appearance outside chart area
|
||||
var hoverLineGroup = group.append("g")
|
||||
.attr("class", "hover-line");
|
||||
|
||||
// Add line
|
||||
var hoverLine = hoverLineGroup
|
||||
.append("line")
|
||||
.attr("y1", 0)
|
||||
.attr("y2", height)
|
||||
.style('fill', 'none')
|
||||
.style('stroke', '#fff')
|
||||
.style('stroke-width', 1)
|
||||
.style('pointer-events', 'none')
|
||||
.style('shape-rendering', 'crispEdges')
|
||||
.style("opacity", 0);
|
||||
|
||||
// Add pointer
|
||||
var hoverPointer = hoverLineGroup
|
||||
.append("rect")
|
||||
.attr("x", 2)
|
||||
.attr("y", 2)
|
||||
.attr("width", 6)
|
||||
.attr("height", 6)
|
||||
.style('fill', '#03A9F4')
|
||||
.style('stroke', '#fff')
|
||||
.style('stroke-width', 1)
|
||||
.style('shape-rendering', 'crispEdges')
|
||||
.style('pointer-events', 'none')
|
||||
.style("opacity", 0);
|
||||
|
||||
|
||||
|
||||
// Append events to the layers group
|
||||
// ------------------------------
|
||||
|
||||
layerTransition.each("end", function() {
|
||||
layer
|
||||
.on("mouseover", function (d, i) {
|
||||
svg.selectAll(".streamgraph-layer")
|
||||
.transition()
|
||||
.duration(250)
|
||||
.style("opacity", function (d, j) {
|
||||
return j != i ? 0.75 : 1; // Mute all except hovered
|
||||
});
|
||||
})
|
||||
|
||||
.on("mousemove", function (d, i) {
|
||||
mouse = d3.mouse(this);
|
||||
mousex = mouse[0];
|
||||
mousey = mouse[1];
|
||||
datearray = [];
|
||||
var invertedx = x.invert(mousex);
|
||||
invertedx = invertedx.getHours();
|
||||
var selected = (d.values);
|
||||
for (var k = 0; k < selected.length; k++) {
|
||||
datearray[k] = selected[k].date
|
||||
datearray[k] = datearray[k].getHours();
|
||||
}
|
||||
mousedate = datearray.indexOf(invertedx);
|
||||
pro = d.values[mousedate].value;
|
||||
|
||||
|
||||
// Display mouse pointer
|
||||
hoverPointer
|
||||
.attr("x", mousex - 3)
|
||||
.attr("y", mousey - 6)
|
||||
.style("opacity", 1);
|
||||
|
||||
hoverLine
|
||||
.attr("x1", mousex)
|
||||
.attr("x2", mousex)
|
||||
.style("opacity", 1);
|
||||
|
||||
//
|
||||
// Tooltip
|
||||
//
|
||||
|
||||
// Tooltip data
|
||||
tooltip.html(
|
||||
"<ul class='list-unstyled mb-5'>" +
|
||||
"<li>" + "<div class='text-size-base mt-5 mb-5'><i class='icon-circle-left2 position-left'></i>" + d.key + "</div>" + "</li>" +
|
||||
"<li>" + "Visits: " + "<span class='text-semibold pull-right'>" + pro + "</span>" + "</li>" +
|
||||
"<li>" + "Time: " + "<span class='text-semibold pull-right'>" + formatDate(d.values[mousedate].date) + "</span>" + "</li>" +
|
||||
"</ul>"
|
||||
)
|
||||
.style("display", "block");
|
||||
|
||||
// Tooltip arrow
|
||||
tooltip.append('div').attr('class', 'd3-tip-arrow');
|
||||
})
|
||||
|
||||
.on("mouseout", function (d, i) {
|
||||
|
||||
// Revert full opacity to all paths
|
||||
svg.selectAll(".streamgraph-layer")
|
||||
.transition()
|
||||
.duration(250)
|
||||
.style("opacity", 1);
|
||||
|
||||
// Hide cursor pointer
|
||||
hoverPointer.style("opacity", 0);
|
||||
|
||||
// Hide tooltip
|
||||
tooltip.style("display", "none");
|
||||
|
||||
hoverLine.style("opacity", 0);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Append events to the chart container
|
||||
// ------------------------------
|
||||
|
||||
d3Container
|
||||
.on("mousemove", function (d, i) {
|
||||
mouse = d3.mouse(this);
|
||||
mousex = mouse[0];
|
||||
mousey = mouse[1];
|
||||
|
||||
// Display hover line
|
||||
//.style("opacity", 1);
|
||||
|
||||
|
||||
// Move tooltip vertically
|
||||
tooltip.style("top", (mousey - ($('.d3-tip').outerHeight() / 2)) - 2 + "px") // Half tooltip height - half arrow width
|
||||
|
||||
// Move tooltip horizontally
|
||||
if(mousex >= ($(element).outerWidth() - $('.d3-tip').outerWidth() - margin.right - (tooltipOffset * 2))) {
|
||||
tooltip
|
||||
.style("left", (mousex - $('.d3-tip').outerWidth() - tooltipOffset) + "px") // Change tooltip direction from right to left to keep it inside graph area
|
||||
.attr("class", "d3-tip w");
|
||||
}
|
||||
else {
|
||||
tooltip
|
||||
.style("left", (mousex + tooltipOffset) + "px" )
|
||||
.attr("class", "d3-tip e");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Resize chart
|
||||
// ------------------------------
|
||||
|
||||
// Call function on window resize
|
||||
$(window).on('resize', resizeStream);
|
||||
|
||||
// Call function on sidebar width change
|
||||
$('.sidebar-control').on('click', resizeStream);
|
||||
|
||||
// Resize function
|
||||
//
|
||||
// Since D3 doesn't support SVG resize by default,
|
||||
// we need to manually specify parts of the graph that need to
|
||||
// be updated on window resize
|
||||
function resizeStream() {
|
||||
|
||||
// Layout
|
||||
// -------------------------
|
||||
|
||||
// Define width
|
||||
width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right;
|
||||
|
||||
// Main svg width
|
||||
container.attr("width", width + margin.left + margin.right);
|
||||
|
||||
// Width of appended group
|
||||
svg.attr("width", width + margin.left + margin.right);
|
||||
|
||||
// Horizontal range
|
||||
x.range([0, width]);
|
||||
|
||||
|
||||
// Chart elements
|
||||
// -------------------------
|
||||
|
||||
// Horizontal axis
|
||||
svg.selectAll('.d3-axis-horizontal').call(xAxis);
|
||||
|
||||
// Horizontal axis subticks
|
||||
svg.selectAll('.d3-axis-subticks').attr("x1", x).attr("x2", x);
|
||||
|
||||
// Grid lines width
|
||||
svg.selectAll(".d3-grid-dashed").call(gridAxis.tickSize(-width, 0, 0))
|
||||
|
||||
// Right vertical axis
|
||||
svg.selectAll(".d3-axis-right").attr("transform", "translate(" + width + ", 0)");
|
||||
|
||||
// Area paths
|
||||
svg.selectAll('.streamgraph-layer').attr("d", function(d) { return area(d.values); });
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
Vendored
+212
@@ -0,0 +1,212 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js - zoomable treemap
|
||||
*
|
||||
* Demo of treemap setup with zoom and .json data source
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: August 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
|
||||
// Create Uniform checkbox
|
||||
$(".treemap_actions").uniform({
|
||||
radioClass: 'choice'
|
||||
});
|
||||
|
||||
|
||||
// Initialize chart
|
||||
treemap('#d3-treemap', 800);
|
||||
|
||||
// Chart setup
|
||||
function treemap(element, height) {
|
||||
|
||||
|
||||
// Basic setup
|
||||
// ------------------------------
|
||||
|
||||
// Define main variables
|
||||
var d3Container = d3.select(element),
|
||||
width = d3Container.node().getBoundingClientRect().width,
|
||||
root,
|
||||
node;
|
||||
|
||||
|
||||
|
||||
// Construct scales
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
var x = d3.scale.linear()
|
||||
.range([0, width]);
|
||||
|
||||
// Vertical
|
||||
var y = d3.scale.linear().range([0, height]);
|
||||
|
||||
// Colors
|
||||
var color = d3.scale.category20();
|
||||
|
||||
|
||||
|
||||
// Create chart
|
||||
// ------------------------------
|
||||
|
||||
// Add SVG element
|
||||
var container = d3Container.append("svg");
|
||||
|
||||
// Add SVG group
|
||||
var svg = container
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(.5,.5)")
|
||||
.style("font-size", 12)
|
||||
.style("overflow", "hidden")
|
||||
.style("text-indent", 2);
|
||||
|
||||
|
||||
|
||||
// Construct chart layout
|
||||
// ------------------------------
|
||||
|
||||
// Treemap
|
||||
var treemap = d3.layout.treemap()
|
||||
.round(false)
|
||||
.size([width, height])
|
||||
.sticky(true)
|
||||
.value(function(d) { return d.size; });
|
||||
|
||||
|
||||
|
||||
// Load data
|
||||
// ------------------------------
|
||||
|
||||
d3.json("assets/demo_data/d3/other/treemap.json", function(data) {
|
||||
node = root = data;
|
||||
var nodes = treemap.nodes(root)
|
||||
.filter(function(d) { return !d.children; });
|
||||
|
||||
|
||||
// Add cells
|
||||
// ------------------------------
|
||||
|
||||
// Bind data
|
||||
var cell = svg.selectAll(".d3-treemap-cell")
|
||||
.data(nodes)
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("class", "d3-treemap-cell")
|
||||
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
|
||||
.style("cursor", "pointer")
|
||||
.on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });
|
||||
|
||||
// Append cell rects
|
||||
cell.append("rect")
|
||||
.attr("width", function(d) { return d.dx - 1; })
|
||||
.attr("height", function(d) { return d.dy - 1; })
|
||||
.style("fill", function(d, i) { return color(i); });
|
||||
|
||||
// Append text
|
||||
cell.append("text")
|
||||
.attr("x", function(d) { return d.dx / 2; })
|
||||
.attr("y", function(d) { return d.dy / 2; })
|
||||
.attr("dy", ".35em")
|
||||
.attr("text-anchor", "middle")
|
||||
.text(function(d) { return d.name; })
|
||||
.style("fill", "#fff")
|
||||
.style("opacity", function(d) { d.width = this.getComputedTextLength(); return d.dx > d.width ? 1 : 0; });
|
||||
});
|
||||
|
||||
|
||||
// Change data
|
||||
// ------------------------------
|
||||
|
||||
d3.selectAll(".treemap_actions").on("change", change);
|
||||
|
||||
// Change data function
|
||||
function change() {
|
||||
treemap.value(this.value == "size" ? size : count).nodes(root);
|
||||
zoom(node);
|
||||
}
|
||||
|
||||
// Size
|
||||
function size(d) {
|
||||
return d.size;
|
||||
}
|
||||
|
||||
// Count
|
||||
function count(d) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
// Zoom
|
||||
function zoom(d) {
|
||||
var kx = width / d.dx, ky = height / d.dy;
|
||||
x.domain([d.x, d.x + d.dx]);
|
||||
y.domain([d.y, d.y + d.dy]);
|
||||
|
||||
// Cell transition
|
||||
var t = svg.selectAll(".d3-treemap-cell").transition()
|
||||
.duration(500)
|
||||
.attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });
|
||||
|
||||
// Cell rect transition
|
||||
t.select("rect")
|
||||
.attr("width", function(d) { return kx * d.dx - 1; })
|
||||
.attr("height", function(d) { return ky * d.dy - 1; })
|
||||
|
||||
// Text transition
|
||||
t.select("text")
|
||||
.attr("x", function(d) { return kx * d.dx / 2; })
|
||||
.attr("y", function(d) { return ky * d.dy / 2; })
|
||||
.style("opacity", function(d) { return kx * d.dx > d.width ? 1 : 0; });
|
||||
|
||||
node = d;
|
||||
d3.event.stopPropagation();
|
||||
}
|
||||
|
||||
// Add click event
|
||||
d3.select(window).on("click", function() { zoom(root); });
|
||||
|
||||
|
||||
|
||||
// Resize chart
|
||||
// ------------------------------
|
||||
|
||||
// Call function on window resize
|
||||
d3.select(window).on('resize', resize);
|
||||
|
||||
// Call function on sidebar width change
|
||||
d3.select('.sidebar-control').on('click', resize);
|
||||
|
||||
// Resize function
|
||||
//
|
||||
// Since D3 doesn't support SVG resize by default,
|
||||
// we need to manually specify parts of the graph that need to
|
||||
// be updated on window resize
|
||||
function resize() {
|
||||
|
||||
// Layout variables
|
||||
width = d3Container.node().getBoundingClientRect().width;
|
||||
|
||||
|
||||
// Layout
|
||||
// -------------------------
|
||||
|
||||
// Main svg width
|
||||
container.attr("width", width);
|
||||
|
||||
// Width of appended group
|
||||
svg.attr("width", width);
|
||||
|
||||
|
||||
// Horizontal range
|
||||
x.range([0, width]);
|
||||
|
||||
// Redraw chart
|
||||
zoom(root);
|
||||
}
|
||||
}
|
||||
});
|
||||
+250
@@ -0,0 +1,250 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # D3.js - waterfall chart
|
||||
*
|
||||
* Demo of waterfall chart setup with .csv data source and rotated axis labels
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: August 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
|
||||
waterfall('#d3-waterfall', 400); // initialize chart
|
||||
|
||||
// Chart setup
|
||||
function waterfall(element, height) {
|
||||
|
||||
|
||||
// Basic setup
|
||||
// ------------------------------
|
||||
|
||||
// Define main variables
|
||||
var d3Container = d3.select(element),
|
||||
margin = {top: 5, right: 10, bottom: 100, left: 50},
|
||||
width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right,
|
||||
height = height - margin.top - margin.bottom,
|
||||
padding = 0.3;
|
||||
|
||||
// Format data
|
||||
function dollarFormatter(n) {
|
||||
n = Math.round(n);
|
||||
var result = n;
|
||||
if (Math.abs(n) > 1000) {
|
||||
result = Math.round(n/1000) + 'K';
|
||||
}
|
||||
return '$' + result;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Construct scales
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
var x = d3.scale.ordinal()
|
||||
.rangeRoundBands([0, width], padding);
|
||||
|
||||
// Vertical
|
||||
var y = d3.scale.linear()
|
||||
.range([height, 0]);
|
||||
|
||||
|
||||
|
||||
// Create axes
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
var xAxis = d3.svg.axis()
|
||||
.scale(x)
|
||||
.orient("bottom");
|
||||
|
||||
// Vertical
|
||||
var yAxis = d3.svg.axis()
|
||||
.scale(y)
|
||||
.orient("left")
|
||||
.tickFormat(function(d) { return dollarFormatter(d); });
|
||||
|
||||
|
||||
|
||||
// Create chart
|
||||
// ------------------------------
|
||||
|
||||
// Container
|
||||
var container = d3Container.append("svg")
|
||||
|
||||
// SVG element
|
||||
var svg = container
|
||||
.attr('width', width + margin.left + margin.right)
|
||||
.attr("height", height + margin.top + margin.bottom)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
||||
|
||||
|
||||
|
||||
// Load data
|
||||
// ------------------------------
|
||||
|
||||
d3.csv("assets/demo_data/d3/other/waterfall.csv", function(error, data) {
|
||||
|
||||
// Pull out values
|
||||
data.forEach(function(d) {
|
||||
d.value = +d.value;
|
||||
});
|
||||
|
||||
// Transform data (i.e., finding cumulative values and total) for easier charting
|
||||
var cumulative = 0;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
data[i].start = cumulative;
|
||||
cumulative += data[i].value;
|
||||
data[i].end = cumulative;
|
||||
data[i].class = ( data[i].value >= 0 ) ? 'positive' : 'negative'
|
||||
}
|
||||
data.push({
|
||||
name: 'Total',
|
||||
end: cumulative,
|
||||
start: 0,
|
||||
class: 'total'
|
||||
});
|
||||
|
||||
|
||||
// Set input domains
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
x.domain(data.map(function(d) { return d.name; }));
|
||||
|
||||
// Vertical
|
||||
y.domain([0, d3.max(data, function(d) { return d.end; })]);
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Append chart elements
|
||||
//
|
||||
|
||||
// Append axes
|
||||
// ------------------------------
|
||||
|
||||
// Horizontal
|
||||
svg.append("g")
|
||||
.attr("class", "d3-axis d3-axis-horizontal d3-axis-strong")
|
||||
.attr("transform", "translate(0," + height + ")")
|
||||
.call(xAxis)
|
||||
.selectAll("text")
|
||||
.style("text-anchor", "end")
|
||||
.attr("dx", "-15px")
|
||||
.attr("dy", "-6px")
|
||||
.attr("transform", function(d) {
|
||||
return "rotate(-90)"
|
||||
});
|
||||
|
||||
// Vertical
|
||||
svg.append("g")
|
||||
.attr("class", "d3-axis d3-axis-vertical d3-axis-strong")
|
||||
.call(yAxis);
|
||||
|
||||
|
||||
// Append bars
|
||||
// ------------------------------
|
||||
|
||||
// Bind data
|
||||
var bar = svg.selectAll(".d3-waterfall-bar")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("g")
|
||||
.attr("class", function(d) { return "d3-waterfall-bar " + d.class })
|
||||
.attr("transform", function(d) { return "translate(" + x(d.name) + ",0)"; });
|
||||
|
||||
// Append bar rects
|
||||
bar.append("rect")
|
||||
.attr("y", function(d) { return y( Math.max(d.start, d.end) ); })
|
||||
.attr("height", function(d) { return Math.abs( y(d.start) - y(d.end) ); })
|
||||
.attr("width", x.rangeBand());
|
||||
|
||||
// Append text
|
||||
bar.append("text")
|
||||
.attr("x", x.rangeBand() / 2)
|
||||
.attr("y", function(d) { return y(d.end) + 5; })
|
||||
.attr("dy", function(d) { return ((d.class=='negative') ? '-' : '') + "1.5em" })
|
||||
.style("fill", "#fff")
|
||||
.style("text-anchor", "middle")
|
||||
.text(function(d) { return dollarFormatter(d.end - d.start);});
|
||||
|
||||
// Apply colors
|
||||
bar.filter(function(d) { return d.class == "positive" }).select('rect').style("fill", "#EF5350");
|
||||
bar.filter(function(d) { return d.class == "negative" }).select('rect').style("fill", "#66BB6A");
|
||||
bar.filter(function(d) { return d.class == "total" }).select('rect').style("fill", "#42A5F5");
|
||||
|
||||
// Add connector line
|
||||
bar.filter(function(d) { return d.class != "total" })
|
||||
.append("line")
|
||||
.attr("class", "d3-waterfall-connector")
|
||||
.attr("x1", x.rangeBand() + 5 )
|
||||
.attr("y1", function(d) { return y(d.end) })
|
||||
.attr("x2", x.rangeBand() / ( 1 - padding) - 5)
|
||||
.attr("y2", function(d) { return y(d.end) })
|
||||
.style("stroke", "#999")
|
||||
.style("stroke-dasharray", 3);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Resize chart
|
||||
// ------------------------------
|
||||
|
||||
// Call function on window resize
|
||||
$(window).on('resize', resize);
|
||||
|
||||
// Call function on sidebar width change
|
||||
$('.sidebar-control').on('click', resize);
|
||||
|
||||
// Resize function
|
||||
//
|
||||
// Since D3 doesn't support SVG resize by default,
|
||||
// we need to manually specify parts of the graph that need to
|
||||
// be updated on window resize
|
||||
function resize() {
|
||||
|
||||
// Layout variables
|
||||
width = d3Container.node().getBoundingClientRect().width - margin.left - margin.right;
|
||||
|
||||
|
||||
// Layout
|
||||
// -------------------------
|
||||
|
||||
// Main svg width
|
||||
container.attr("width", width + margin.left + margin.right);
|
||||
|
||||
// Width of appended group
|
||||
svg.attr("width", width + margin.left + margin.right);
|
||||
|
||||
|
||||
// Axes
|
||||
// -------------------------
|
||||
|
||||
// Horizontal range
|
||||
x.rangeRoundBands([0, width], padding);
|
||||
|
||||
// Horizontal axis
|
||||
svg.selectAll('.d3-axis-horizontal').call(xAxis).selectAll('text').style("text-anchor", "end").attr("dy", "-6px");
|
||||
|
||||
|
||||
// Chart elements
|
||||
// -------------------------
|
||||
|
||||
// Bar group
|
||||
svg.selectAll(".d3-waterfall-bar").attr("transform", function(d) { return "translate(" + x(d.name) + ",0)"; });
|
||||
|
||||
// Bar rect
|
||||
svg.selectAll(".d3-waterfall-bar rect").attr("width", x.rangeBand());
|
||||
|
||||
// Bar text
|
||||
svg.selectAll(".d3-waterfall-bar text").attr("x", x.rangeBand() / 2);
|
||||
|
||||
// Connector line
|
||||
svg.selectAll(".d3-waterfall-connector").attr("x1", x.rangeBand() + 5 ).attr("x2", x.rangeBand() / ( 1 - padding) - 5 );
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user