Sortable bar chart with long x axis labels rotated - javascript

I need to adjust Mike Bostock's sortable bar chart (available here) for long X axis labels. I have rotated them as slightly vertical and the initial result is that they are well separated and under the X axis but when the sorting process begins, they fall back on the axis.
If anyone could help me set the labels in the right place, I would be very happy!
My JSFiddle is available here and the JavaScript code is as follows:
var margin = {
top: 20,
right: 20,
bottom: 60,
left: 40
},
width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, 1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var svg = d3.select("body").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 + ")");
data = [{
letter: "Alongname1",
frequency: 0.08167
},
{
letter: "Alongname2",
frequency: 0.01492
},
{
letter: "Alongname3",
frequency: 0.0278
},
{
letter: "Alongname4",
frequency: 0.04253
},
{
letter: "Alongname5",
frequency: 0.12702
},
{
letter: "Alongname6",
frequency: 0.02288
},
{
letter: "Alongname7",
frequency: 0.02022
},
{
letter: "Alongname8",
frequency: 0.06094
},
{
letter: "Alongname9",
frequency: 0.06973
},
{
letter: "Alongname10",
frequency: 0.00153
},
{
letter: "Alongname11",
frequency: 0.00747
},
{
letter: "Alongname12",
frequency: 0.04025
},
{
letter: "Alongname13",
frequency: 0.02517
},
{
letter: "Alongname14",
frequency: 0.06749
},
{
letter: "Alongname15",
frequency: 0.07507
},
{
letter: "Alongname16",
frequency: 0.01929
},
{
letter: "Alongname17",
frequency: 0.00098
},
{
letter: "Alongname18",
frequency: 0.05987
}
];
data.forEach(function(d) {
d.frequency = +d.frequency;
});
x.domain(data.map(function(d) {
return d.letter;
}));
y.domain([0, d3.max(data, function(d) {
return d.frequency;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".35em")
.attr("transform", "rotate(-65)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.letter);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.frequency);
})
.attr("height", function(d) {
return height - y(d.frequency);
});
var sortTimeout = setTimeout(function() {
d3.select("input").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(sortTimeout);
// Copy-on-write since tweens are evaluated after a delay.
var x0 = x.domain(data.sort(this.checked ?
function(a, b) {
return b.frequency - a.frequency;
} :
function(a, b) {
return d3.ascending(a.letter, b.letter);
})
.map(function(d) {
return d.letter;
}))
.copy();
svg.selectAll(".bar")
.sort(function(a, b) {
return x0(a.letter) - x0(b.letter);
});
var transition = svg.transition().duration(750),
delay = function(d, i) {
return i * 50;
};
transition.selectAll(".bar")
.delay(delay)
.attr("x", function(d) {
return x0(d.letter);
});
transition.select(".x.axis")
.call(xAxis)
.selectAll("g")
.delay(delay);
}

That behaviour is actually expected: when you call the axis again, the axis generator resets the dx and dy attributes.
You can apply them again after the second call, just as you did in the first one, but you'll notice that the texts will quickly flicker before going to their new positions.
So, an easy alternative, that avoids the flickering, is setting the labels' positions using the rotate itself. For instance (hardcoded values):
.attr("transform", "rotate(-65 12 32)");
Here is the code with that change:
var margin = {
top: 20,
right: 20,
bottom: 60,
left: 40
},
width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var formatPercent = d3.format(".0%");
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1, 1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(formatPercent);
var svg = d3.select("body").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 + ")");
data = [{
letter: "Alongname1",
frequency: 0.08167
},
{
letter: "Alongname2",
frequency: 0.01492
},
{
letter: "Alongname3",
frequency: 0.0278
},
{
letter: "Alongname4",
frequency: 0.04253
},
{
letter: "Alongname5",
frequency: 0.12702
},
{
letter: "Alongname6",
frequency: 0.02288
},
{
letter: "Alongname7",
frequency: 0.02022
},
{
letter: "Alongname8",
frequency: 0.06094
},
{
letter: "Alongname9",
frequency: 0.06973
},
{
letter: "Alongname10",
frequency: 0.00153
},
{
letter: "Alongname11",
frequency: 0.00747
},
{
letter: "Alongname12",
frequency: 0.04025
},
{
letter: "Alongname13",
frequency: 0.02517
},
{
letter: "Alongname14",
frequency: 0.06749
},
{
letter: "Alongname15",
frequency: 0.07507
},
{
letter: "Alongname16",
frequency: 0.01929
},
{
letter: "Alongname17",
frequency: 0.00098
},
{
letter: "Alongname18",
frequency: 0.05987
}
];
data.forEach(function(d) {
d.frequency = +d.frequency;
});
x.domain(data.map(function(d) {
return d.letter;
}));
y.domain([0, d3.max(data, function(d) {
return d.frequency;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("transform", "rotate(-65 12 32)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.letter);
})
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.frequency);
})
.attr("height", function(d) {
return height - y(d.frequency);
});
var sortTimeout = setTimeout(function() {
d3.select("input").property("checked", true).each(change);
}, 2000);
function change() {
clearTimeout(sortTimeout);
// Copy-on-write since tweens are evaluated after a delay.
var x0 = x.domain(data.sort(this.checked ?
function(a, b) {
return b.frequency - a.frequency;
} :
function(a, b) {
return d3.ascending(a.letter, b.letter);
})
.map(function(d) {
return d.letter;
}))
.copy();
svg.selectAll(".bar")
.sort(function(a, b) {
return x0(a.letter) - x0(b.letter);
});
var transition = svg.transition().duration(750),
delay = function(d, i) {
return i * 50;
};
transition.selectAll(".bar")
.delay(delay)
.attr("x", function(d) {
return x0(d.letter);
});
transition.select(".x.axis")
.call(xAxis)
.selectAll("g")
.delay(delay);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
width: 960px;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
fill-opacity: .9;
}
.x.axis path {
display: none;
}
label {
position: absolute;
top: 10px;
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<label><input type="checkbox"> Sort values</label>

Related

Always Show Tooltip Regardless of Mouseover

Im new to JS and HTML so I am having a hard time implementing this change:
I want the values of the stacked bar graph to always be displayed rather than being dependent of the mouseover.
How would I go about changing the below code to achieve this?
var margin = {top: 20, right: 160, bottom: 35, left: 30};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("body")
.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 + ")");
/* Data in strings like it would be if imported from a csv */
var data = [
{ year: "2006", redDelicious: "10", mcintosh: "15", oranges: "9", pears: "6" },
{ year: "2007", redDelicious: "12", mcintosh: "18", oranges: "9", pears: "4" },
{ year: "2008", redDelicious: "05", mcintosh: "20", oranges: "8", pears: "2" },
{ year: "2009", redDelicious: "01", mcintosh: "15", oranges: "5", pears: "4" },
{ year: "2010", redDelicious: "02", mcintosh: "10", oranges: "4", pears: "2" },
{ year: "2011", redDelicious: "03", mcintosh: "12", oranges: "6", pears: "3" },
{ year: "2012", redDelicious: "04", mcintosh: "15", oranges: "8", pears: "1" },
{ year: "2013", redDelicious: "06", mcintosh: "11", oranges: "9", pears: "4" },
{ year: "2014", redDelicious: "10", mcintosh: "13", oranges: "9", pears: "5" },
{ year: "2015", redDelicious: "16", mcintosh: "19", oranges: "6", pears: "9" },
{ year: "2016", redDelicious: "19", mcintosh: "17", oranges: "5", pears: "7" },
];
var parse = d3.time.format("%Y").parse;
// Transpose the data into layers
var dataset = d3.layout.stack()(["redDelicious", "mcintosh", "oranges", "pears"].map(function(fruit) {
return data.map(function(d) {
return {x: parse(d.year), y: +d[fruit]};
});
}));
// Set x, y and colors
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) { return d.x; }))
.rangeRoundBands([10, width-10], 0.02);
var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d3.max(d, function(d) { return d.y0 + d.y; }); })])
.range([height, 0]);
var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574"];
// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, 0, 0)
.tickFormat( function(d) { return d } );
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%Y"));
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Create groups for each series, rects for each segment
var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) { return colors[i]; });
var rect = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("rect")
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.attr("width", x.rangeBand())
.on("mouseover", function() { tooltip.style("display", null); })
.on("mouseout", function() { tooltip.style("display", "none"); })
.on("mousemove", function(d) {
var xPosition = d3.mouse(this)[0] - 15;
var yPosition = d3.mouse(this)[1] - 25;
tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
tooltip.select("text").text(d.y);
});
// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {return colors.slice().reverse()[i];});
legend.append("text")
.attr("x", width + 5)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d, i) {
switch (i) {
case 0: return "Anjou pears";
case 1: return "Naval oranges";
case 2: return "McIntosh apples";
case 3: return "Red Delicious apples";
}
});
// Prep the tooltip bits, initial display is hidden
var tooltip = svg.append("g")
.attr("class", "tooltip")
.style("display", "none");
tooltip.append("rect")
.attr("width", 30)
.attr("height", 20)
.attr("fill", "white")
.style("opacity", 0.5);
tooltip.append("text")
.attr("x", 15)
.attr("dy", "1.2em")
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold");
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
}
path.domain {
stroke: none;
}
.y .tick line {
stroke: #ddd;
}
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
I guess you need to add a label (tooltip) for each rect result. With little calculations I've got this:
http://jsfiddle.net/5o4jefap/87/
Here is the modified part without mouse events attached:
var rect = groups.selectAll("rect")
.data(function(d) { return d; })
.enter()
.append("g")
.attr('class', 'tooltip')
.append('rect')
.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
.attr("width", x.rangeBand())
groups.selectAll('.tooltip')
.append("rect")
.attr('width', 15)
.attr('height', 15)
.attr('fill', 'white')
.style("opacity", 0.5)
.attr('y', function(d) {
var rectY = y(d.y0 + d.y),
rectHalfHeight = ((y(d.y0) - y(d.y0 + d.y)) / 2),
tooltipHalfHeight = (this.getBBox().height / 2);
return rectY + rectHalfHeight - tooltipHalfHeight;
})
.attr("x", function(d) {
var rectX = x(d.x),
rectHalfWidth = (x.rangeBand() / 2),
tooltipHalfWidth = (this.getBBox().width / 2);
return rectX + rectHalfWidth - tooltipHalfWidth;
})
groups.selectAll('.tooltip')
.append('text')
.attr("x", function(d) {
var rectX = x(d.x),
rectHalfWidth = (x.rangeBand() / 2),
tooltipHalfWidth = (this.getBBox().width / 2);
return rectX + rectHalfWidth - tooltipHalfWidth;
})
.attr("y", function(d) {
var rectY = y(d.y0 + d.y),
rectHalfHeight = ((y(d.y0) - y(d.y0 + d.y)) / 2),
tooltipHalfHeight = (this.getBBox().height / 2);
return rectY + rectHalfHeight - tooltipHalfHeight;
})
.attr("dy", '5px')
.style("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-weight", "bold")
.text(function (data) {
return data.y;
} );

Donut bubble chart in D3.js version 3

I need to plot bubble chart, where each bubble is a donut chart like in below image in d3 version 3. I am able to achieve something, but don't understand how to distribute the circles horizontally, as my widget will be rectangular.
Also, how to make the donut bubble like in the image below. Any help would be appreciated. Thanks.
Code:
let colorCircles = {
'a': '#59bcf9',
'b': '#faabab',
'd': '#ffde85'
};
let tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip-inner")
.style("position", "absolute")
.style("min-width", "12rem")
.style("visibility", "hidden")
.style("color", "#627386")
.style("padding", "15px")
.style("stroke", '#b8bfca')
.style("fill", "none")
.style("stroke-width", 1)
.style("background-color", "#fff")
.style("border-radius", "6px")
.style("text-align", "center")
.text("");
let bubble = d3.layout.pack()
.sort(null)
.size([width, diameter])
.padding(15)
.value(function(d) {
return d[columnForRadius];
});
let svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", diameter)
.attr("class", "bubble");
let nodes = bubble.nodes({
children: dataset
}).filter(function(d) {
return !d.children;
});
let circles = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r", function(d) {
return d.r;
})
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y - 20;
})
.style("fill", function(d) {
return colorCircles[d[columnForColors]]
})
.on("mouseover", function(d) {
tooltip.style("visibility", "visible");
tooltip.html('<p>' + d[columnForColors] + ": " + d[columnForText] + "</p><div class='font-bold displayInlineBlock'> $" + d[columnForRadius] + '</div>');
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.offsetY - 10) + "px").style("left", (d3.event.offsetX + 10) + "px");
})
// .on("mouseout", function() {
// return tooltip.style("visibility", "hidden");
// })
.attr("class", "node");
circles.transition()
.duration(1000)
.attr("r", function(d) {
return d.r;
})
.each('end', function() {
display_text();
});
function display_text() {
let text = svg
.selectAll(".text")
.data(nodes, function(d) {
return d[columnForText];
});
text.enter().append("text")
.attr("class", "graphText")
.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y - 20;
})
.attr("dy", ".2em")
.attr("fill", "white")
.attr("font-size", function(d) {
return d.r / 5;
})
.attr("text-anchor", "middle")
.text(function(d) {
console.log(d)
return d[columnForText].substring(0, d.r / 3);
});
text.enter().append("text")
.attr("class", "graphText")
.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y - 20;
})
.attr("dy", "1.3em")
.style("text-anchor", "middle")
.text(function(d) {
return '$' + d[columnForRadius];
})
.attr("font-size", function(d) {
return d.r / 5;
})
.attr("fill", "white");
}
function hide_text() {
let text = svg.selectAll(".text").remove();
}
d3.select(self.frameElement)
.style("height", diameter + "px");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script type="text/javascript">
var dataset = [
{ "Name": "Olives", "Count": 4319, "Category": "d" },
{ "Name": "Tea", "Count": 4159, "Category": "d" },
{ "Name": "Boiled Potatoes", "Count": 2074, "Category": "a" },
{ "Name": "Milk", "Count": 1894, "Category": "a" },
{ "Name": "Chicken Salad", "Count": 1809, "Category": "a" },
{ "Name": "Lettuce Salad", "Count": 1566, "Category": "a" },
{ "Name": "Lobster Salad", "Count": 1511, "Category": "a" },
{ "Name": "Chocolate", "Count": 1489, "Category": "b" }
];
var width = 300, diameter = 300;
var columnForText = 'Name',
columnForColors = 'Category',
columnForRadius = "Count";
</script>
Here's my fiddle: http://jsfiddle.net/71s86zL7/
I created a compound bubble pie chart and specified the inner radius in the pie chart.
var arc = d3.svg.arc()
.innerRadius(radius)
.outerRadius(radius);
.attr("d", function(d) {
arc.innerRadius(d.r+5);
arc.outerRadius(d.r);
return arc(d);
})
please let me know if there's any alternative solution to this problem.
I have a sorta hacky solution for this. What I did was:
to use the d3.layout.pie to get the startAngles and endAngles for arcs and create the arcs on top of the circles.
Give the circles a stroke line creating an effect of a donut chart.
And then I just had to adjust the startAngles and the endAngles so that all the arcs start from the same position.
Here's the fiddle:
let colorCircles = {
'a': '#59bcf9',
'b': '#faabab',
'd': '#ffde85'
};
let tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip-inner")
.style("position", "absolute")
.style("min-width", "12rem")
.style("visibility", "hidden")
.style("color", "#627386")
.style("padding", "15px")
.style("stroke", '#b8bfca')
.style("fill", "none")
.style("stroke-width", 1)
.style("background-color", "#fff")
.style("border-radius", "6px")
.style("text-align", "center")
.text("");
let bubble = d3.layout.pack()
.sort(null)
.size([width, diameter])
.padding(15)
.value(function(d) {
return d[columnForRadius];
});
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.Count;
});
var arc = d3.svg.arc()
let svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", diameter)
.attr("class", "bubble");
let nodes = bubble.nodes({
children: dataset
}).filter(function(d) {
return !d.children;
});
let g = svg.append('g')
let circles = g.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r", function(d) {
return d.r;
})
.attr("cx", function(d) {
return d.x;
})
.attr("cy", function(d) {
return d.y - 20;
})
.style("fill", function(d) {
return colorCircles[d[columnForColors]]
})
.attr("class", "node")
.on("mouseover", function(d) {
tooltip.style("visibility", "visible");
tooltip.html('<p>' + d[columnForColors] + ": " + d[columnForText] + "</p><div class='font-bold displayInlineBlock'> $" + d[columnForRadius] + '</div>');
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.offsetY - 10) + "px").style("left", (d3.event.offsetX + 10) + "px");
})
.on("mouseout", function() {
return tooltip.style("visibility", "hidden");
});
arcs = g.selectAll(".arc")
.data(pie(dataset))
.enter().append("g")
.attr("class", "arc");
arcs.append("path")
.attr('transform', function(d) {
return 'translate(' + d['data']['x'] + ',' + (d['data']['y'] - 20) + ')';
})
.attr("d", function(d) {
return arc({
startAngle: 0,
endAngle: d.startAngle - d.endAngle,
innerRadius: d['data']['r'] - 2,
outerRadius: d['data']['r'] + 2,
})
}).on("mouseover", function(d) {
tooltip.style("visibility", "visible");
tooltip.html('<p>' + d['data'][columnForColors] + ": " + d['data'][columnForText] + "</p><div class='font-bold displayInlineBlock'> $" + d['data'][columnForRadius] + '</div>');
})
.on("mousemove", function() {
return tooltip.style("top", (d3.event.offsetY - 10) + "px").style("left", (d3.event.offsetX + 10) + "px");
})
.on("mouseout", function() {
return tooltip.style("visibility", "hidden");
});
circles.transition()
.duration(1000)
.attr("r", function(d) {
return d.r;
})
.each('end', function() {
display_text();
});
function display_text() {
let text = svg
.selectAll(".text")
.data(nodes, function(d) {
return d[columnForText];
});
text.enter().append("text")
.attr("class", "graphText")
.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y - 20;
})
.attr("dy", ".2em")
.attr("fill", "white")
.attr("font-size", function(d) {
return d.r / 3;
})
.attr("text-anchor", "middle")
.text(function(d) {
return d[columnForText].substring(0, d.r / 3);
});
text.enter().append("text")
.attr("class", "graphText")
.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y - 20;
})
.attr("dy", "1.3em")
.style("text-anchor", "middle")
.text(function(d) {
return '$' + d[columnForRadius];
})
.attr("font-size", function(d) {
return d.r / 5;
})
.attr("fill", "white");
}
function hide_text() {
let text = svg.selectAll(".text").remove();
}
d3.select(self.frameElement)
.style("height", diameter + "px");
path {
fill: orange;
stroke-width: 1px;
stroke: crimson;
}
path:hover {
fill: yellow;
}
circle {
fill: white;
stroke: slategray;
stroke-width: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<script type="text/javascript">
var dataset = [{
"Name": "Olives",
"Count": 4319,
"Category": "d"
},
{
"Name": "Tea",
"Count": 4159,
"Category": "d"
},
{
"Name": "Boiled Potatoes",
"Count": 2074,
"Category": "a"
},
{
"Name": "Milk",
"Count": 1894,
"Category": "a"
},
{
"Name": "Chicken Salad",
"Count": 1809,
"Category": "a"
},
{
"Name": "Lettuce Salad",
"Count": 1566,
"Category": "a"
},
{
"Name": "Lobster Salad",
"Count": 1511,
"Category": "a"
},
{
"Name": "Chocolate",
"Count": 1489,
"Category": "b"
}
];
var width = 300,
diameter = 300;
var columnForText = 'Name',
columnForColors = 'Category',
columnForRadius = "Count";
</script>

Height transitions go from top down, rather than from bottom up in D3

I'm making a bar chart with the following code:
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.value) - barWidth / 2;
})
.attr("width", barWidth)
.attr("y", function(d) {
return y(d.frequency);
})
//.attr("height", 0)
//.transition()
.attr("height", function(d) {
return height - y(d.frequency);
});
If I add the commented-out lines, then the bar transitions from height 0 to its proper height; however, for some reason instead of "growing" up from the x-axis, the bars start out at their highest values, and "grow" down towards the x-axis. Why is this happening? How can I fix this?
Why is this happening?
The way that this is set up means that you're setting the top of the rect to be at whatever y-value relates to d.frequency, and then defining the bottom to be on the x-axis itself (by subtracting the calculated y-value from the max height). Given that before the transition you're effectively fixing the y-value, then getting the height to transition, what you're actually doing is just moving the bottom of the rect, giving the effect you describe.
How can I fix this?
The simplest fix is to transition both the y-value and the height, in a manner that keeps the bottom of the rect fixed. To do this, before the transition simply set the y attr to be y(0), then after the transition(), set the y attr to be the calculated version, i.e. y(d.frequency). Like so:
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.value) - barWidth / 2;
})
.attr("width", barWidth)
.attr("y", function(d) {
return y(0);
})
.attr("height", 0)
.transition()
.attr("y", function(d) {
return y(d.frequency);
})
.attr("height", function(d) {
return height - y(d.frequency);
});
If you inspect the bar elements, you can see that d3 bars are drawn from a the required height to the y position. So you should try as shown below.
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.letter);
})
.attr("width", x.rangeBand())
.attr("height", function(d) {
return height - y(d.frequency);
})
.attr("y", height)
.transition()
.duration(500)
.attr("y", function(d) {
return y(d.frequency);
});
Working snippet:
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10, "%");
var svg = d3.select("body").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 data = [{
"letter": "A",
"frequency": 0.08167
}, {
"letter": "B",
"frequency": 0.01492
}, {
"letter": "C",
"frequency": 0.02782
}, {
"letter": "D",
"frequency": 0.04253
}, {
"letter": "E",
"frequency": 0.12702
}, {
"letter": "F",
"frequency": 0.02288
}, {
"letter": "G",
"frequency": 0.02015
}, {
"letter": "H",
"frequency": 0.06094
}, {
"letter": "I",
"frequency": 0.06966
}, {
"letter": "J",
"frequency": 0.00153
}, {
"letter": "K",
"frequency": 0.00772
}, {
"letter": "L",
"frequency": 0.04025
}, {
"letter": "M",
"frequency": 0.02406
}, {
"letter": "N",
"frequency": 0.06749
}, {
"letter": "O",
"frequency": 0.07507
}, {
"letter": "P",
"frequency": 0.01929
}, {
"letter": "Q",
"frequency": 0.00095
}, {
"letter": "R",
"frequency": 0.05987
}, {
"letter": "S",
"frequency": 0.06327
}, {
"letter": "T",
"frequency": 0.09056
}, {
"letter": "U",
"frequency": 0.02758
}, {
"letter": "V",
"frequency": 0.00978
}, {
"letter": "W",
"frequency": 0.0236
}, {
"letter": "X",
"frequency": 0.0015
}, {
"letter": "Y",
"frequency": 0.01974
}, {
"letter": "Z",
"frequency": 0.00074
}, {
"letter": "LICENSE",
"frequency": 0
}];
x.domain(data.map(function(d) {
return d.letter;
}));
y.domain([0, d3.max(data, function(d) {
return d.frequency;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Frequency");
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.letter);
})
.attr("width", x.rangeBand())
.attr("height", function(d) {
return height - y(d.frequency);
})
.attr("y", height)
.transition()
.duration(500)
.attr("y", function(d) {
return y(d.frequency);
});
function type(d) {
d.frequency = +d.frequency;
return d;
}
.bar {
fill: steelblue;
}
.bar:hover {
fill: brown;
}
.axis {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
A thing that was counter intuitive and caused me to create some upside down graphs is the svg coordinates x,y start 0,0 at the top left corner, rather than the bottom left corner.
I think the attribute("class", bar) is not required and you can use rangeBand() to calculate width and check your Yaxis scale takes value [height,0] and rest of the code looks fine.

d3 area between two line graphs [duplicate]

This question already has an answer here:
Using d3 to shade area between two lines
(1 answer)
Closed 6 years ago.
I want to fill the lines between two area graphs defined below. I am hitting a bit of a wall -- the issue I seem to have that each path I created does NOT have the other value to compare with, and my efforts to find a work around seem to have hit a bit of a wall.
Any tips?
jQuery(document).ready(function ($) {
var margin = {top: 20, right: 30, bottom: 40, left: 24},
width = 430 - margin.left - margin.right,
height = 225 - margin.top - margin.bottom,
dotRadius = function() { return 3 };
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickFormat(d3.time.format('%b'));
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
// This is a function that determines the colours of the lines drawn, up to 10.
var color = d3.scale.category10();
// This is used to format the time for our data.
var formatTime = d3.time.format("%Y-%m-%d");
var line = d3.svg.line()
.x(function(d) { return x(d.Period); })
.y(function(d) { return y(d.Value); })
var areaBetweenGraphs = d3.svg.area()
.x(function(d) {
console.log('ABG x is: ', d);
return x(formatTime.parse(d.Time));
})
.y0(function(d) {
console.log('ABG y0 is: ', d);
return y(d.Quantity);
})
.y1(function(d) {
console.log('ABG y1 is: ', d);
return y(d.Amount);
});
var svg = d3.select("#pipeline-chart-render")
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
// This separates the data into the lines we want, although the data is stored
// In the same original object.
color.domain(d3.keys(data[0].values[0]).filter(function(key) {
if (key === 'Amount'
|| key === 'Quantity') {
return key
}
}));
// This returns the data into two separate objects which can be graphed.
// In this case, Amount and Quantity.
var datasets = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {
Period: formatTime.parse(d.values[0].Time),
Value: +d.values[0][name]};
})
};
});
console.log('datasets is: ', datasets);
// set the minYDomainValue to zero instead of letting it be a lingering magic number.
var minDomainValue = 0
var minDate = d3.min(datasets, function(d0){
return d3.min(d0.values, function(d1){
return d1.Period;
})
}),
maxDate = d3.max(datasets, function(d0){
return d3.max(d0.values, function(d1){
return d1.Period;
})
});
x.domain([minDate, maxDate]);
y.domain([
minDomainValue,
d3.max(datasets, function(c) { return d3.max(c.values, function(v) { return v.Value; }); })
])
// Append the x-axis class and move axis around.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
// Append the y-axis class.
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append('g')
var pipeline = svg.selectAll('.pipeline')
.data(datasets);
pipeline.enter()
.append('g')
.attr('class', 'pipeline');
pipeline.append('path')
.attr('class', 'line')
.attr('id', function(d, i) {
return 'pipeline-'+(i+1);
})
.attr('d', function(d) { console.log('line d is: ', d); return line(d.values); })
.attr("data-legend",function(d) { return d.name})
.style("stroke", function(d) { return color(d.name); })
pipeline.exit().remove()
// Rendering the points on the graph.
var points = svg.selectAll('.pipelinePoint')
.data(datasets);
points
.enter()
.append('g')
.attr('class', 'pipelinePoint');
points.selectAll('.point')
.data(function(d) {
return d.values;
})
.enter()
.append('circle')
.attr('circleId', function(d, i) {
return 'circleId-'+i;
})
.attr('cx', function(d) {
return x(d.Period);
})
.attr('cy', function(d) {
return y(d.Value);
})
.attr('r', function(d) {
return dotRadius()
});
});
var data = [
{
key: 1,
values: [
{
Amount: 33,
Quantity: 22,
Time: '2015-01-01'
}
]
},
{
key: 2,
values: [
{
Amount: 52,
Quantity: 20,
Time: '2015-02-01'
}
]
},
{
key: 3,
values: [
{
Amount: 63,
Quantity: 30,
Time: '2015-03-01'
}
]
},
{
key: 4,
values: [
{
Amount: 92,
Quantity: 60,
Time: '2015-04-01'
}
]
},
{
key: 5,
values: [
{
Amount: 50,
Quantity: 29,
Time: '2015-05-01'
}
]
},
{
key: 6,
values: [
{
Amount: 53,
Quantity: 25,
Time: '2015-06-01'
}
]
},
{
key: 7,
values: [
{
Amount: 46,
Quantity: 12,
Time: '2015-07-01'
}
]
},
{
key: 8,
values: [
{
Amount: 52,
Quantity: 15,
Time: '2015-08-01'
}
]
},
{
key: 9,
values: [
{
Amount: 55,
Quantity: 20,
Time: '2015-09-01'
}
]
},
{
key: 10,
values: [
{
Amount: 35,
Quantity: 17,
Time: '2015-10-01'
}
]
},
{
key: 11,
values: [
{
Amount: 80,
Quantity: 45,
Time: '2015-11-01'
}
]
},
{
key: 12,
values: [
{
Amount: 64,
Quantity: 24,
Time: '2015-12-01'
}
]
}
]
CSS if you want it to be a less ugly render:
/* Line Chart CSS */
.axis path,
.axis line {
fill: none;
stroke: #000;
stroke-width: 3px;
shape-rendering: crispEdges;
}
#pipeline-1,
#pipeline-2 {
fill: none;
stroke-width: 1.5px;
stroke-linecap: round;
transition: stroke-width 250ms linear;
-moz-transition: stroke-width 250ms linear;
-webkit-transition: stroke-width 250ms linear;
transition-delay: 250ms
-moz-transition-delay: 250ms;
-webkit-transition-delay: 250ms;
}
.x.axis path {
/* Uncomment below if I want to remove x-axis line */
/* display: none;*/
}
.line.hover path {
stroke-width: 6px;
}
#pipeline-chart-render {
padding-left: -50px;
}
.area {
fill: steelblue;
}
This ended up working.
// The following is for defining the area BETWEEN graphs.
var areaAboveQuantity = d3.svg.area()
.x(line.x())
.y0(line.y())
.y1(0);
var areaBelowQuantity = d3.svg.area()
.x(line.x())
.y0(line.y())
.y1(height);
var areaAboveAmount = d3.svg.area()
.x(line.x())
.y0(line.y())
.y1(0);
var areaBelowAmount = d3.svg.area()
.x(line.x())
.y0(line.y())
.y1(height);
var defs = svg.append('defs');
defs.append('clipPath')
.attr('id', 'clip-quantity')
.append('path')
.datum(datasets)
.attr('d', function(d) {
return areaAboveQuantity(d[1].values);
});
defs.append('clipPath')
.attr('id', 'clip-amount')
.append('path')
.datum(datasets)
.attr('d', function(d) {
return areaAboveAmount(d[0].values);
});
svg.append('path')
.datum(datasets)
.attr('class', 'area')
.attr('d', function(d) {
return areaBelowQuantity(d[1].values)
});
// Quantity IS ABOVE Amount
svg.append('path')
.datum(datasets)
.attr('d', function(d) {
areaBelowQuantity(d[1].values);
})
.attr('clip-path', 'url(#clip-amount)')
.style('fill', 'steelblue')
.style('opacity', '0.2');
// Amount IS ABOVE Quanity
svg.append('path')
.datum(datasets)
.attr('d', function(d) {
return areaBelowAmount(d[0].values);
})
.attr('clip-path', 'url(#clip-quantity)')
.style('fill', 'steelblue')
.style('opacity', '0.2');

multi/grouped Bar chart using D3 alignment issue

I am creating a grouped bar chart using D3. I have written code and bar charts are showing but not properly. Some bar are going below the x-axis and other are at the top of the graph instead starting from 0. I am unable to figure out the reason for the this issue.
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var z = d3.scale.category20c();
var svg = d3.select("body").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 parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ");
var data = [{
"data": [
[
"2016-01-21T01:20:00.000Z",
1.41818181818182
],
[
"2016-01-21T02:28:00.000Z",
1.90661764705882
],
[
"2016-01-21T03:36:00.000Z",
1.66764705882353
],
[
"2016-01-21T04:44:00.000Z",
1.51691176470588
],
[
"2016-01-21T05:52:00.000Z",
1.40955882352941
],
[
"2016-01-21T07:00:00.000Z",
1.46323529411765
],
[
"2016-01-21T08:08:00.000Z",
1.48308823529412
],
[
"2016-01-21T09:16:00.000Z",
1.89384615384615
]
],
"label": "a"
}, {
"data": [
[
"2016-01-21T01:20:00.000Z",
4.98701298701299
],
[
"2016-01-21T02:28:00.000Z",
5.0
],
[
"2016-01-21T03:36:00.000Z",
4.94852941176471
],
[
"2016-01-21T04:44:00.000Z",
4.91176470588235
],
[
"2016-01-21T05:52:00.000Z",
4.81617647058824
],
[
"2016-01-21T07:00:00.000Z",
5.0
],
[
"2016-01-21T08:08:00.000Z",
4.94117647058824
],
[
"2016-01-21T09:16:00.000Z",
4.96969696969697
]
],
"label": "b"
}];
var x = d3.scale.ordinal().rangeRoundBands([0, width], .9);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x).tickSize(0)
.orient("bottom").innerTickSize(-height).outerTickSize(0)
.tickFormat(d3.time.format("%H:%M"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left").innerTickSize(-width).outerTickSize(0);
var ary = [];
data.forEach(function(d) {
ary.push(d.data);
});
x.domain(ary[0].map(function(d) {
return parseDate.parse(d[0]);
}));
y.domain([0, d3.max(d3.merge(ary), function(d) {
console.log(d.y0 + d.y); //This is NaN = Not a number
//return d.y0 + d.y;
return d[1]; //returns grid lines if that is what you want
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var layer = svg.selectAll(".layer")
.data(data)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) {
return z(i);
});
layer.selectAll("rect")
.data(function(d) {
return d.data;
})
.enter().append("rect")
.attr("x", function(d) {
return x(parseDate.parse(d[0]));
})
.attr("y", function(d) {
console.log(d[1]);
return y(d[1]); //Note this is returning data
})
.attr("height", function(d) {
return y(d[1]); //Note this is returning data
})
.attr("width", x.rangeBand() - 1);
text.inner-circle {
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
}
text.inner-text {
font-weight: 400;
font-size: 36px;
font-family: 'Metric Regular', 'Metric';
text-align: center;
font-style: normal;
text-transform: uppercase;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 2;
shape-rendering: crispEdges;
}
.grid .tick {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
Please help me fix this issue.
You are missing this:
.attr("y", function(d) {
return height - y(d[1]); //<-- offset y position from height
})
In addition, you aren't taking into account where to group your bars. Simple fix is to place them side-by-side:
...
.enter().append("rect")
.attr("x", function(d, i, j) {
// j is the group
if (j === 0)
return x(parseDate.parse(d[0])) - x.rangeBand() / 2;
else
return x(parseDate.parse(d[0])) + x.rangeBand() / 2;
})
...
Full Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<style>
text.inner - circle {
font - weight: 400;
font - size: 12 px;
text - transform: uppercase;
}
text.inner - text {
font - weight: 400;
font - size: 36 px;
font - family: 'Metric Regular', 'Metric';
text - align: center;
font - style: normal;
text - transform: uppercase;
}
path {
stroke: steelblue;
stroke - width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke - width: 2;
shape - rendering: crispEdges;
}
.grid.tick {
stroke: lightgrey;
stroke - opacity: 0.7;
shape - rendering: crispEdges;
}
.grid path {
stroke - width: 0;
}
</style>
</head>
<body>
<script>
var margin = {
top: 20,
right: 30,
bottom: 30,
left: 40
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var z = d3.scale.category20c();
var svg = d3.select("body").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 parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ");
var data = [{
"data": [
[
"2016-01-21T01:20:00.000Z",
1.41818181818182
],
[
"2016-01-21T02:28:00.000Z",
1.90661764705882
],
[
"2016-01-21T03:36:00.000Z",
1.66764705882353
],
[
"2016-01-21T04:44:00.000Z",
1.51691176470588
],
[
"2016-01-21T05:52:00.000Z",
1.40955882352941
],
[
"2016-01-21T07:00:00.000Z",
1.46323529411765
],
[
"2016-01-21T08:08:00.000Z",
1.48308823529412
],
[
"2016-01-21T09:16:00.000Z",
1.89384615384615
]
],
"label": "a"
}, {
"data": [
[
"2016-01-21T01:20:00.000Z",
4.98701298701299
],
[
"2016-01-21T02:28:00.000Z",
5.0
],
[
"2016-01-21T03:36:00.000Z",
4.94852941176471
],
[
"2016-01-21T04:44:00.000Z",
4.91176470588235
],
[
"2016-01-21T05:52:00.000Z",
4.81617647058824
],
[
"2016-01-21T07:00:00.000Z",
5.0
],
[
"2016-01-21T08:08:00.000Z",
4.94117647058824
],
[
"2016-01-21T09:16:00.000Z",
4.96969696969697
]
],
"label": "b"
}];
var x = d3.scale.ordinal().rangeRoundBands([0, width], .9);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x).tickSize(0)
.orient("bottom").innerTickSize(-height).outerTickSize(0)
.tickFormat(d3.time.format("%H:%M"));
var yAxis = d3.svg.axis()
.scale(y)
.orient("left").innerTickSize(-width).outerTickSize(0);
var ary = [];
data.forEach(function(d) {
ary.push(d.data);
});
x.domain(ary[0].map(function(d) {
return parseDate.parse(d[0]);
}));
y.domain([0, d3.max(d3.merge(ary), function(d) {
console.log(d.y0 + d.y); //This is NaN = Not a number
//return d.y0 + d.y;
return d[1]; //returns grid lines if that is what you want
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var layer = svg.selectAll(".layer")
.data(data)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) {
return z(i);
});
layer.selectAll("rect")
.data(function(d) {
return d.data;
})
.enter().append("rect")
.attr("x", function(d, i, j) {
if (j === 0)
return x(parseDate.parse(d[0])) - x.rangeBand() / 2;
else
return x(parseDate.parse(d[0])) + x.rangeBand() / 2;
})
.attr("y", function(d) {
return height -y(d[1]); //Note this is returning data
})
.attr("height", function(d) {
return y(d[1]); //Note this is returning data
})
.attr("width", x.rangeBand() - 1);
</script>
</body>
</html>

Categories