Published
Edited
Nov 21, 2020
2 stars
chart = {
const xmin = d3.min(cells, d => d.X);
const xmax = d3.max(cells, d => d.X) + 1;
const ymin = d3.min(cells, d => d.Y);
const ymax = d3.max(cells, d => d.Y) + 1;
const height = (width / (xmax - xmin)) * (ymax - ymin);
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background", "#ffffff");
var x = d3
.scaleLinear()
.domain([xmin, xmax])
.range([0, width]);
var y = d3
.scaleLinear()
.domain([ymin, ymax])
.range([height, 0]);
var color = d3
.scaleThreshold()
.domain([2.5, 3.3, 5, 10, 20, 30, 40, 50])
.range([
'#01665e',
'#35978f',
'#80cdc1',
'#c7eae5',
'#f6e8c3',
'#dfc27d',
'#bf812d',
'#8c510a',
'#543005'
]);
const g = svg.append("g");
const cell = g
.selectAll("rect")
.data(cells)
.enter()
.append("rect")
//.attr("x", d => x(d.X))
//.attr("y", d => y(d.Y + 1))
.attr("x", d => x(d.aqgroup * 3))
.attr("y", d => y(d.aqhisty / 2 - 1))
.style("stroke-width", 1)
.attr("vector-effect", "non-scaling-stroke")
.style("stroke", d => color(d.AQ))
.style("fill", d => color(d.AQ))
.attr("height", y(0) - y(1))
.attr("width", x(1) - x(0))
.transition()
.duration(500)
.delay(d => 3000 + d.AQ * 100)
.attr("x", d => x(d.X))
.attr("y", d => y(d.Y + 1));
/*
svg.call(
d3.zoom().on("zoom", ({ transform }) => g.attr("transform", transform))
);
*/
return svg.node();
}
d3 = require("d3@6")
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.
