Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add area chart #148

Closed
wants to merge 3 commits into from
Closed

Add area chart #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2316b1
Added stackTransition and temp dev file
carlosvpi Nov 8, 2024
eb97bdd
Stack transition works on barchart
carlosvpi Nov 9, 2024
0f7f181
adding area chart call
carlosvpi Nov 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/transition/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import transition_remove from "./remove.js";
import transition_select from "./select.js";
import transition_selectAll from "./selectAll.js";
import transition_selection from "./selection.js";
import transition_stackTransition from "./stackTransition.js";
import transition_style from "./style.js";
import transition_styleTween from "./styleTween.js";
import transition_text from "./text.js";
Expand Down Expand Up @@ -59,6 +60,7 @@ Transition.prototype = transition.prototype = {
attr: transition_attr,
attrTween: transition_attrTween,
style: transition_style,
stackTransition: transition_stackTransition,
styleTween: transition_styleTween,
text: transition_text,
textTween: transition_textTween,
Expand Down
28 changes: 28 additions & 0 deletions src/transition/stackTransition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export default function (arcs) {
return function (element) {
const ease = element.ease()
const duration = element.duration()
const data = []
arcs.forEach(slice => data.push({ slice, length: slice.data, start: data[data.length - 1]?.end ?? 0, end: (data[data.length - 1]?.end ?? 0) + slice.data }))
const sum = d3.sum(data, d => d.length)
const scales = data.map(({ start, end }) => d3.scaleLinear([start/sum, end/sum], [0, 1]))
element.delay(0)
.duration(duration)
.easeVarying((v, i, slices) => t => {
let variation = scales[i](ease(t))
if (variation <= 0 && i > 0) {
d3.select(slices[i]).attr('opacity', 0)
}
if (variation > 0) {
d3.select(slices[i]).attr('opacity', 1)
}
if (variation > 1 && i < slices.length - 1) {
variation = 1
}
return variation
})
d3.timeout(() => {
element.nodes().forEach(slice => d3.select(slice).attr('opacity', 1))
}, duration);
}
}
247 changes: 247 additions & 0 deletions stack-transition.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,247 @@
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js" integrity="sha512-vc58qvvBdrDR4etbxMdlTt4GBQk1qjvyORR2nrsPsFPyrs+/u5c3+1Ct6upOgdZoIl7eq6k3a1UPDSNAQi/32A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-scale-chromatic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3-ease.min.js"></script>
</head>
<body onload="main()">
</body>
<script>
const stackTransition = _data => function (element) {
const ease = element.ease()
const duration = element.duration()
const data = []
_data.forEach((datum, i) => data.push({ start: i === 0 ? 0 : data[i - 1].end, end: datum + (i === 0 ? 0 : data[i - 1].end), length: datum }))
const sum = d3.sum(data, d => d.length)
const scales = data.map(({ start, end }) => d3.scaleLinear([start/sum, end/sum], [0, 1]))

element.delay(0)
.duration(duration)
.easeVarying((v, i, slices) => t => {
let variation = scales[i](ease(t))
if (variation <= 0 && i > 0) {
d3.select(slices[i]).attr('opacity', 0)
variation = 0
}
if (variation > 0) {
d3.select(slices[i]).attr('opacity', 1)
}
if (variation > 1 && i < slices.length - 1) {
variation = 1
}
return variation
})
d3.timeout(() => {
element.nodes().forEach(slice => d3.select(slice).attr('opacity', 1))
}, duration);
}

function main() {
const easers = [
'easeLinear',
'easePolyIn',
'easePolyOut',
'easePolyInOut',
'easeQuadIn',
'easeQuadOut',
'easeQuadInOut',
'easeCubicIn',
'easeCubicOut',
'easeCubicInOut',
'easeSinIn',
'easeSinOut',
'easeSinInOut',
'easeExpIn',
'easeExpOut',
'easeExpInOut',
'easeCircleIn',
'easeCircleOut',
'easeCircleInOut',
'easeElasticIn',
'easeElasticOut',
'easeElasticInOut',
'easeBackIn',
'easeBackOut',
'easeBackInOut',
'easeBounceIn',
'easeBounceOut',
'easeBounceInOut'
]
easers.forEach(ease => {
const width = 140;
const height = 280;
const radius = 60;
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
svg.append('text')
.attr('y', 15)
.attr('x', width / 2)
.attr('text-anchor', 'middle')
.text(ease)
svg.append('rect')
.attr('width', width - 1)
.attr('height', height - 1)
.attr('stroke', 'black')
.attr('fill-opacity', 0)
singleSlicePie({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height, radius, ease: d3[ease], y: height / 4 + 10 })
stackAnimatedPie({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height, radius, ease: d3[ease], y: height * 3 / 4 })
})
easers.forEach(ease => {
const width = 250;
const height = 140;
const radius = 60;
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
svg.append('text')
.attr('y', 15)
.attr('x', width / 2)
.attr('text-anchor', 'middle')
.text(ease)
svg.append('rect')
.attr('width', width - 1)
.attr('height', height - 1)
.attr('stroke', 'black')
.attr('fill-opacity', 0)
singleBar({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height: 100, top: 40, ease: d3[ease], x: width / 4 - 25 })
stackAnimatedBar({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height: 100, ease: d3[ease], y: height * 3 / 4, x: width * 3 / 4 - 25, top: 40 })
})
easers.forEach(ease => {
const width = 250;
const height = 140;
const radius = 60;
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
svg.append('text')
.attr('y', 15)
.attr('x', width / 2)
.attr('text-anchor', 'middle')
.text(ease)
svg.append('rect')
.attr('width', width - 1)
.attr('height', height - 1)
.attr('stroke', 'black')
.attr('fill-opacity', 0)
areaChart({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height: 100, top: 40, ease: d3[ease], x: width / 4 - 25 })
stackAreaBar({ svg, fill: d3.scaleOrdinal(d3.schemeAccent), width, height: 100, ease: d3[ease], y: height * 3 / 4, x: width * 3 / 4 - 25, top: 40 })
})
}
function singleSlicePie({ svg, width, height, radius, ease, fill, y }) {
const data = [54]
const pie = d3.pie();
const arcs = pie(data);
svg.append('g')
.attr('transform', `translate(${width / 2}, ${y})`)
.selectAll('.slice')
.data(arcs)
.enter()
.append('path')
.classed('slice', true)
.attr('d', v => d3.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(0)
.endAngle(0)()
)
.attr('fill', fill)
.attr('stroke', 'black')
.attr('stroke-width', '1px')
.transition()
.delay((v, i) => i * 1000)
.duration(5000)
.ease(ease)
.attrTween('d', v => t => d3.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(v.startAngle)
.endAngle(v.endAngle * t + v.startAngle * (1 - t))()
);
}
function stackAnimatedPie({ svg, width, height, radius, ease, fill, y }) {
const data = [21, 13, 8, 5, 3, 2, 1, 1];
const pie = d3.pie();
const arcs = pie(data);

svg.append('g')
.attr('transform', `translate(${width / 2}, ${y})`)
.selectAll('.slice')
.data(arcs)
.enter()
.append('path')
.classed('slice', true)
.attr('d', v => d3.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(0)
.endAngle(0)()
)
.attr('fill', fill)
.attr('stroke', 'black')
.attr('stroke-width', '1px')
.transition()
.duration(5000)
.ease(ease)
.call(stackTransition(data))
.attrTween('d', v => t => d3.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(v.startAngle)
.endAngle(v.endAngle * t + v.startAngle * (1 - t))()
);
}
function singleBar({ svg, width, height, radius, ease, fill, top, x }) {
const data = [54]
svg.append('g')
.selectAll('.element')
.data(data)
.enter()
.append('rect')
.attr('width', 25)
.attr('y', height + top)
.attr('x', x)
.attr('height', 0)
.attr('fill', fill)
.attr('stroke', 'black')
.attr('stroke-width', '1px')
.transition()
.duration(5000)
.ease(ease)
.attr('y', top)
.attr('height', height);
}
function stackAnimatedBar({ svg, width, height, radius, ease, fill, top, x }) {
const data = [21, 13, 8, 5, 3, 2, 1, 1]
const stack = d3.stack()
.keys([...data.keys()])
([Object.fromEntries(data.map((v,i)=>[i,v]))])
const yScale = d3.scaleLinear([0, d3.sum(data)], [0, height])
svg.append('g')
.selectAll('rect')
.data(stack)
.enter()
.append('rect')
.attr('width', 25)
.attr('x', x)
.attr('y', v => height + top - yScale(v[0][0]))
.attr('height', 0)
.attr('fill', fill)
.attr('stroke', 'black')
.attr('stroke-width', '1px')
.transition()
.duration(5000)
.ease(ease)
.call(stackTransition(data))
.attr('y', v => {
return top + height - yScale(v[0][1])
})
.attr('height', v => {
return yScale(v[0].data[v.index])
})
}
</script>
</html>