Published
Edited
Apr 27, 2021
2 stars
d3 = require("d3@4");
promise = (n)=> new Promise((resolve, reject)=> n<5 ? resolve(n) : reject(5));
await promise(6);
await promise(4);
data = (await fetch('https://static01.nyt.com/newsgraphics/2021/01/07/us-excess-death-2021/3e91c6b0ba893366f35a2f7dff1829dfd2404606/deaths.json')).json()
linearScale = d3.scaleLinear().domain([0, 1000]).range([0, 20]);
linearScale(570);
linearScale.invert(10);
sequential = d3.scaleSequential(d3.interpolatePlasma);
html`<svg widht="${width}" height="100">
<rect width="${width}" height="100" fill="${sequential(value)}"/>
</svg>`;
quantize = d3.scaleQuantize().domain([0, 1000]).range([1,2,3,4,5]);
quantize(quantizeValue);
quantile = d3.scaleQuantile().domain([0, 1000]).range([1,2,3,4,5]);
quantile(quantileValue);
threshold = d3.scaleThreshold().domain([0, 1000]).range([1,2,3,4,5]);
threshold(thresholdValue);
band = d3.scaleBand().domain(["one", "two", "three", "four"]).range([0, 100]);
stack(band);
point = d3.scalePoint().domain(["one", "two", "three", "four"]).range([0, 100]);
stack(point);
ordinal = d3.scaleOrdinal().domain(["one", "two", "three", "four"]).range([1, 2, 3, 4]);
ordinal('one');
d3.extent([4,8,15,1,0]);
{
const svg = d3.create('svg').attr('width', width).attr('height', 20);
svg.append('g').call(d3.axisBottom(band));
return svg.node();
}
{
const height = 500;
const padding = 20;
const svg = d3.create('svg').attr('width', width).attr('height', height);
/*
Попробуйте заменить функцию перехода на одну из следующих:
d3.easeBounce, d3.easeElastic,
d3.easeSin, d3.easeQuad,
d3.easeCubic, d3.easePoly,
d3.easeCircle, d3.easeExp,
d3.easeBack, d3.easeBounceOut
*/
const data = d3.range(20).map(()=>({x: Math.random(),y: Math.random(),r: Math.random()}));
const x = d3.scaleLinear().domain(d3.extent(data.map(d=>d.x))).range([padding, width-padding]);
const y = d3.scaleLinear().domain(d3.extent(data.map(d=>d.y))).range([height-padding, padding]);
const circles = svg.selectAll('circle').data(data)
.enter().append('circle')
.attr('cx', d => x(d.x))
.attr('cy', height+padding)
.attr('fill', 'steelblue')
.attr('r', d => d.r *10);
circles.transition()
.ease(d3.easeQuad)
.duration(3000)
.attr("cy", d => y(d.y));
return svg.node();
}
{
const svg = d3.create('svg').attr('width', 200).attr('height', 50);
svg.append('rect').attr('width', 200).attr('height', 50).attr('fill', d3.interpolateRainbow(d3.easeQuad(v)));
return svg.node();
}
v = {
while(true){
yield Math.sin(Date.now()/1000);
}
}
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.
