I'm a Software Developer. Rails, React and Python enthusiast. Director of Technology at Epifany & Stealz. @d3 learner
Public
Edited
Jul 10, 2024
13 forks
12 stars
DOM.download(() => rasterize(chart), undefined, "Save as PNG")
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();
}
height = 500
margin = ({top: 20, right: 20, bottom: 30, left: 30})
x = d3.scaleUtc()
.domain(d3.extent(data2, ({step}) => step))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([-d3.max(data, ({value}) => value), d3.max(data, ({value}) => value)]).nice()
.range([height - margin.bottom, margin.top])
area = d3.area()
.curve(curve)
.x(({step}) => x(step))
.y0(y(0))
.y1(({value}) => y(value))
areaMirror = d3.area()
.curve(curve)
.x(({step}) => x(step))
.y0(y(0))
.y1(({value}) => y(-value))
data = [
{step: 1, value: 62259, label: 'Survey Started'},
{step: 2, value: 25465, label: 'Completed Survey'},
{step: 3, value: 405, label: 'Click End Card*'},
]
d3 = require('d3@^5.9')
import { addWebFont } from '@leonelgalan/embedding-fonts-into-an-svg'
pickrOptions = ({ components: { preview: false, opacity: true, hue: true, interaction: { input: true, save: true }}})
import {colorPicker} from '@leonelgalan/color-picker-with-alpha-and-optional-pickroptions-see-code'
import {rasterize} from "@mbostock/saving-svg"
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.
