chart = {
const width = 928; // uncomment for responsive width
const height = 300;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
svg
.selectAll("circle")
.data(d3.range(18))
.join("circle")
.attr("cx", d => 30 + d * 50)
.attr("cy", height / 2)
.attr("r", d => Math.random() * 20)
.attr("fill", "#911b49");
return svg.node();
}
Plot.plot({
marks: [
Plot.boxX(olympians, {x: "weight", y: "sport", sort: {y: "x"}})
]
})
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.
workbook = FileAttachment("火山图数据.xlsx").xlsx()
workbook.sheetNames
data = workbook.sheet(0, {
headers: false,
// range: "A1:J10"
})
data
Type Table, then Shift-Enter. Ctrl-space for more options.
data1
X*
—
Y*
—
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
color: {
scheme: "ylgnbu"
},
marks: [
Plot.hexagon(olympians, Plot.hexbin({fill: "sum"}, {x: "weight", y: "height"}))
]
})
Plot.plot({
marks: [
Plot.barX(olympians, Plot.groupY({x: "count"}, {y: "nationality", sort: {y: "x", reverse: true, limit: 10}})),
Plot.ruleX([0])
]
})
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.
