How to limit animated axis labels position in d3? - d3.js

I'm implementing a chart using d3 that has a sliding x axis. Demo
When axis labels approach the edges, they fade out/in.
However, the labels animate into the left and right margins of the svg (the gray area):
How could I avoid the labels to be rendered on the svg margins?
const timeWindow = 10000;
const transitionDuration = 3000;
const xScaleDomain = (now = new Date()) =>
[now - timeWindow, now];
const totalWidth = 500;
const totalHeight = 200;
const margin = {
top: 30,
right: 50,
bottom: 30,
left: 50
};
const width = totalWidth - margin.left - margin.right;
const height = totalHeight - margin.top - margin.bottom;
const svg = d3.select('.chart')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
svg
.append('rect')
.attr('width', width)
.attr('height', height);
// Add x axis
const xScale = d3.scaleTime()
.domain(xScaleDomain(new Date() - transitionDuration))
.range([0, width]);
const xAxis = d3.axisBottom(xScale);
const xAxisSelection = svg
.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
// Animate
const animate = () => {
xScale.domain(xScaleDomain());
xAxisSelection
.transition()
.duration(transitionDuration)
.ease(d3.easeLinear)
.call(xAxis)
.on('end', animate);
};
animate();
svg {
margin: 30px;
background-color: #ccc;
}
rect {
fill: #fff;
outline: 1px dashed #ddd;
}
<script src="https://unpkg.com/d3#4.4.1/build/d3.js"></script>
<div class="chart"></div>

You can clip-path it:
svg.append('defs')
.append('clipPath')
.attr('id','myClip')
.append('rect')
.attr('width', width)
.attr('height', totalHeight);
...
const xAxisSelection = svg
.append('g')
.attr('clip-path', 'url(#myClip)')
...
Full Code:
const timeWindow = 10000;
const transitionDuration = 3000;
const xScaleDomain = (now = new Date()) =>
[now - timeWindow, now];
const totalWidth = 500;
const totalHeight = 200;
const margin = {
top: 30,
right: 50,
bottom: 30,
left: 50
};
const width = totalWidth - margin.left - margin.right;
const height = totalHeight - margin.top - margin.bottom;
const svg = d3.select('.chart')
.append('svg')
.attr('width', totalWidth)
.attr('height', totalHeight)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
svg.append('defs')
.append('clipPath')
.attr('id','myClip')
.append('rect')
.attr('width', width)
.attr('height', totalHeight);
// Add x axis
const xScale = d3.scaleTime()
.domain(xScaleDomain(new Date() - transitionDuration))
.range([0, width]);
const xAxis = d3.axisBottom(xScale);
const xAxisSelection = svg
.append('g')
.attr('clip-path', 'url(#myClip)')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
// Animate
const animate = () => {
xScale.domain(xScaleDomain());
xAxisSelection
.transition()
.duration(transitionDuration)
.ease(d3.easeLinear)
.call(xAxis)
.on('end', animate);
};
animate();
svg {
margin: 30px;
background-color: #ccc;
}
rect {
fill: #fff;
outline: 1px dashed #ddd;
}
<script src="https://unpkg.com/d3#4.4.1/build/d3.js"></script>
<div class="chart"></div>

Related

Bars not showing up in grouped bar chart

I'm trying to create a grouped bar chart showing students attenadance(present or absent) but for some reasons my chart is showing only one set of bars(the highest for present and the highest for absent. On inspecting the console I see that the remaining bars are there but they are not showing up on the chart. I don't know if the problem is with my data or my code(I have only included the js part of the code)
const SVG = {
height: 900,
width: 900
}
const margin = {top: 40, bottom: 40, right: 40, left: 40};
const innerWidth = SVG.width - margin.left - margin.right;
const innerHeight = SVG.height - margin.top - margin.bottom;
const bar = d3.select('body').append('svg').attr('width', SVG.width).attr('height', SVG.height);
const grp = bar.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
const data = d3.csv('WEEK.csv')
.then(
function(data) {
console.log(data);
const keys = data.columns.slice(1);
console.log(keys)
const group = d3.map(data, function(d){return +d.Week}).keys()
const x0 = d3.scaleBand().domain(group)
.range([0, innerWidth]).padding(0.1)
const x1 = d3.scaleBand().domain(keys)
.range([0, x0.bandwidth()]).padding(0.05)
const y0 = d3.scaleLinear().domain([0, d3.max(data, function(d) {return d3.max(keys, function (key){return +d[key];}
)})])
.range([innerHeight, 0]);
const color = d3.scaleOrdinal().range('#fcba03', '#eb4034')
const yAxis = d3.axisLeft(y0);
const xAxis = d3.axisBottom(x0);
const yAxisG = grp.append('g').call(yAxis)
const xAxisG = grp.append('g').call(xAxis)
.attr('transform', `translate(0, ${innerHeight})`);
grp.append('g')
.selectAll('g')
.data(data)
.enter().append('g')
.selectAll('rect')
.attr("transform", function(d) {return "translate(" + x0(+d.Week) + ",0)"})
.data(function(d){return keys.map(function(key){return{key: key, value: +d[key]} }) })
.enter()
.append('rect')
.attr('width', x1.bandwidth())
.attr('height', d => (innerHeight - y0(d.value)))
.attr('y', d => y0(d.value))
.attr('x', d => x1(d.key))
.attr('fill', d => color(d.key));
})
The dataset:
Week ,Present,Absent
2,10481,4010
3,11277,4551
4,10499,5036
5,9970,5126
6,8901,4909
7,7929,8405
8,7995,5062
9,7785,5447
10,7670,5822
11,7177,6162
12,6258,6499
13,4689,6631

Add tool-tip to canvas d3 v5

I want to create Scatter plot having tool-tip for every point , i am new to d3 i used the example
from this link
https://github.com/xoor-io/d3-canvas-example/blob/master/02_scatterplot_with_zoom/plot.js
Some how i managed to create the scatter plot but unable to add tool-tip to the existing code
let dataExample = [];
for (let i= 0; i < 10000; i++) {
const x = Math.floor(Math.random() * 999999) + 1;
const y = Math.floor(Math.random() * 999999) + 1;
dataExample.push([x, y]);
}
const pointColor = '#3585ff'
const margin = {top: 20, right: 15, bottom: 60, left: 70};
const outerWidth = 800;
const outerHeight = 600;
const width = outerWidth - margin.left - margin.right;
const height = outerHeight - margin.top - margin.bottom;
const container = d3.select('.scatter-container');
// Init SVG
const svgChart = container.append('svg:svg')
.attr('width', outerWidth)
.attr('height', outerHeight)
.attr('class', 'svg-plot')
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// Init Canvas
const canvasChart = container.append('canvas')
.attr('width', width)
.attr('height', height)
.style('margin-left', margin.left + 'px')
.style('margin-top', margin.top + 'px')
.attr('class', 'canvas-plot');
// Prepare buttons
const toolsList = container.select('.tools')
.style('margin-top', margin.top + 'px')
.style('visibility', 'visible');
toolsList.select('#reset').on('click', () => {
const t = d3.zoomIdentity.translate(0, 0).scale(1);
canvasChart.transition()
.duration(200)
.ease(d3.easeLinear)
.call(zoom_function.transform, t)
});
const context = canvasChart.node().getContext('2d');
// Init Scales
const x = d3.scaleLinear().domain([0, d3.max(dataExample, (d) => d[0])]).range([0, width]).nice();
const y = d3.scaleLinear().domain([0, d3.max(dataExample, (d) => d[1])]).range([height, 0]).nice();
// Init Axis
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);
// Add Axis
const gxAxis = svgChart.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
const gyAxis = svgChart.append('g')
.call(yAxis);
// Add labels
svgChart.append('text')
.attr('x', `-${height/2}`)
.attr('dy', '-3.5em')
.attr('transform', 'rotate(-90)')
.text('Axis Y');
svgChart.append('text')
.attr('x', `${width/2}`)
.attr('y', `${height + 40}`)
.text('Axis X');
// Draw plot on canvas
function draw(transform) {
const scaleX = transform.rescaleX(x);
const scaleY = transform.rescaleY(y);
gxAxis.call(xAxis.scale(scaleX));
gyAxis.call(yAxis.scale(scaleY));
context.clearRect(0, 0, width, height);
dataExample.forEach( point => {
drawPoint(scaleX, scaleY, point, transform.k);
});
}
// Initial draw made with no zoom
draw(d3.zoomIdentity)
function drawPoint(scaleX, scaleY, point, k) {
context.beginPath();
context.fillStyle = pointColor;
const px = scaleX(point[0]);
const py = scaleY(point[1]);
context.arc(px, py, 1.2 * k, 0, 2 * Math.PI, true);
context.fill();
}
// Zoom/Drag handler
const zoom_function = d3.zoom().scaleExtent([1, 1000])
.on('zoom', () => {
const transform = d3.event.transform;
context.save();
draw(transform);
context.restore();
});
canvasChart.call(zoom_function);
.scatter-container {
margin: auto;
width: 800px;
height: 600px;
}
.svg-plot, .canvas-plot {
position: absolute;
}
.tools {
position: absolute;
left: calc(50% + 400px);
visibility: hidden;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<div class="scatter-container">
<div class="tools">
<button id="reset">Reset</button>
</div>
</div>
Any idea how i can add tool-tip to canvass so it could be display x and y point while I hover for specific point.

tickSizeOuter not equal zero, but just first and last tick of yAxis shows line

I have a line chart. And just the first and last tick of yAxis shows the outer line.
The result as below image:
The expected result is that every tick of yAxis shows outer line.
Example:
https://bl.ocks.org/d3noob/c506ac45617cf9ed39337f99f8511218
And here is my reproduce code:
var margin = { top: 70, right: 30, bottom: 50, left: 40 }
var width = 720 - margin.left - margin.right
var height = 430 - margin.top - margin.bottom
var data = [
{angle:0.6933744221879815,x:0.1},
{angle:0.6933744221879815,x:0.1},
{angle:0.6933744221879815,x:0.3},
{angle:0.6933744221879815,x:0.4},
{angle:0.6933744221879815,x:0.4},
{angle:0.6933744221879815,x:0.5},
{angle:0.6933744221879815,x:0.7},
{angle:0.6933744221879815,x:0.8},
{angle:0.6933744221879815,x:0.8},
{angle:0.6933744221879815,x:0.9},
{angle:0.6933744221879815,x:1},
{angle:0.6933744221879815,x:1.1},
{angle:0.6933744221879815,x:1.2},
{angle:0.6933744221879815,x:1.3},
{angle:0.6933744221879815,x:1.4},
{angle:0.6933744221879815,x:1.5}
]
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 x = d3.scaleLinear()
.range([0, width])
.domain([data[0].x , data[data.length - 1].x])
var y = d3.scaleLinear()
.range([height, 0])
.domain([-30, 120])
var xAxis = d3.axisBottom()
.scale(x)
.tickValues(x.ticks(8).concat(x.domain()[0]))
.tickFormat(d => d +'s')
.tickPadding(8)
.tickSizeOuter(0)
var yAxis = d3.axisLeft()
.scale(y)
.ticks(8)
.tickSizeInner(-width)
.tickSizeOuter(4)
.tickPadding(8);
var line = d3.line()
.x(function (d) {
return x(d.x);
})
.y(function (d) {
return y(d.angle);
})
.curve(d3.curveCatmullRom);
svg.append('path')
.attr('d', line(data))
.attr('stroke', '#ff5722')
.attr('stroke-width', '2')
.attr('fill', 'none');
svg.append('g')
.call(xAxis)
.attr('transform', `translate(0, ${height})`)
svg.append('g')
.call(yAxis)
.tick line{
opacity: 0.2;
}
.tick text{
font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
There is no missing tick, all those inner ticks are there! However, they are going to the right hand side of the chart, because you did this:
yAxis.tickSizeInner(-width)
In other words, your light grey gridlines are your ticks.
If you want to keep those light grey gridlines and draw the regular ticks, you have to do a different approach. Like this:
svg.append('g')
.call(yAxis)
.selectAll(".tick")
.append("line")
.attr("x2", width)
.style("stroke", "#eee")
Here is your code with that change:
var margin = { top: 70, right: 30, bottom: 50, left: 40 }
var width = 720 - margin.left - margin.right
var height = 430 - margin.top - margin.bottom
var data = [
{angle:0.6933744221879815,x:0.1},
{angle:0.6933744221879815,x:0.1},
{angle:0.6933744221879815,x:0.3},
{angle:0.6933744221879815,x:0.4},
{angle:0.6933744221879815,x:0.4},
{angle:0.6933744221879815,x:0.5},
{angle:0.6933744221879815,x:0.7},
{angle:0.6933744221879815,x:0.8},
{angle:0.6933744221879815,x:0.8},
{angle:0.6933744221879815,x:0.9},
{angle:0.6933744221879815,x:1},
{angle:0.6933744221879815,x:1.1},
{angle:0.6933744221879815,x:1.2},
{angle:0.6933744221879815,x:1.3},
{angle:0.6933744221879815,x:1.4},
{angle:0.6933744221879815,x:1.5}
]
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 x = d3.scaleLinear()
.range([0, width])
.domain([data[0].x , data[data.length - 1].x])
var y = d3.scaleLinear()
.range([height, 0])
.domain([-30, 120])
var xAxis = d3.axisBottom()
.scale(x)
.tickValues(x.ticks(8).concat(x.domain()[0]))
.tickFormat(d => d +'s')
.tickPadding(8)
.tickSizeOuter(0)
var yAxis = d3.axisLeft()
.scale(y)
.ticks(8)
.tickSizeOuter(4)
.tickPadding(8);
var line = d3.line()
.x(function (d) {
return x(d.x);
})
.y(function (d) {
return y(d.angle);
})
.curve(d3.curveCatmullRom);
svg.append('path')
.attr('d', line(data))
.attr('stroke', '#ff5722')
.attr('stroke-width', '2')
.attr('fill', 'none');
svg.append('g')
.call(xAxis)
.attr('transform', `translate(0, ${height})`)
svg.append('g')
.call(yAxis)
.selectAll(".tick")
.append("line")
.attr("x2", width)
.style("stroke", "#eee")
.tick text{
font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

How to implement a smooth transition when new bands are created in d3?

In the example below, I'm trying to animate new items appearance.
As you can see, they animate from the bottom of the chart to their position.
However, existing items ("second" in this example) jump, instead of smoothly transitioning to their new position.
I thought it is because the new band suddenly appears, without a transition. So, I tried to add a transition:
const band = bandUpdate.enter()
.append('g')
.attr('class', 'band')
.merge(bandUpdate)
.transition(t)
.attr('transform', (_, i) => `translate(0, ${i * bandHeight})`);
But, I'm getting:
Uncaught TypeError: band.selectAll(...).data is not a function
Could you explain the error please, and suggest a way to avoid the undesired jump?
Bonus: How could I animate the y axis labels?
Playground
const width = 300;
const height = 200;
const margin = { top: 30, right: 30, bottom: 30, left: 50 };
let data = {};
const main = d3.select('.chart')
.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})`);
const xScale = d3.scaleLinear().domain([0, 16]).range([0, width]);
const xAxis = d3.axisBottom(xScale);
main.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
const yScale = d3.scaleBand().domain([]).range([0, height]);
const yAxis = d3.axisLeft(yScale);
const yAxisG = main.append('g').call(yAxis);
const bandG = main.append('g');
function update() {
const t = d3.transition().duration(500);
const ids = Object.keys(data);
yScale.domain(ids);
yAxisG.call(yAxis);
const bandHeight = yScale.bandwidth();
const bandUpdate = bandG.selectAll('.band').data(ids, id => id);
const band = bandUpdate.enter()
.append('g')
.attr('class', 'band')
.merge(bandUpdate)
// .transition(t) // Throws: Uncaught TypeError: band.selectAll(...).data is not a function
.attr('transform', (_, i) => `translate(0, ${i * bandHeight})`);
bandUpdate.exit().remove();
const itemUpdate = band.selectAll('.item')
.data(id => data[id], item => item.value);
const itemG = itemUpdate.enter().append('g').attr('class', 'item');
const rectHeight = 4;
itemG
.append('rect')
.attr('class', (_, i) => `item-${i}`)
.attr('x', d => xScale(d.value))
.attr('width', d => width - xScale(d.value))
.attr('height', rectHeight)
.attr('y', height)
.transition(t)
.attr('y', bandHeight / 2 - rectHeight / 2);
itemG
.append('circle')
.attr('class', (_, i) => `item-${i}`)
.attr('cx', d => xScale(d.value))
.attr('r', 6)
.attr('cy', height)
.transition(t)
.attr('cy', bandHeight / 2);
itemUpdate
.select('rect')
.attr('x', d => xScale(d.value))
.attr('width', d => width - xScale(d.value))
.transition(t)
.attr('y', bandHeight / 2 - rectHeight / 2);
itemUpdate
.select('circle')
.attr('cx', d => xScale(d.value))
.transition(t)
.attr('cy', bandHeight / 2);
itemUpdate.exit().remove();
}
update();
setTimeout(() => {
data['first'] = [
{
value: 7
},
{
value: 10
}
];
update();
}, 1000);
setTimeout(() => {
data['second'] = [
{
value: 1
}
];
update();
}, 2000);
setTimeout(() => {
data['third'] = [
{
value: 13
}
];
update();
}, 3000);
svg {
margin: 0 30px 30px 30px;
}
.item-0 {
fill: red;
}
.item-1 {
fill: green;
}
<div class="chart"></div>
<script src="https://unpkg.com/d3#4.4.1/build/d3.js"></script>
Just break your band constant:
const band = bandUpdate.enter()
.append('g')
.attr('class', 'band')
.merge(bandUpdate);
band.transition(t)
.attr('transform', (_, i) => `translate(0, ${i * bandHeight})`);
Here is the updated CodePen: http://codepen.io/anon/pen/oBWJdp?editors=0010
Explanation:
According to the documentation, selection.transition([name]):
Returns a new transition on the given selection with the specified name.
So, when you later in the code do this:
const itemUpdate = band.selectAll('.item')
.data(id => data[id], item => item.value);
You're selecting a new transition, and that's giving you the error (you cannot bind data to a transition).
Breaking the band constant makes itemUpdate a selection based in the band selection, not in the following transition.

Why are events from d3 in firefox not handled

Please look at http://bl.ocks.org/HoffmannP/95392bf4a37344793786 and help me find an explenation why it just doesn't work in FF but works like a charm in Chrome.
because you're using .style for width, height and x when you need to use .attr.
Having these as .styles is part of SVG 2 and not SVG 1.1 and SVG 2 is unfinished. Firefox does not yet implement this part of SVG 2, although it does implement other parts that Chrome does not.
var margin = {top: 50, right: 20, bottom: 60, left: 70};
var width = 800 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 4])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 60])
.range([height, 0]);
var yVal = d3.scale.linear()
.domain([60, 0])
.range([height, 0]);
var yAxisMinor = d3.svg.axis()
.scale(y)
.ticks(13)
.tickSize(width, 0)
.orient('right');
var yAxisMajor = d3.svg.axis()
.scale(y)
.ticks(7)
.tickSize(width, 0)
.tickPadding(-(width + 5))
.tickFormat(d3.format('d'))
.orient('right');
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 xLabel = svg.append('g')
.attr('class', 'x label')
.attr('transform', 'translate(0, ' + height/2 + ') rotate(-90)')
.append('text')
.attr('text-anchor', 'middle')
.attr('dy', '-40')
.text('Prozent');
var gx = svg
.append('g').attr('class', 'x axis');
gx.append('g')
.attr('transform', 'translate(7, -15)')
.append('line')
.attr('x2', '0')
.attr('y2', height + 15);
gx.append('g')
.attr('transform', 'translate(0, -26) scale(0.15, 0.15)')
.append('path')
.attr('d', 'M0,86.6L50,0L100,86.6C50,75 50,75 0,86.6z');
var gyMinor = svg.append('g')
.attr('class', 'y axis minor')
.call(yAxisMinor);
gyMinor.selectAll('text').remove();
var gyMajor = svg.append('g')
.attr('class', 'y axis major')
.call(yAxisMajor);
gyMajor.selectAll('text')
.style('text-anchor', 'end')
.attr('dy', '7px');
var drawArea = svg.append('g')
.attr('class', 'block')
.attr('transform', 'translate(' + 20 + ', ' + height + ') scale(1, -1)');
var backBlocks = drawArea
.selectAll('rect.back')
.data([64, 64, 64, 64])
.enter()
.append('rect')
.attr('class', 'back')
.attr('width', width/5)
.attr('height', yVal)
.attr('x', function (d, i) { return x(i); });
var frontBlocks = drawArea
.selectAll('rect.front')
.data([0,0,0,0])
.enter()
.append('rect')
.attr('class', 'front')
.attr('width', width/5)
.attr('height', yVal)
.attr('x', function (d, i) { return x(i); });
var newHeight = function (d, i) {
var y = d3.event.clientY;
d3.select(frontBlocks[0][i % 4]).style('height', height + margin.bottom - y);
};
var currentActiveBlock = false;
drawArea.selectAll('rect')
.on('mouseover', function (d, i) {
d3.select(backBlocks[0][i % 4]).style('opacity', '0.5');
})
.on('mouseout', function () {
backBlocks.style('opacity', '0');
})
.on('mousedown', function (d, i) {
d3.select(backBlocks[0][i % 4]).style('opacity', '0.5');
newHeight.call(this, d, i);
currentActiveBlock = i % 4;
})
.on('mousemove', function (d, i) {
if (currentActiveBlock === false) {
return;
}
newHeight.call(this, d, currentActiveBlock);
})
.on('mouseup', function (d, i) {
d3.select(frontBlocks[0][currentActiveBlock]).style('opacity', '1');
newHeight.call(this, d, currentActiveBlock);
currentActiveBlock = false;
});
body {
font: 18px sans-serif;
}
svg {
}
.label text {
font-weight: bold;
}
.y.axis path {
display: none;
}
.x.axis path {
fill: #333;
}
.axis line {
shape-rendering: crispEdges;
stroke: #333;
stroke-width: 2px;
}
.axis.minor line {
stroke-width: 1px;
}
.axis text {
text-anchor: end;
}
.block rect {
cursor: ns-resize;
}
.block rect.back {
opacity: 0.0;
fill: #ddd;
}
}
.block rect.front {
fill: #222;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Resources