Plot.plot({
marks: [Plot.dot(cars, { x: "power (hp)", y: "economy (mpg)" })]
})
cars
import { nycSpreadsheet } from "@observablehq/build-your-first-custom-scatterplot"
// 读取sheet数据并且保留表格的header
nycData = nycSpreadsheet.sheet(0, { headers: true })
//同样绘制一个scatterplot
Plot.plot({
marks: [Plot.dot(nycData, { x: "date", y: "medianAskingPrice" })]
})
//让某一列值作为填充值
Plot.plot({
marks: [
Plot.dot(nycData, {
x: "date",
y: "medianAskingPrice",
fill: "neighborhood", //散点填充
r: "priceCutShare" //散点大小
})
],
color: { legend: true }, //添加图例信息
marginLeft: 100
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.line(nycData, {
x: "date",
y: "medianAskingPrice",
stroke: "neighborhood" //线条不闭合
}),
Plot.dot(nycData, {
x: "date",
y: "medianAskingPrice",
fill: "neighborhood",
r: "priceCutShare"
})
],
color: { legend: true },
marginLeft: 100
})
chart = Plot.plot({
facet: {
data: nycData,
y: "borough",
marginRight: 100
},
marks: [
Plot.ruleY([0]),
Plot.line(nycData, {
x: "date",
y: "medianAskingPrice",
stroke: "neighborhood" //线条不闭合
}),
Plot.dot(nycData, {
x: "date",
y: "medianAskingPrice",
fill: "neighborhood",
r: "priceCutShare"
})
],
color: { legend: true },
marginLeft: 100
})
ExportPicture({
DOM: DOM,
chart: chart,
filename: "scatterplot",
fileType: "svg"
})
import { ExportPicture } from "@zpliu1126/core"
import { toc } from "@nebrius/indented-toc"
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.
