Public
Edited
May 23, 2023
Plot.plot({
color: {legend: true},
marks: [
Plot.line(data,Plot.windowY(5,{x:"Time", y:"Pressure bar 1", stroke:"#38322c"})),
Plot.line(data,Plot.windowY(5,{x:"Time", y:"Pressure bar 2", stroke:"#516067"})),
Plot.line(data,Plot.windowY(5,{x:"Time", y:"Pressure bar 3", stroke:"#c38d4f"})),
Plot.line(data,Plot.windowY(5,{x:"Time", y:"Pressure bar 4", stroke:"#a74a43"})),
Plot.line(data,Plot.windowY(5,{x:"Time", y:"Pressure bar 5", stroke:"#82ac7c"})),
Plot.line(data,Plot.windowY(5,{x:"Time", y:"Pressure bar 6", stroke:"#5e6b62"})),
Plot.text(data, Plot.selectLast(Plot.normalizeY({
x: "Time",
y: "Pressure bar 1",
z: "Pressure bar",
text: "Pressure bar 1",
textAnchor: "start",
dx: 3}))),
],
marginRight: 100,
width
})
data = FileAttachment("230426_HourlyData.csv").csv({typed: true})
data
Type Table, then Shift-Enter. Ctrl-space for more options.
data1
X
Time
Y
Pressure bar 6
Color
Pressure bar 5
Size
—
Facet X
—
Facet Y
—
Mark
dot
Type Chart, then Shift-Enter. Ctrl-space for more options.
viewof k=Inputs.range([1,10],{step:1, label:"k-표시정도", value:7})
Plot.plot({
marks: [
Plot.line(data,Plot.windowY({x:"Time", y:"Pressure bar 1", stroke:"#A1B9C5", k})),
Plot.line(data,Plot.windowY({x:"Time", y:"Pressure bar 2", stroke:"#516067", k})),
],
color: {
legend: true,
domain : ["Pressure bar 1","Pressure bar 2"],
range: ["#A1B9C5", "#516067"]},
width: 1500
})
viewof k2=Inputs.range([1,10],{step:1, label:"k-표시정도", value:7})
Plot.plot({
marks: [
Plot.line(data,Plot.windowY({x:"Time", y:"Pressure bar 3", stroke:"#c38d4f", k})),
Plot.line(data,Plot.windowY({x:"Time", y:"Pressure bar 4", stroke:"#a74a43" ,k})),
Plot.line(data,Plot.windowY({x:"Time", y:"Pressure bar 5", stroke:"#82ac7c" ,k})),
Plot.line(data,Plot.windowY({x:"Time", y:"Pressure bar 6", stroke:"#5e6b62" ,k})),
],
color: {
legend: true,
domain : ["Pressure bar 3","Pressure bar 4","Pressure bar 5","Pressure bar 6"],
range: ["#c38d4f", "#a74a43", "#82ac7c","#5e6b62"]},
width: 1500
})
Plot.plot({
marks: [
Plot.line(data,Plot.windowY({x:"Time", y:"Efficiency factor", k})),
],
height:100
})
Plot.plot({
width : 500,
height: 500,
marginRight: 90,
marginLeft: 110,
grid: true,
x: {nice: true},
y: {inset: 5},
marks: [
Plot.frame(),
Plot.dot(data, {
x: "Temperature 1",
y: "Pressure bar 1",
fill:"#A1B9C5", fillOpacity: 0.2
}),
Plot.dot(data, {
x: "Temperature 1",
y: "Pressure bar 2",
fill:"#516067", fillOpacity: 0.2
}),
Plot.dot(data, {
x: "Temperature 1",
y: "Pressure bar 3",
fill:"#c38d4f", fillOpacity: 0.2
})
]
})
image1 = FileAttachment("image.png").image()
Plot.plot({
marks: [
Plot.line(data,Plot.windowY({x:"Efficiency factor", y:"Vibration mm/s",k})),
],
//height:100
})
Plot.plot({
facet: {
(data,
{x: "Pressure bar 1","Pressure bar 2"})
},
marks: [
Plot.frame(),
Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm"})
]
})
viewof color = Inputs.select(dimensions, { label: "color by" })
{
// Reshape wide data to make it tidy.
const points = dimensions.flatMap((dimension) =>
data.map(({ [dimension]: value }, index) => ({ index, dimension, value }))
);
// Compute normalization scales for each dimension.
const scales = new Map(
dimensions.map((dimension) => [
dimension,
d3.scaleLinear().domain(d3.extent(data, (d) => d[dimension]))
])
);
// Compute ticks for each dimension.
const ticks = dimensions.flatMap((dimension) => {
return scales
.get(dimension)
.ticks(19)
.map((value) => ({ dimension, value }));
});
return Plot.plot({
marginLeft: 104,
marginRight: 20,
x: { axis: null },
y: { padding: 0.1, domain: dimensions, label: null, tickPadding: 9 },
color: { scheme: "BrBG", type: "linear", reverse: true, legend: true },
marks: [
Plot.ruleY(dimensions),
Plot.lineX(points, {
x: ({dimension, value}) => scales.get(dimension)(value),
y: "dimension",
z: "index",
stroke: ({index}) => data[index][color],
strokeWidth: 0.5,
strokeOpacity: 0.5
}),
Plot.text(ticks, {
x: ({dimension, value}) => scales.get(dimension)(value),
y: "dimension",
text: "value",
fill: "black",
stroke: "white",
strokeWidth: 3
})
],
height:700
});
}
dimensions = data.columns.slice(1)
import {vl} from '@vega/vega-lite-api'
https://observablehq.com/@observablehq/plot-parcoords 새로운 스타일
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
