Public
Edited
Dec 18, 2022
Fork of Funnel Chart
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
.call(addWebFont, 'Lato', 'https://fonts.gstatic.com/s/lato/v16/S6uyw4BMUTPHjx4wXiWtFCc.woff2')
.call(addWebFont, 'Lato-Bold', 'https://fonts.gstatic.com/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2')
.attr('style', `
background-color: ${background};
font-family: 'Lato';
`);
svg.append('linearGradient')
.attr('id', 'temperature-gradient')
.attr('gradientUnits', 'userSpaceOnUse')
.attr('x1', x(1)).attr('y1', 0)
.attr('x2', x(3)).attr('y2', 0)
.selectAll('stop')
.data([
{offset: '0%', color: gradient1 },
{offset: '100%', color: gradient2 },
])
.enter().append('stop')
.attr('offset', function(d) { return d.offset; })
.attr('stop-color', function(d) { return d.color; });
svg.append('path')
.datum(data2)
.attr('fill', 'url(#temperature-gradient)')
.attr('d', area);
svg.append('path')
.datum(data2)
.attr('fill', 'url(#temperature-gradient)')
.attr('d', areaMirror);

svg.selectAll('.values')
.data(data)
.enter()
.append('text')
.attr('class', 'values')
.attr('x', ({ step }) => x(step) + 10)
.attr('y', 30)
.text(({ value }) => d3.format(',')(value))
.attr('style', `
fill: ${values};
font-size: 22px;
`);
svg.selectAll('.labels')
.data(data)
.enter()
.append('text')
.attr('class', 'labels')
.attr('x', ({ step }) => x(step) + 10)
.attr('y', 50)
.text(({ label }) => label)
.attr('style', `
fill: ${labels};
font-family: 'Lato-Bold';
font-size: 14px;
`);
svg.selectAll('.percentages')
.data(data)
.enter()
.append('text')
.attr('class', 'percentages')
.attr('x', ({ step }) => x(step) + 10)
.attr('y', 70)
.text(({ value }, index) => index === 0 ? '' : d3.format('.1%')(value / data[0].value))
.attr('style', `
fill: ${percentages};
font-size: 18px;
`);
svg.selectAll('line')
.data(d3.range(2, data.length + 1))
.enter()
.append('line')
.attr('x1', value => x(value))
.attr('y1', 10)
.attr('x2', value => x(value))
.attr('y2', height - 30)
.style('stroke-width', 1)
.style('stroke', percentages)
.style('fill', 'none');
return svg.node();
}
Insert cell
height = 500
Insert cell
margin = ({top: 20, right: 20, bottom: 30, left: 30})
Insert cell
x = d3.scaleUtc()
.domain(d3.extent(data2, ({step}) => step))
.range([margin.left, width - margin.right])
Insert cell
y = d3.scaleLinear()
.domain([-d3.max(data, ({value}) => value), d3.max(data, ({value}) => value)]).nice()
.range([height - margin.bottom, margin.top])
Insert cell
area = d3.area()
.curve(curve)
.x(({step}) => x(step))
.y0(y(0))
.y1(({value}) => y(value))
Insert cell
areaMirror = d3.area()
.curve(curve)
.x(({step}) => x(step))
.y0(y(0))
.y1(({value}) => y(-value))
Insert cell
data = [
{step: 1, value: 259559, label: 'Complaints received'},
{step: 2, value: 129065, label: 'Enter case management'},
{step: 3, value: 17458, label: 'Enter final determination'},
{step: 4, value: 7402, label: 'Found in favour of victim'},

// Total only from case managed
// {step: 1, value: 129065, label: 'Enter case management'},
// {step: 2, value: 17458, label: 'Enter final determination'},
// {step: 3, value: 7402, label: 'Found in favour of victim'},

// Total only from CBA
// {step: 1, value: 18597, label: 'Complaints received'},
// {step: 2, value: 8749, label: 'Enter case management'},
// {step: 4, value: 260, label: 'Found in favour of victim'},

// Total by year 2022
// {step: 1, value: 40853, label: 'Complaints received'},
// {step: 2, value: 18602, label: 'Enter case management'},
// {step: 4, value: 1061, label: 'Found in favour of victim'},

]
Insert cell
d3 = require('d3@^5.9')
Insert cell
import { addWebFont } from '@leonelgalan/embedding-fonts-into-an-svg'
Insert cell
pickrOptions = ({ components: { preview: false, opacity: true, hue: true, interaction: { input: true, save: true }}})
Insert cell
import {colorPicker} from '@leonelgalan/color-picker-with-alpha-and-optional-pickroptions-see-code'
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more