Public
Edited
Nov 30, 2023
Fork of Simple D3
Insert cell
Insert cell
{
var margin = { top: 10, right: 30, bottom: 30, left: 40 },
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

// append the svg object to the div of the page

// Create the SVG container.
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");

// 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" }
];
// Add X axis
const x = d3
.scaleLinear()
.domain([-1, 1])
.range([margin.left, width - margin.right]);
svg
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

// Add Y axis
const y = d3
.scaleLinear()
.domain([-1, 1])
.range([height - margin.bottom, margin.top]);
svg.append("g").call(d3.axisLeft(y));

// Prepare a color palette
const color = d3
.scaleOrdinal()
.domain([0, 1]) // Points per square pixel.
.range([
"#e31a1c",
"#1f78b4",
"#ff7f00",
"#b2df8a",
"#87843b",
"#fb9a99",
"#8dd3c7",
"#FFFF00"
]);

// compute the density data
svg
.append("path")
// .attr("class", "mypath")
.datum(data)
.attr("fill-opacity", ".1")
.attr("stroke-width", 1)
.attr("stroke-linejoin", "round")
.attr(
"d",

d3
.area()
.curve(d3.curveBasis)
.x(function (d) {
return x(d[0]);
})
.y0(y(0))
.y1(function (d) {
return y(d[1]);
})
);

return svg.node();
}
Insert cell
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.

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