Related
I was exploring the zoomable circle packing library from d3:
https://observablehq.com/#d3/zoomable-circle-packing
But I cannot for the love of god understand how it works. So I figured I would tinker with it by copying the code into an html file and then experimenting. Unfortunately copy the javascript here into a script tag (while referencing d3) was not sufficient to see a working chart.
To that end I did some more research and found that the package creator had a sample index.html in this post:
https://gist.github.com/mbostock/7607535
I replicated this index.html locally and ran it, which surprisingly worked, but then got the following error: my page doesn't render correctly.
See below image:
Compared to what was expected:
Code replicated here:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: white;
}
.label {
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
</style>
<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");
var color = d3.scaleLinear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);
var pack = d3.pack()
.size([diameter - margin, diameter - margin])
.padding(2);
d3.json("https://raw.githubusercontent.com/d3/d3-hierarchy/v1.1.8/test/data/flare.json", function(error, root) {
if (error) throw error;
root = d3.hierarchy(root)
.sum(function(d) { return d.size; })
.sort(function(a, b) { return b.value - a.value; });
var focus = root,
nodes = pack(root).descendants(),
view;
var circle = g.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.style("fill", function(d) { return d.children ? color(d.depth) : null; })
.on("click", function(d) { if (focus !== d) zoom(d), d3.event.stopPropagation(); });
var text = g.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function(d) { return d.parent === root ? 1 : 0; })
.style("display", function(d) { return d.parent === root ? "inline" : "none"; })
.text(function(d) { return d.data.name; });
var node = g.selectAll("circle,text");
svg
.style("background", color(-1))
.on("click", function() { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
function zoom(d) {
var focus0 = focus; focus = d;
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function(d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function(t) { zoomTo(i(t)); };
});
transition.selectAll("text")
.filter(function(d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function(d) { return d.parent === focus ? 1 : 0; })
.on("start", function(d) { if (d.parent === focus) this.style.display = "inline"; })
.on("end", function(d) { if (d.parent !== focus) this.style.display = "none"; });
}
function zoomTo(v) {
var k = diameter / v[2]; view = v;
node.attr("transform", function(d) {
console.log(d);
console.log(v);
console.log(d.x);
console.log(v[0]);
return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")";
});
circle.attr("r", function(d) { return d.r * k; });
}
});
</script>
In the following part of the code:
root = d3.hierarchy(root)
.sum(function(d) { return d.size; })
.sort(function(a, b) { return b.value - a.value; });
When calling .sum, the attribute size doesn't exists, so D3 is unable to calculate the circle radius, replace it by value and it will work.
I am trying to get the node details (id attribute) when it is right clicked and the contextmenu function is called. I am able to get the node object using var self = d3.select(this); but I am not able to work out the
id attribute of the node (i can see it in the console log though)
I am planning to pass the id to the menu function once I'll get the node.id
JSFiddle
var circle = svg.append("g").selectAll("circle") .data(force.nodes())
.enter().append("circle").attr("r", 6) .call(force.drag)
.on('contextmenu', function(){
d3.event.preventDefault();
var self = d3.select(this);
console.log(self);
var n1=(self[0])[0];
console.log(n1);
menu(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1]);
});
You can pass the datum as a parameter of the function called on the contextmenu event:
.on('contextmenu', function(d) { ... }
which allows you to get the id within the function:
console.log(d.id);
.node {
fill: #000;
}
.cursor {
fill: green;
stroke: brown;
pointer-events: none;
}
.node text {
pointer-events: none;
font: 10px sans-serif;
}
path.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}
#licensing {
fill: green;
}
.link.licensing {
stroke: green;
}
.link.resolved {
stroke-dasharray: 0,2 1;
}
circle {
fill: green;
stroke: red;
stroke-width: 1.5px;
}
text {
font: 10px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 500, height = 300;
var links = [{source:"simulator",target:"monitor" ,type:"resolved"} , {source:"web",target:"monitor" ,type:"resolved"} ];
var nodes = [ {"id":"monitor", "grp":"system"}, {"id":"simulator", "grp":"system"}, {id:"web", grp:"client"}];
function reset() {
}
function contextMenu() {
var height,
width,
margin = 0.1, // fraction of width
items = [],
rescale = false,
style = {
'rect': {
'mouseout': {
'fill': 'rgb(244,244,244)',
'stroke': 'white',
'stroke-width': '1px'
},
'mouseover': {
'fill': 'rgb(200,200,200)'
}
},
'text': {
'fill': 'steelblue',
'font-size': '13'
}
};
function menu(x, y) {
d3.select('.context-menu').remove();
scaleItems();
// Draw the menu
d3.select('svg')
.append('g').attr('class', 'context-menu')
.selectAll('tmp')
.data(items).enter()
.append('g').attr('class', 'menu-entry')
.style({'cursor': 'pointer'})
.on('mouseover', function(){
d3.select(this).select('rect').style(style.rect.mouseover) })
.on('mouseout', function(){
d3.select(this).select('rect').style(style.rect.mouseout) });
d3.selectAll('.menu-entry')
.append('rect')
.attr('x', x)
.attr('y', function(d, i){ return y + (i * height); })
.attr('width', width)
.attr('height', height)
.style(style.rect.mouseout);
d3.selectAll('.menu-entry')
.append('text')
.text(function(d){ return d; })
.attr('x', x)
.attr('y', function(d, i){ return y + (i * height); })
.attr('dy', height - margin / 2)
.attr('dx', margin)
.style(style.text);
// Other interactions
d3.select('body')
.on('click', function() {
d3.select('.context-menu').remove();
});
}
menu.items = function(e) {
if (!arguments.length) return items;
for (i in arguments) items.push(arguments[i]);
rescale = true;
return menu;
}
// Automatically set width, height, and margin;
function scaleItems() {
if (rescale) {
d3.select('svg').selectAll('tmp')
.data(items).enter()
.append('text')
.text(function(d){ return d; })
.style(style.text)
.attr('x', -1000)
.attr('y', -1000)
.attr('class', 'tmp');
var z = d3.selectAll('.tmp')[0]
.map(function(x){ return x.getBBox(); });
width = d3.max(z.map(function(x){ return x.width; }));
margin = margin * width;
width = width + 2 * margin;
height = d3.max(z.map(function(x){ return x.height + margin / 2; }));
// cleanup
d3.selectAll('.tmp').remove();
rescale = false;
}
}
return menu;
}
var width = 400,
height = 200,
radius = 8;
var map = {}
nodes.forEach(function(d,i){
map[d.id] = i;
})
links.forEach(function(d) {
d.source = map[d.source];
d.target = map[d.target];
})
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-200)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");
var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });
var menu = contextMenu().items('first item', 'second option', 'whatever, man');
var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", 6)
.call(force.drag)
.on('contextmenu', function(d){
d3.event.preventDefault();
var self = d3.select(this);
var n1=(self[0])[0];
console.log(d.id);
menu(d3.mouse(svg.node())[0], d3.mouse(svg.node())[1]);
});
var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.id; });
var node = svg.selectAll(".node"),
link = svg.selectAll(".link");
function mousedownNode(d, i) {
nodes.splice(i, 1);
links = links.filter(function(l) {
return l.source !== d && l.target !== d;
});
d3.event.stopPropagation();
refresh();
}
// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
path.attr("d", linkArc);
circle.attr("transform", transform);
text.attr("transform", transform);
}
function linkArc(d) {
var dx = d.target.x - d.source.x,
dy = d.target.y - d.source.y,
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
}
function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}
</script>
In addition: For all the ones that want to know how to be able to show node details (for example the node name) in the context menu itself - this is my solution.
The node details can be taken from the "data" element
The placeholder can be taken from the "d" element
The desired information to show in the context menu has to be written into the "text" attribute
if(d.title == 'ConfigMenuPlaceholder'){
text = 'Config: '+data.name;
}
These lines should be written at the following position:
function createNestedMenu(parent, root, depth = 0) {
var resolve = function (value) {
return utils.toFactory(value).call(root, data, index);
};
parent.selectAll('li')
.data(function (d) {
var baseData = depth === 0 ? menuItems : d.children;
return resolve(baseData);
})
.enter()
.append('li')
.each(function (d) {
var elm = this;
// get value of each data
var isDivider = !!resolve(d.divider);
var isDisabled = !!resolve(d.disabled);
var hasChildren = !!resolve(d.children);
var hasAction = !!d.action;
var text = isDivider ? '<hr>' : resolve(d.title);
if(d.title == 'ConfigMenuPlaceholder'){
text = 'Config: '+data.name;
}
var listItem = d3.select(this)
.classed('is-divider', isDivider)
.classed('is-disabled', isDisabled)
.classed('is-header', !hasChildren && !hasAction)
.classed('is-parent', hasChildren)
.html(text)
.on('click', function () {
// do nothing if disabled or no action
if (isDisabled || !hasAction) return;
d.action(elm, data, index);
//d.action.call(root, data, index);
closeMenu();
});
if (hasChildren) {
// create children(`next parent`) and call recursive
var children = listItem.append('ul').classed('is-children', true);
createNestedMenu(children, root, ++depth)
}
});
}
Here is a parallel coordinate with some sample data
http://plnkr.co/edit/dCNuBsaDNBwr7CrAJUBe?p=preview
Here the numerical axis like column1 , column3 have small number of data so it looks ok. But in practice, I have a big data (something like 600 entries), so numerical ticks in axis become clustered , overlapped.
Is there a way so that it looks good. Like Setting the number of ticks in parallel coordinate. For instance, if I want to change the number of ticks in column1 of this example from 10 to 5.
Any help would be appreciated.
Thanks
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.background path {
fill: none;
stroke: #ddd;
stroke-opacity: .4;
shape-rendering: crispEdges;
}
.foreground path {
fill: none;
stroke: steelblue;
stroke-opacity: .7;
}
.brush .extent {
fill-opacity: .3;
stroke: #fff;
shape-rendering: crispEdges;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
cursor: move;
}
</style>
<body>
<script src="http://d3js.org/d3.v4.min.js"></script>
<script>
var margin = {top: 30, right: 10, bottom: 10, left: 10},
width = 600 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var x = d3.scalePoint().rangeRound([0, width]).padding(1),
y = {},
dragging = {};
var line = d3.line(),
//axis = d3.axisLeft(x),
background,
foreground,
extents;
var container = d3.select("body").append("div")
.attr("class", "parcoords")
.style("width", width + margin.left + margin.right + "px")
.style("height", height + margin.top + margin.bottom + "px");
var svg = container.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var quant_p = function(v){return (parseFloat(v) == v) || (v == "")};
d3.json("convertcsv.json", function(error, cars) {
dimensions = d3.keys(cars[0]);
x.domain(dimensions);
dimensions.forEach(function(d) {
var vals = cars.map(function(p) {return p[d];});
if (vals.every(quant_p)){
y[d] = d3.scaleLinear()
.domain(d3.extent(cars, function(p) {
return +p[d]; }))
.range([height, 0])
console.log(y[d]);
}
else{
vals.sort();
y[d] = d3.scalePoint()
.domain(vals.filter(function(v, i) {return vals.indexOf(v) == i;}))
.range([height, 0],1);
}
})
extents = dimensions.map(function(p) { return [0,0]; });
// Add grey background lines for context.
background = svg.append("g")
.attr("class", "background")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path);
// Add blue foreground lines for focus.
foreground = svg.append("g")
.attr("class", "foreground")
.selectAll("path")
.data(cars)
.enter().append("path")
.attr("d", path);
// Add a group element for each dimension.
var g = svg.selectAll(".dimension")
.data(dimensions)
.enter().append("g")
.attr("class", "dimension")
.attr("transform", function(d) { return "translate(" + x(d) + ")"; })
.call(d3.drag()
.subject(function(d) { return {x: x(d)}; })
.on("start", function(d) {
dragging[d] = x(d);
background.attr("visibility", "hidden");
})
.on("drag", function(d) {
dragging[d] = Math.min(width, Math.max(0, d3.event.x));
foreground.attr("d", path);
dimensions.sort(function(a, b) { return position(a) - position(b); });
x.domain(dimensions);
g.attr("transform", function(d) { return "translate(" + position(d) + ")"; })
})
.on("end", function(d) {
delete dragging[d];
transition(d3.select(this)).attr("transform", "translate(" + x(d) + ")");
transition(foreground).attr("d", path);
background
.attr("d", path)
.transition()
.delay(500)
.duration(0)
.attr("visibility", null);
}));
// Add an axis and title.
var g = svg.selectAll(".dimension");
g.append("g")
.attr("class", "axis")
.each(function(d) { d3.select(this).call(d3.axisLeft(y[d]));})
//text does not show up because previous line breaks somehow
.append("text")
.attr("fill", "black")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return d; });
// Add and store a brush for each axis.
g.append("g")
.attr("class", "brush")
.each(function(d) {
if(y[d].name == 'r'){
// console.log(this);
d3.select(this).call(y[d].brush = d3.brushY().extent([[-8, 0], [8,height]]).on("brush start", brushstart).on("brush", go_brush).on("brush", brush_parallel_chart).on("end", brush_end));
}
else if(y[d].name == 'n')
d3.select(this).call(y[d].brush = d3.brushY().extent([[-8, 0], [15,height]]).on("brush start", brushstart).on("brush", go_brush).on("brush", brush_parallel).on("end", brush_end_ordinal));
})
.selectAll("rect")
.attr("x", -8)
.attr("width", 16);
}); // closing
function position(d) {
var v = dragging[d];
return v == null ? x(d) : v;
}
function transition(g) {
return g.transition().duration(500);
}
// Returns the path for a given data point.
function path(d) {
return line(dimensions.map(function(p) { return [position(p), y[p](d[p])]; }));
}
function go_brush() {
d3.event.sourceEvent.stopPropagation();
}
invertExtent = function(y) {
return domain.filter(function(d, i) { return y === range[i]; });
};
function brushstart(selectionName) {
foreground.style("display", "none")
//console.log(selectionName);
var dimensionsIndex = dimensions.indexOf(selectionName);
//console.log(dimensionsIndex);
extents[dimensionsIndex] = [0, 0];
foreground.style("display", function(d) {
return dimensions.every(function(p, i) {
if(extents[i][0]==0 && extents[i][0]==0) {
return true;
}
return extents[i][1] <= d[p] && d[p] <= extents[i][0];
}) ? null : "none";
});
}
// Handles a brush event, toggling the display of foreground lines.
function brush_parallel_chart() {
for(var i=0;i<dimensions.length;++i){
if(d3.event.target==y[dimensions[i]].brush) {
//if (d3.event.sourceEvent.type === "brush") return;
extents[i]=d3.event.selection.map(y[dimensions[i]].invert,y[dimensions[i]]);
}
}
foreground.style("display", function(d) {
return dimensions.every(function(p, i) {
if(extents[i][0]==0 && extents[i][0]==0) {
return true;
}
return extents[i][1] <= d[p] && d[p] <= extents[i][0];
}) ? null : "none";
});
}
function brush_end(){
if (!d3.event.sourceEvent) return; // Only transition after input.
if (!d3.event.selection) return; // Ignore empty selections.
for(var i=0;i<dimensions.length;++i){
if(d3.event.target==y[dimensions[i]].brush) {
extents[i]=d3.event.selection.map(y[dimensions[i]].invert,y[dimensions[i]]);
extents[i][0] = Math.round( extents[i][0] * 10 ) / 10;
extents[i][1] = Math.round( extents[i][1] * 10 ) / 10;
d3.select(this).transition().call(d3.event.target.move, extents[i].map(y[dimensions[i]]));
}
}
}
// brush for ordinal cases
function brush_parallel() {
for(var i=0;i<dimensions.length;++i){
if(d3.event.target==y[dimensions[i]].brush) {
var yScale = y[dimensions[i]];
var selected = yScale.domain().filter(function(d){
// var s = d3.event.target.extent();
var s = d3.event.selection;
return (s[0] <= yScale(d)) && (yScale(d) <= s[1])
});
var temp = selected.sort();
extents[i] = [temp[temp.length-1], temp[0]];
}
}
foreground.style("display", function(d) {
return dimensions.every(function(p, i) {
if(extents[i][0]==0 && extents[i][0]==0) {
return true;
}
//var p_new = (y[p].ticks)?d[p]:y[p](d[p]);
//return extents[i][1] <= p_new && p_new <= extents[i][0];
return extents[i][1] <= d[p] && d[p] <= extents[i][0];
}) ? null : "none";
});
}
function brush_end_ordinal(){
console.log("hhhhh");
if (!d3.event.sourceEvent) return; // Only transition after input.
if (!d3.event.selection) return; // Ignore empty selections.
for(var i=0;i<dimensions.length;++i){
if(d3.event.target==y[dimensions[i]].brush) {
var yScale = y[dimensions[i]];
var selected = yScale.domain().filter(function(d){
// var s = d3.event.target.extent();
var s = d3.event.selection;
return (s[0] <= yScale(d)) && (yScale(d) <= s[1])
});
var temp = selected.sort();
extents[i] = [temp[temp.length-1], temp[0]];
if(selected.length >1)
d3.select(this).transition().call(d3.event.target.move, extents[i].map(y[dimensions[i]]));
}
}
}
</script>
You can either use d3-axis.ticks() or d3-axis.tickValues([]) to specify custom number of ticks/tick values.
For example, for column1 using tickValues and column3 using ticks:
var g = svg.selectAll(".dimension");
g.append("g")
.attr("class", "axis")
.each(function(d) {
if(d === 'column1') {
d3.select(this).call(d3.axisLeft(y[d]).tickValues([.1, .2, .3, .5,.8]));
} else if(d === 'column3') {
d3.select(this).call(d3.axisLeft(y[d]).ticks(4));
} else {
d3.select(this).call(d3.axisLeft(y[d]));
}
})
A fork of your plunkr: TickValues and ticks DEMO
Hope this helps. Read the docs for more options.
I've tried to use the following code to scale my visualization:
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-ms-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transform: scale(1.5,1.5);
}
However, this causes the d3.behavior.drag() to misbehave, as the drag will no longer follow the mouse, but move too quickly. How can I scale while still maintaining the correct behaviour of the drag mechanics? Any kind of code (CSS/javascript/whatever) is welcome as long as it achieves the purpose.
Below is my code and data. Feel free to comment on potential improvements on my code as it is my first D3 visualization.
timeline.js
// Some code used from http://codepen.io/idan/pen/xejuD, which uses the MIT license (see https://blog.codepen.io/legal/licensing/).
/* The MIT License (MIT)
Copyright (c) Idan Gazit
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify,
merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall
be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
DEALINGS IN THE SOFTWARE. */
// visualization parameters
var text_minutes = 20;
var axisOpacity = 0.6;
var large_tick_size = 24;
var rectHourSize = graphWidth / (7 * 8);
var daylabel_displacement = 12;
var half_a_week_in_min = 5040;
// slider variables
var sliderscale, startWeek, endWeek;
/* var leftWidth, rightWidth, leftBorder, rightBorder; */
var slidervalue_left, slidervalue_right;
var sliderborder_translate = 0.5;
var sliderborder_area_width = 8;
/* var slidercenter_pixels; */
// window
var margin = {
top : 20,
right : 10,
bottom : 30,
left : 35
};
var graphWidth = 700;
var graphHeight = 160;
var width = graphWidth + margin.left + margin.right;
var height = graphHeight + margin.top + margin.bottom;
var yaxisHeight = 100;
// kernel density plot
var bandwidth = 5;
var granularity = 1;
var kernelHeight = 30;
// visualization global variables
var daysLabelsAxis, daysTickmarksAxis, hoursAxis, hoursTickSpacing, hoursg, start, end, svg, weekscale, shownTicks, records;
var recordTypes = d3.map();
var readyForInput = false;
var y = d3.scale.ordinal()
.rangeRoundBands([yaxisHeight, 0], 0.3);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.outerTickSize(0)
.tickFormat(function (d, i) {
return recordTypes.get(d).label;
});
var colorOf = d3.scale.category10();
var parseDate = d3.time.format("%d-%m-%Y %H:%M").parse;
var results = Papa.parse("timeseries.csv", {
header : true,
download : true,
dynamicTyping : true,
delimiter : ",",
skipEmptyLines : true,
complete : function (results) {
records = results.data;
records.forEach(function (d) {
d.time = parseDate(d.time);
d.time = moment(d.time);
});
initializeStaticWindow();
defineScales();
drawKernelDensity();
drawGraphOutline();
initializeScaler();
updateWeekScale();
prepareAxis();
visualizeData();
readyForInput = true;
}
});
function initializeStaticWindow() {
svg = d3.select("body").append("svg")
.attr("id", "svgID")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// set types of records for y-axis
recordTypes.set("inc_call", {
label : "in",
color : "#438DCA",
order : 1
});
recordTypes.set("out_call", {
label : "out",
color : "#245A76",
order : 2
});
recordTypes.set("inc_text", {
label : "in",
color : "#70C05A",
order : 3
});
recordTypes.set("out_text", {
label : "out",
color : "#326B26",
order : 4
});
records = records.sort(function (a, b) {
return recordTypes.get(b.type).order - recordTypes.get(a.type).order;
});
y.domain(records.map(function (d) {
return d.type;
}));
}
function defineScales() {
records.forEach(function (d, i) {
if (i == 0) {
start = d.time;
end = d.time;
} else {
start = moment.min(start, d.time);
end = moment.max(end, d.time);
}
});
start = moment(start).startOf('day');
end = moment(end).startOf('day').add(1, 'days');
// Turn into pure dates
var daysNum = dayDiff(start, end);
// kernel slider
var slider_week_width = (7 / daysNum) * graphWidth;
sliderscale = d3.time.scale().nice(d3.time.day).domain([start.toDate(), end.toDate()]).range([0, graphWidth]).clamp(true);
records.forEach(function (d) {
d.time_from_start = hoursFromStart(d.time)
});
slidervalue_left = sliderscale(moment(start));
slidervalue_right = sliderscale(moment(start).add(7, 'days'));
}
function drawKernelDensity() {
// extract only timestamps
timestamps = pluck(records, 'time_from_start');
// create kernel
kde = science.stats.kde().sample(timestamps);
var kernel_output = kde.bandwidth(bandwidth)(d3.range(0, hoursFromStart(end), granularity));
kernel_output = pluck(kernel_output, 1)
var kernel_max = ss.quantile(kernel_output, 0.975);
// scales to transform data
kernel_scale_x = d3.scale.linear().domain([0, hoursFromStart(end)]).range([0, graphWidth]);
kernel_scale_y = d3.scale.linear().domain([0, kernel_max]).range([0, kernelHeight]).clamp(true);
var line = d3.svg.line()
.x(function (d) {
return kernel_scale_x(d[0]);
})
.y(function (d) {
return graphHeight - kernel_scale_y(d[1]);
});
svg.selectAll("kde")
.data([bandwidth])
.enter().append("path")
.attr("d", line(kde.bandwidth(bandwidth)(d3.range(0, hoursFromStart(end), granularity))))
.attr("stroke", "#438DCA");
}
function initializeScaler() {
/* updateBorderWidth();
moveBorders(); */
var whiteSelectionData = [{
x : slidervalue_left,
width : slidervalue_right - slidervalue_left
}
]
svg.selectAll("whiteSelection")
.data(whiteSelectionData)
.enter().append('rect')
.attr("x", function (d) {
return d.x;
})
.attr("y", graphHeight - kernelHeight - 1)
.attr("width", function (d) {
return d.width;
})
.attr("height", kernelHeight + 2)
.attr("class", "whiteSelectionArea")
.call(dragSelection);
var greyAreaData = [{
x : 0,
width : 0.01,
side : "leftGrey",
visibility : "visible"
}, {
x : slidervalue_right,
width : graphWidth - slidervalue_right,
side : "rightGrey",
visibility : "visible"
}
]
svg.selectAll("greyArea")
.data(greyAreaData)
.enter().append('rect')
.attr("x", function (d) {
return d.x;
})
.attr("y", graphHeight - kernelHeight - 1)
.attr("width", function (d) {
return d.width;
})
.attr("visibility", function (d) {
return d.visibility;
})
.attr("height", kernelHeight + 2)
.attr("class", function (d) {
return d.side;
});
var borderLineData = [{
x : 0 + sliderborder_translate,
side : "leftBorderLine"
}, {
x : slidervalue_right + sliderborder_translate,
side : "rightBorderLine"
}
]
svg.selectAll("borderLine")
.data(borderLineData)
.enter().append('line')
.attr("x1", function (d) {
return d.x;
})
.attr("x2", function (d) {
return d.x;
})
.attr("y1", graphHeight - kernelHeight - 1)
.attr("y2", graphHeight + 1)
.attr("class", function (d) {
return d.side;
});
var borderEllipseData = [{
cx : 0 + sliderborder_translate,
side : "leftBorderEllipse"
}, {
cx : slidervalue_right + sliderborder_translate,
side : "rightBorderEllipse"
}
]
svg.selectAll("ellipse")
.data(borderEllipseData)
.enter().append('ellipse')
.attr("cx", function (d) {
return d.cx;
})
.attr("cy", graphHeight - kernelHeight / 2)
.attr("rx", 5)
.attr("ry", 8)
.attr("class", function (d) {
return d.side;
});
var borderRectData = [{
cx : 0 + sliderborder_translate,
side : "leftBorderRect",
width : 3,
height : 5
}, {
cx : slidervalue_right + sliderborder_translate,
side : "rightBorderRect",
width : 3,
height : 5
}
]
svg.selectAll("borderRect")
.data(borderRectData)
.enter().append('rect')
.attr("x", function (d) {
return d.cx - d.width / 2;
})
.attr("y", function (d) {
return graphHeight - kernelHeight / 2 - d.height / 2;
})
.attr("width", function (d) {
return d.width;
})
.attr("height", function (d) {
return d.height;
})
.attr("class", function (d) {
return d.side;
});
var borderAreaData = [{
x : slidervalue_left - sliderborder_area_width / 2,
width : sliderborder_area_width,
side : "leftBorderArea",
visibility : "visible"
}, {
x : slidervalue_right - sliderborder_area_width / 2,
width : sliderborder_area_width,
side : "rightBorderArea",
visibility : "visible"
}
]
svg.selectAll("borderSelectArea")
.data(borderAreaData)
.enter().append('rect')
.attr("x", function (d) {
return d.x;
})
.attr("y", graphHeight - kernelHeight - 1)
.attr("width", function (d) {
return d.width;
})
.attr("visibility", function (d) {
return d.visibility;
})
.attr("height", kernelHeight + 2)
.attr("class", function (d) {
return d.side;
}).call(dragBorder);
}
function updateWeekScale() {
startWeek = sliderscale.invert(slidervalue_left);
endWeek = sliderscale.invert(slidervalue_right);
shownDays = dayDiff(startWeek, endWeek)
weekscale = d3.time.scale().nice(d3.time.day).domain([startWeek, endWeek]).range([0, graphWidth]);
}
function prepareAxis() {
function diffMinutesFromLeftSide(d) {
var textMinutes = d.getMinutes();
var startWeek
}
// Labels without tickmarks to describe the date
daysLabelsAxis = d3.svg.axis().scale(weekscale).orient('bottom').ticks(d3.time.hour, 12).tickSize(0).tickPadding(daylabel_displacement).tickFormat(function (d) {
var formatter;
if (minuteDiff(startWeek, moment(d)) > 180 && minuteDiff(moment(d), endWeek) > 180) { // remove text crossing the edges
if (d.getHours() === 12) {
if ((d.getDate() === 1 || moment(d).isSame(start, 'day')) && shownDays < 16) {
// if the month changed or it's the first label, show the month
formatter = d3.time.format.utc('%a %d %b');
} else {
// else no month
formatter = d3.time.format.utc('%a %d');
}
return formatter(d);
} else {
return null;
}
}
});
// small tickmarks every three hours, but only label 6a and 6p
hoursAxis = d3.svg.axis().scale(weekscale).orient('bottom').ticks(d3.time.hour, 3).tickPadding(6).tickSize(8).tickFormat(function (d) {
var hours;
hours = d.getHours();
if (hours === 6) {
return null;
/* return sun; */
} else if (hours === 18) {
return null;
/* return moon; */
} else {
return null;
}
});
// draw axis below data
hoursg = svg.append('g').classed('axis', true).classed('hours', true).classed('labeled', true).attr("transform", "translate(0.5," + yaxisHeight + ")").call(hoursAxis).style("opacity", axisOpacity);
// Need the pixel dimensions between each tick e.g. three hours.
hoursTickSpacing = weekscale(moment(start).add(3, 'hours').toDate()) - weekscale(start.toDate());
// add day/night shading by adding elements to the dom for every tickmark in the hours axis.
var hourTicks = hoursg.selectAll('g.tick');
//hourTicks.filter(':not(:last-child)').insert('rect', ':first-child').attr('class', function (d, i) {
//hourTicks.insert('rect', ':not(:last-child)').attr('class', function (d, i) {
hourTicks.insert('rect', ':first-child').attr('class', function (d, i) {
var hours;
hours = d.getHours();
if (hours < 6 || hours >= 18) {
return 'nighttime';
} else {
return 'daytime';
}
}).attr('x', 0).attr('width', hoursTickSpacing).attr('height', 8);
/* function (d, i) {
return i != daysNum * 8 ? 8 : 0; // remove last tick in week..
}); */
// Larger tickmarks to denote midnights without labels
daysTickmarksAxis = d3.svg.axis().scale(weekscale).orient('bottom').ticks(d3.time.day, 1).tickFormat('').tickSize(large_tick_size).tickPadding(6);
// draw axes below data
svg.append('g').classed('axis', true).classed('days', true).attr("transform", "translate(0.5," + (yaxisHeight) + ")").call(daysTickmarksAxis);
svg.append('g').classed('axis', true).classed('days', true).classed('labeled', true).attr("transform", "translate(0.5," + (yaxisHeight) + ")").call(daysLabelsAxis).style("opacity", axisOpacity);
// draw y-axis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0.5,0.0)")
.style("opacity", axisOpacity)
.call(yAxis);
svg.selectAll("y_axis_vertical")
.data(['call', 'text'])
.enter().append("text")
.attr("y", function (d, i) {
return 4 + i * 45;
}) // function(d,i) { return i+"em"})
.attr("x", "-32")
.style("writing-mode", "tb")
.style("glyph-orientation-vertical", 0)
.style("letter-spacing", -1)
.style("opacity", axisOpacity)
.style("font-family", "FontAwesome")
.text(function (d, i) {
return d;
});
}
function visualizeData() {
svg.selectAll(".bar")
.data(records)
.enter().append("rect")
.attr("class", "bar")
.attr("y", function (d) {
return y(d.type);
})
.attr("height", y.rangeBand())
.attr("x", function (d) {
return weekscale(d.time);
})
.attr("width", function (d) {
// set texts to a fixed length (and make calls minimum length)
length = d.type == "inc_text" || d.type == "out_text" ? text_minutes : d.call_duration/60;
if (length < text_minutes) {
length = text_minutes;
}
// find length of call on time scale by finding length between start and start + call_duration
var rect_width = weekscale(moment(start).add(length, 'minutes').toDate()) - weekscale(start.toDate());
return rect_width;
})
.style("fill", function (d) {
return recordTypes.get(d.type).color;
})
// clip sides
.style("opacity", function (d) {
return (weekscale(d.time) < 0 || weekscale(d.time) > graphWidth) ? 0.0 : 1.0;
});
}
function drawGraphOutline() {
svg.append("line")
.attr("x1", 0.5)
.attr("x2", 0.5)
.attr("y1", 0)
.attr("y2", graphHeight + 1)
.attr("stroke-width", 1)
.attr("stroke", "black");
svg.append("line")
.attr("x1", graphWidth + 0.5)
.attr("x2", graphWidth + 0.5)
.attr("y1", 0)
.attr("y2", graphHeight + 1)
.attr("stroke-width", 1)
.attr("stroke", "black");
}
function updateVisualization() {
if (readyForInput) {
cleanAxisWindow();
updateWeekScale();
prepareAxis();
visualizeData();
}
}
function cleanAxisWindow() {
svg.selectAll(".axis").remove()
svg.selectAll("text").remove()
svg.selectAll(".bar").remove()
svg.selectAll(".handle").remove()
}
function updateBorder(x, whichBorder) {
svg.selectAll(whichBorder.concat("Area"))
.each(function (d) {
d.x = x - sliderborder_area_width / 2
})
.attr("x", x - sliderborder_area_width / 2);
// translate visuals slightly to fit graph
x = x + sliderborder_translate
svg.selectAll(whichBorder.concat("Line"))
.attr("x1", x)
.attr("x2", x);
svg.selectAll(whichBorder.concat("Ellipse"))
.attr("cx", x);
svg.selectAll(whichBorder.concat("Rect"))
.attr("x", function (d) {
return x - d.width / 2
});
}
function updateGreyArea(x, width, whichGrey) {
width = Math.max(width, 0.01);
svg.selectAll(whichGrey)
.attr("x", x)
.attr("width", width)
.each(function (d) {
d.x = x
})
.each(function (d) {
d.width = width
});
}
// Function for grabbing a specific property from an array
pluck = function (ary, prop) {
return ary.map(function (x) {
return x[prop]
});
}
function checkBordersMoreThanWeekApart(d, slider_drag) {
if (d.side == "leftBorderArea") {
temp_left = d.x + slider_drag + sliderborder_area_width / 2;
temp_right = slidervalue_right;
} else {
temp_left = slidervalue_left;
temp_right = d.x + slider_drag + sliderborder_area_width / 2;
}
left_date = sliderscale.invert(temp_left);
right_date = sliderscale.invert(temp_right);
num_days = dayDiff(left_date, right_date);
return (num_days >= 4 && num_days <= 18);
}
var dragBorder = d3.behavior.drag()
.on('drag', function (d) {
slider_drag = d3.event.dx;
/* Hitting edges of graph? */
if (d.x + sliderborder_area_width / 2 + slider_drag < 0) {
d.x = -sliderborder_area_width / 2;
} else if (d.x + sliderborder_area_width / 2 + slider_drag > graphWidth) {
d.x = graphWidth - sliderborder_area_width / 2;
} else {
/* Borders too close to each other? */
if (checkBordersMoreThanWeekApart(d, slider_drag))
d.x += slider_drag;
}
if (d.side == "leftBorderArea") {
slidervalue_left = d.x + sliderborder_area_width / 2;
} else {
slidervalue_right = d.x + sliderborder_area_width / 2;
}
updateScalerObjects();
updateVisualization();
});
var dragSelection = d3.behavior.drag()
.on('drag', function (d) {
slider_drag = d3.event.dx;
/* Hitting edges of graph? */
if (d.x + slider_drag < 0) {
d.x = 0;
} else if (d.x + d.width + slider_drag > graphWidth) {
d.x = graphWidth - d.width;
} else {
d.x += slider_drag;
}
slidervalue_left = d.x;
slidervalue_right = d.x + d.width;
updateScalerObjects();
updateVisualization();
});
function updateScalerObjects() {
svg.selectAll(".whiteSelectionArea")
.attr("width", slidervalue_right - slidervalue_left)
.attr("x", slidervalue_left)
.each(function (d) {
d.x = slidervalue_left
})
.each(function (d) {
d.width = slidervalue_right - slidervalue_left
});
updateGreyArea(0, slidervalue_left, ".leftGrey");
updateBorder(slidervalue_left, ".leftBorder");
updateGreyArea(slidervalue_right, graphWidth - slidervalue_right, ".rightGrey");
updateBorder(slidervalue_right, ".rightBorder");
}
function inputData(d) {
d.time = parseDate(d.time);
return d;
}
function dayDiff(date_start, date_end) {
var dr = moment.range(date_start, date_end);
return dr.diff('days');
}
function hourDiff(date_start, date_end) {
var dr = moment.range(date_start, date_end);
return dr.diff('hours');
}
function minuteDiff(date_start, date_end) {
var dr = moment.range(date_start, date_end);
return dr.diff('minutes');
}
function hoursFromStart(moment) {
return hourDiff(start, moment);
}
function minFromStart(moment) {
return minuteDiff(start, moment);
}
axis.css
html, body {
min-width: 100%;
min-height: 100vh;
padding: 0;
margin: 0;
font-family: 'FontAwesome'; /* "Source Sans Pro"; */
font-weight: 300;
font-size: 10px;
cursor: default;
}
svg rect.background {
cursor: default !important;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
opacity: 1.0;
}
.x.axis path {
display: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-ms-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transform: scale(1.5,1.5);
}
// Labels
text {
opacity: 0;
}
&.labeled text {
opacity: 1;
}
&.hours text {
fill: #ccc;
font-size: 1rem;
font-family: "FontAwesome";
}
&.days text {
fill: #999;
font-size: 0.9rem;
text-transform: uppercase;
}
// strokes for the two days axes
&.days {
path, line { stroke: #ccc; }
// don't draw strokes for the labeled axis
&.labeled {
path, line { stroke: none; }
}
}
.nighttime {
fill: darken(#2980b9, 10%);
fill-opacity: 0.15;
}
.daytime {
fill: #f1c40f;
fill-opacity: 0.25;
} /**/
.leftGrey {
fill: darken(#2980b9, 10%);
fill-opacity: 0.07;
cursor: default !important;
}
.rightGrey {
fill: darken(#2980b9, 10%);
fill-opacity: 0.07;
cursor: default !important;
}
.whiteSelectionArea {
fill-opacity: 0;
cursor: move !important;
}
.leftBorderLine{
stroke-width: 2;
stroke: #727272 ;
}
.rightBorderLine{
stroke-width: 2;
stroke: #727272 ;
}
.leftBorderArea {
fill: darken(#2980b9, 10%);
fill-opacity: 0.01;
cursor: col-resize !important;
}
.rightBorderArea {
fill: darken(#2980b9, 10%);
fill-opacity: 0.01;
cursor: col-resize !important;
}
.leftBorderEllipse {
fill: white;
stroke: #727272 ;
}
.rightBorderEllipse {
fill: white;
stroke: #727272 ;
}
.leftBorderRect {
fill: #727272;
stroke-width: 0;
}
.rightBorderRect {
fill: #727272;
stroke-width: 0;
}
path{
fill: none;
stroke: #438DCA;
stroke-width: 1;
stroke-opacity: 0.6;
shape-rendering: crispEdges;
}
}
index.html
<!DOCTYPE html>
<meta charset = "utf-8">
<body>
<script type="text/javascript" src="d3.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="moment-range.js"></script>
<script type="text/javascript" src="papaparse.js"></script>
<script type="text/javascript" src="science.v1.js"></script>
<script type="text/javascript" src="simple_statistics.js"></script>
<link href = "axis.css" rel = "stylesheet" type = "text/css"/>
<script type="text/javascript" src="timeline.js"></script>
</body>
timeseries.csv: http://tny.cz/38e361e1 (too long to be allowed to paste it here)
I am new to d3.js any one help me ,I want donut revenue chart with total value at centre with two label separate outside circle.but ,I cannot add one more label outside the circle and middle total value.
Here is my code,
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="pie-chart"></div>
<script>
var div = d3.select("body").append("div").attr("class", "toolTip");
var w = 650;
var h = 400;
var r = 100;
var ir = 75;
var textOffset = 24;
var tweenDuration = 1050;
//OBJECTS TO BE POPULATED WITH DATA LATER
var lines, valueLabels, nameLabels;
var pieData = [];
var oldPieData = [];
var filteredPieData = [];
//D3 helper function to populate pie slice parameters from array data
var donut = d3.layout.pie().value(function(d){
return d.itemValue;
});
//D3 helper function to create colors from an ordinal scale
var color = d3.scale.category20c();
//D3 helper function to draw arcs, populates parameter "d" in path object
var arc = d3.svg.arc()
.startAngle(function(d){ return d.startAngle; })
.endAngle(function(d){ return d.endAngle; })
.innerRadius(ir)
.outerRadius(r);
///////////////////////////////////////////////////////////
// GENERATE FAKE DATA /////////////////////////////////////
///////////////////////////////////////////////////////////
var data;
var dataStructure = [
{
"data":[
{
"itemLabel":"Suv",
"itemValue":7165.0
},
{
"itemLabel":"Sedans",
"itemValue":2430.0
},
{
"itemLabel":"Hatchback",
"itemValue":1998.0
},
{
"itemLabel":"VAN",
"itemValue": 898.0
},
],
"label":"2007"
},
];
///////////////////////////////////////////////////////////
// CREATE VIS & GROUPS ////////////////////////////////////
///////////////////////////////////////////////////////////
var vis = d3.select("#pie-chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
//GROUP FOR ARCS/PATHS
var arc_group = vis.append("svg:g")
.attr("class", "arc")
.attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");
//GROUP FOR LABELS
var label_group = vis.append("svg:g")
.attr("class", "label_group")
.attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");
//GROUP FOR CENTER TEXT
var center_group = vis.append("svg:g")
.attr("class", "center_group")
.attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");
//PLACEHOLDER GRAY CIRCLE
// var paths = arc_group.append("svg:circle")
// .attr("fill", "#EFEFEF")
// .attr("r", r);
///////////////////////////////////////////////////////////
// CENTER TEXT ////////////////////////////////////////////
///////////////////////////////////////////////////////////
//WHITE CIRCLE BEHIND LABELS
var whiteCircle = center_group.append("svg:circle")
.attr("fill", "white")
.attr("r", ir);
///////////////////////////////////////////////////////////
// STREAKER CONNECTION ////////////////////////////////////
///////////////////////////////////////////////////////////
// to run each time data is generated
function update(number) {
data = dataStructure[number].data;
oldPieData = filteredPieData;
pieData = donut(data);
var sliceProportion = 0; //size of this slice
filteredPieData = pieData.filter(filterData);
function filterData(element, index, array) {
element.name = data[index].itemLabel;
element.value = data[index].itemValue;
sliceProportion += element.value;
return (element.value > 0);
}
//DRAW ARC PATHS
paths = arc_group.selectAll("path").data(filteredPieData);
paths.enter().append("svg:path")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.attr("fill", function(d, i) { return color(i); })
.transition()
.duration(tweenDuration)
.attrTween("d", pieTween);
paths
.transition()
.duration(tweenDuration)
.attrTween("d", pieTween);
paths.exit()
.transition()
.duration(tweenDuration)
.attrTween("d", removePieTween)
.remove();
paths.on("mousemove", function(d){
div.style("left", d3.event.pageX+10+"px");
div.style("top", d3.event.pageY-25+"px");
div.style("display", "inline-block");
div.html((d.data.itemLabel)+"<br>"+(d.data.itemValue));
});
paths.on("mouseout", function(d){
div.style("display", "none");
});
//DRAW TICK MARK LINES FOR LABELS
lines = label_group.selectAll("line").data(filteredPieData);
lines.enter().append("svg:line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", -r-3)
.attr("y2", -r-18)
.attr("stroke", "gray")
.attr("transform", function(d) {
return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")";
});
lines.transition()
.duration(tweenDuration)
.attr("transform", function(d) {
return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")";
});
lines.exit().remove();
//DRAW LABELS WITH PERCENTAGE VALUES
valueLabels = label_group.selectAll("text.value").data(filteredPieData)
.attr("dy", function(d){
if ((d.startAngle+d.endAngle)/2 > Math.PI/2 && (d.startAngle+d.endAngle)/2 < Math.PI*1.5 ) {
return 5;
} else {
return -7;
}
})
.attr("text-anchor", function(d){
if ( (d.startAngle+d.endAngle)/2 < Math.PI ){
return "beginning";
} else {
return "end";
}
})
.text(function(d){
var percentage = (d.value/sliceProportion)*100;
return percentage.toFixed(1) + "%";
});
valueLabels.enter().append("svg:text")
.attr("class", "value")
.attr("transform", function(d) {
return "translate(" + Math.cos(((d.startAngle+d.endAngle - Math.PI)/2)) * (r+textOffset) + "," + Math.sin((d.startAngle+d.endAngle - Math.PI)/2) * (r+textOffset) + ")";
})
.attr("dy", function(d){
if ((d.startAngle+d.endAngle)/2 > Math.PI/2 && (d.startAngle+d.endAngle)/2 < Math.PI*1.5 ) {
return 5;
} else {
return -7;
}
})
.attr("text-anchor", function(d){
if ( (d.startAngle+d.endAngle)/2 < Math.PI ){
return "beginning";
} else {
return "end";
}
}).text(function(d){
var percentage = (d.value/sliceProportion)*100;
return percentage.toFixed(1) + "%";
});
valueLabels.transition().duration(tweenDuration).attrTween("transform", textTween);
valueLabels.exit().remove();
//DRAW LABELS WITH ENTITY NAMES
nameLabels = label_group.selectAll("text.units").data(filteredPieData)
.attr("dy", function(d){
if ((d.startAngle+d.endAngle)/2 > Math.PI/2 && (d.startAngle+d.endAngle)/2 < Math.PI*1.5 ) {
return 17;
} else {
return 5;
}
})
.attr("text-anchor", function(d){
if ((d.startAngle+d.endAngle)/2 < Math.PI ) {
return "beginning";
} else {
return "end";
}
}).text(function(d){
return d.name;
});
nameLabels.enter().append("svg:text")
.attr("class", "units")
.attr("transform", function(d) {
return "translate(" + Math.cos(((d.startAngle+d.endAngle - Math.PI)/2)) * (r+textOffset) + "," + Math.sin((d.startAngle+d.endAngle - Math.PI)/2) * (r+textOffset) + ")";
})
.attr("dy", function(d){
if ((d.startAngle+d.endAngle)/2 > Math.PI/2 && (d.startAngle+d.endAngle)/2 < Math.PI*1.5 ) {
return 18;
} else {
return 5;
}
})
.attr("text-anchor", function(d){
if ((d.startAngle+d.endAngle)/2 < Math.PI ) {
return "beginning";
} else {
return "end";
}
}).text(function(d){
return d.name;
});
nameLabels.transition().duration(tweenDuration).attrTween("transform", textTween);
nameLabels.exit().remove();
}
///////////////////////////////////////////////////////////
// FUNCTIONS //////////////////////////////////////////////
///////////////////////////////////////////////////////////
// Interpolate the arcs in data space.
function pieTween(d, i) {
var s0;
var e0;
if(oldPieData[i]){
s0 = oldPieData[i].startAngle;
e0 = oldPieData[i].endAngle;
} else if (!(oldPieData[i]) && oldPieData[i-1]) {
s0 = oldPieData[i-1].endAngle;
e0 = oldPieData[i-1].endAngle;
} else if(!(oldPieData[i-1]) && oldPieData.length > 0){
s0 = oldPieData[oldPieData.length-1].endAngle;
e0 = oldPieData[oldPieData.length-1].endAngle;
} else {
s0 = 0;
e0 = 0;
}
var i = d3.interpolate({startAngle: s0, endAngle: e0}, {startAngle: d.startAngle, endAngle: d.endAngle});
return function(t) {
var b = i(t);
return arc(b);
};
}
function removePieTween(d, i) {
s0 = 2 * Math.PI;
e0 = 2 * Math.PI;
var i = d3.interpolate({startAngle: d.startAngle, endAngle: d.endAngle}, {startAngle: s0, endAngle: e0});
return function(t) {
var b = i(t);
return arc(b);
};
}
function textTween(d, i) {
var a;
if(oldPieData[i]){
a = (oldPieData[i].startAngle + oldPieData[i].endAngle - Math.PI)/2;
} else if (!(oldPieData[i]) && oldPieData[i-1]) {
a = (oldPieData[i-1].startAngle + oldPieData[i-1].endAngle - Math.PI)/2;
} else if(!(oldPieData[i-1]) && oldPieData.length > 0) {
a = (oldPieData[oldPieData.length-1].startAngle + oldPieData[oldPieData.length-1].endAngle - Math.PI)/2;
} else {
a = 0;
}
var b = (d.startAngle + d.endAngle - Math.PI)/2;
var fn = d3.interpolateNumber(a, b);
return function(t) {
var val = fn(t);
return "translate(" + Math.cos(val) * (r+textOffset) + "," + Math.sin(val) * (r+textOffset) + ")";
};
}
update(0);
</script>
css:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
font-weight: 300;
}
#pie-chart {
background-color: #ffffff;
/*border: 1px solid gray;*/
font: 10px sans-serif;
height: 400px;
text-shadow: none;
width: 650px;
margin-left: auto;
margin-right:auto;
}
#pie-chart .total{
font-size: 18px;
font-weight: bold;
}
#pie-chart .units{
fill: gray;
font-size: 12px;
}
#pie-chart .label{
fill: #CCC;
font-size: 12px;
}
#pie-chart .value{
font-size: 14px;
}
#slider label {
position: absolute;
width: 20px;
margin-left: -20px;
text-align: center;
margin-top: 30px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.toolTip {
position: absolute;
display: none;
width: auto;
height: auto;
background: none repeat scroll 0 0 white;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: black;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}
var div = d3.select("body").append("div").attr("class", "toolTip");
var w = 650;
var h = 400;
var r = 100;
var ir = 75;
var textOffset = 24;
var tweenDuration = 1050;
//OBJECTS TO BE POPULATED WITH DATA LATER
var lines, valueLabels, nameLabels;
var pieData = [];
var oldPieData = [];
var filteredPieData = [];
//D3 helper function to populate pie slice parameters from array data
var donut = d3.layout.pie().value(function(d){
return d.itemValue;
});
//D3 helper function to create colors from an ordinal scale
var color = d3.scale.category20c();
//D3 helper function to draw arcs, populates parameter "d" in path object
var arc = d3.svg.arc()
.startAngle(function(d){ return d.startAngle; })
.endAngle(function(d){ return d.endAngle; })
.innerRadius(ir)
.outerRadius(r);
///////////////////////////////////////////////////////////
// GENERATE FAKE DATA /////////////////////////////////////
///////////////////////////////////////////////////////////
var data;
var dataStructure = [
{
"data":[
{
"itemLabel":"Suv",
"itemValue":7165.0
},
{
"itemLabel":"Sedans",
"itemValue":2430.0
},
{
"itemLabel":"Hatchback",
"itemValue":1998.0
},
{
"itemLabel":"VAN",
"itemValue": 898.0
},
],
"label":"2007"
},
];
///////////////////////////////////////////////////////////
// CREATE VIS & GROUPS ////////////////////////////////////
///////////////////////////////////////////////////////////
var vis = d3.select("#pie-chart").append("svg:svg")
.attr("width", w)
.attr("height", h);
//GROUP FOR ARCS/PATHS
var arc_group = vis.append("svg:g")
.attr("class", "arc")
.attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");
//GROUP FOR LABELS
var label_group = vis.append("svg:g")
.attr("class", "label_group")
.attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");
//GROUP FOR CENTER TEXT
var center_group = vis.append("svg:g")
.attr("class", "center_group")
.attr("transform", "translate(" + (w/2) + "," + (h/2) + ")");
//PLACEHOLDER GRAY CIRCLE
// var paths = arc_group.append("svg:circle")
// .attr("fill", "#EFEFEF")
// .attr("r", r);
///////////////////////////////////////////////////////////
// CENTER TEXT ////////////////////////////////////////////
///////////////////////////////////////////////////////////
//WHITE CIRCLE BEHIND LABELS
var whiteCircle = center_group.append("svg:circle")
.attr("fill", "white")
.attr("r", ir);
var centerText='';
///////////////////////////////////////////////////////////
// STREAKER CONNECTION ////////////////////////////////////
///////////////////////////////////////////////////////////
// to run each time data is generated
function update(number) {
data = dataStructure[number].data;
oldPieData = filteredPieData;
pieData = donut(data);
var sliceProportion = 0; //size of this slice
filteredPieData = pieData.filter(filterData);
function filterData(element, index, array) {
element.name = data[index].itemLabel;
element.value = data[index].itemValue;
sliceProportion += element.value;
return (element.value > 0);
}
//DRAW ARC PATHS
paths = arc_group.selectAll("path").data(filteredPieData);
paths.enter().append("svg:path")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.attr("fill", function(d, i) { return color(i); })
.transition()
.duration(tweenDuration)
.attrTween("d", pieTween);
paths
.transition()
.duration(tweenDuration)
.attrTween("d", pieTween);
paths.exit()
.transition()
.duration(tweenDuration)
.attrTween("d", removePieTween)
.remove();
paths.on("mousemove", function(d){
div.style("left", d3.event.pageX+10+"px");
div.style("top", d3.event.pageY-25+"px");
div.style("display", "inline-block");
div.html((d.data.itemLabel)+"<br>"+(d.data.itemValue));
});
paths.on("mouseout", function(d){
div.style("display", "none");
});
//DRAW TICK MARK LINES FOR LABELS
lines = label_group.selectAll("line").data(filteredPieData);
lines.enter().append("svg:line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", -r-3)
.attr("y2", -r-18)
.attr("stroke", "gray")
.attr("transform", function(d) {
return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")";
});
lines.transition()
.duration(tweenDuration)
.attr("transform", function(d) {
return "rotate(" + (d.startAngle+d.endAngle)/2 * (180/Math.PI) + ")";
});
lines.exit().remove();
//DRAW LABELS WITH PERCENTAGE VALUES
valueLabels = label_group.selectAll("text.value").data(filteredPieData)
.attr("dy", function(d){
if ((d.startAngle+d.endAngle)/2 > Math.PI/2 && (d.startAngle+d.endAngle)/2 < Math.PI*1.5 ) {
return 5;
} else {
return -7;
}
})
.attr("text-anchor", function(d){
if ( (d.startAngle+d.endAngle)/2 < Math.PI ){
return "beginning";
} else {
return "end";
}
})
.text(function(d){
var percentage = (d.value/sliceProportion)*100;
return percentage.toFixed(1) + "%";
});
valueLabels.enter().append("svg:text")
.attr("class", "value")
.attr("transform", function(d) {
return "translate(" + Math.cos(((d.startAngle+d.endAngle - Math.PI)/2)) * (r+textOffset) + "," + Math.sin((d.startAngle+d.endAngle - Math.PI)/2) * (r+textOffset) + ")";
})
.attr("dy", function(d){
if ((d.startAngle+d.endAngle)/2 > Math.PI/2 && (d.startAngle+d.endAngle)/2 < Math.PI*1.5 ) {
return 5;
} else {
return -7;
}
})
.attr("text-anchor", function(d){
if ( (d.startAngle+d.endAngle)/2 < Math.PI ){
return "beginning";
} else {
return "end";
}
}).text(function(d){
var percentage = (d.value/sliceProportion)*100;
return "trips: "+percentage.toFixed(1);
});
valueLabels.transition().duration(tweenDuration).attrTween("transform", textTween);
valueLabels.exit().remove();
//DRAW LABELS WITH ENTITY NAMES
nameLabels = label_group.selectAll("text.units").data(filteredPieData)
.attr("dy", function(d){
if ((d.startAngle+d.endAngle)/2 > Math.PI/2 && (d.startAngle+d.endAngle)/2 < Math.PI*1.5 ) {
return 17;
} else {
return 5;
}
})
.attr("text-anchor", function(d){
if ((d.startAngle+d.endAngle)/2 < Math.PI ) {
return "beginning";
} else {
return "end";
}
}).text(function(d){
return d.name;
});
nameLabels.enter().append("svg:text")
.attr("class", "units")
.attr("transform", function(d) {
return "translate(" + Math.cos(((d.startAngle+d.endAngle - Math.PI)/2)) * (r+textOffset) + "," + Math.sin((d.startAngle+d.endAngle - Math.PI)/2) * (r+textOffset) + ")";
})
.attr("dy", function(d){
if ((d.startAngle+d.endAngle)/2 > Math.PI/2 && (d.startAngle+d.endAngle)/2 < Math.PI*1.5 ) {
return 18;
} else {
return 5;
}
})
.attr("text-anchor", function(d){
if ((d.startAngle+d.endAngle)/2 < Math.PI ) {
return "beginning";
} else {
return "end";
}
}).text(function(d){
return d.name;
});
nameLabels.transition().duration(tweenDuration).attrTween("transform", textTween);
nameLabels.exit().remove();
var total = 0;
pieData.forEach(function(d){ total+=(d.value*1); });
center_group.selectAll('text').data([total]).enter().append('text').text(function(d){
return d;
}).attr('class','value').attr('dy', 8).attr('text-anchor', 'end').attr('transform', 'translate(20, 0)');
}
///////////////////////////////////////////////////////////
// FUNCTIONS //////////////////////////////////////////////
///////////////////////////////////////////////////////////
// Interpolate the arcs in data space.
function pieTween(d, i) {
var s0;
var e0;
if(oldPieData[i]){
s0 = oldPieData[i].startAngle;
e0 = oldPieData[i].endAngle;
} else if (!(oldPieData[i]) && oldPieData[i-1]) {
s0 = oldPieData[i-1].endAngle;
e0 = oldPieData[i-1].endAngle;
} else if(!(oldPieData[i-1]) && oldPieData.length > 0){
s0 = oldPieData[oldPieData.length-1].endAngle;
e0 = oldPieData[oldPieData.length-1].endAngle;
} else {
s0 = 0;
e0 = 0;
}
var i = d3.interpolate({startAngle: s0, endAngle: e0}, {startAngle: d.startAngle, endAngle: d.endAngle});
return function(t) {
var b = i(t);
return arc(b);
};
}
function removePieTween(d, i) {
s0 = 2 * Math.PI;
e0 = 2 * Math.PI;
var i = d3.interpolate({startAngle: d.startAngle, endAngle: d.endAngle}, {startAngle: s0, endAngle: e0});
return function(t) {
var b = i(t);
return arc(b);
};
}
function textTween(d, i) {
var a;
if(oldPieData[i]){
a = (oldPieData[i].startAngle + oldPieData[i].endAngle - Math.PI)/2;
} else if (!(oldPieData[i]) && oldPieData[i-1]) {
a = (oldPieData[i-1].startAngle + oldPieData[i-1].endAngle - Math.PI)/2;
} else if(!(oldPieData[i-1]) && oldPieData.length > 0) {
a = (oldPieData[oldPieData.length-1].startAngle + oldPieData[oldPieData.length-1].endAngle - Math.PI)/2;
} else {
a = 0;
}
var b = (d.startAngle + d.endAngle - Math.PI)/2;
var fn = d3.interpolateNumber(a, b);
return function(t) {
var val = fn(t);
return "translate(" + Math.cos(val) * (r+textOffset) + "," + Math.sin(val) * (r+textOffset) + ")";
};
}
update(0);
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
font-weight: 300;
}
#pie-chart {
background-color: #ffffff;
/*border: 1px solid gray;*/
font: 10px sans-serif;
height: 400px;
text-shadow: none;
width: 650px;
margin-left: auto;
margin-right:auto;
}
#pie-chart .total{
font-size: 18px;
font-weight: bold;
}
#pie-chart .units{
fill: gray;
font-size: 12px;
}
#pie-chart .label{
fill: #CCC;
font-size: 12px;
}
#pie-chart .value{
font-size: 14px;
}
#slider label {
position: absolute;
width: 20px;
margin-left: -20px;
text-align: center;
margin-top: 30px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.toolTip {
position: absolute;
display: none;
width: auto;
height: auto;
background: none repeat scroll 0 0 white;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: black;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="pie-chart"></div>
Modified according to requirement....
After modification.....
Now Check out the code.
I think you are looking for this,,,
If not ask me for more.