chart = {
// append the svg object to the div of the page
// read data
let data = [
{ x: -0.44972, y: 0.1771, cell: "I1", lib: "S5" },
{ x: 0.19, y: 0.752, cell: "I1", lib: "S6" },
{ x: -0.21137, y: -0.2388, cell: "I1", lib: "S3" },
{ x: -0.0348, y: 0.01171, cell: "I1", lib: "S6" },
{ x: -0.357, y: 0.822, cell: "I1", lib: "S6" },
{ x: -0.2543, y: -0.3184, cell: "I1", lib: "S6" },
{ x: -0.1235, y: 0.2822, cell: "I3", lib: "S6" },
{ x: -0.43765, y: -0.34685, cell: "I1", lib: "S6" }
];
// console.log(data);
var margin = { top: 10, right: 30, bottom: 30, left: 40 },
width = 1060 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
// append the svg object to the body of the page
var k = height / width;
var x = d3
.scaleLinear()
.range([margin.left, width - margin.right])
.domain([-1, 1]);
var y = d3
.scaleLinear()
.range([height - margin.bottom, margin.top])
.domain([-1, 1]);
const colorScale = d3
.scaleOrdinal()
.domain([0, 1])
.range(["#e31a1c", "#1f78b4", "#ff7f00", "#b2df8a", "#87843b", "#fb9a99"]);
var tops = svg
.selectAll(null) // 删除原来的路径
.data(data)
.enter()
.append("g")
.append("path")
.attr("transform", (d) => `translate(${x(d.x)},${y(d.y)})`)
.attr("d", d3.symbol(d3.symbolStar).size(300))
.attr("fill", (d) => colorScale(d.lib));
const zoom = d3.zoom().scaleExtent([0.5, 32]).on("zoom", zoomed);
const gx = svg.append("g");
const gy = svg.append("g");
var yAxis = (g, y) =>
g
.call(d3.axisRight(y).ticks(12 * k))
.call((g) => g.select(".domain").attr("display", "none"));
var xAxis = (g, x) =>
g
.attr("transform", `translate(0,${height})`)
.call(d3.axisTop(x).ticks(12))
.call((g) => g.select(".domain").attr("display", "none"));
svg.call(zoom).call(zoom.transform, d3.zoomIdentity);
function zoomed({ transform }) {
const zx = transform.rescaleX(x).interpolate(d3.interpolateRound);
const zy = transform.rescaleY(y).interpolate(d3.interpolateRound);
tops.attr("transform", transform).attr("size", 300 / transform.k);
gx.call(xAxis, zx);
gy.call(yAxis, zy);
}
return svg.node();
}
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.
