Public
Edited
Mar 15, 2023
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
data = alphabet
data
Type Table, then Shift-Enter. Ctrl-space for more options.
// viewof inset = Inputs.range([0, 25], {label: "Amount", step: 1})
inset=-2
//inset = css property, 마진 늘리는 역할(내부는 줄어든다.)
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true},
insetLeft: inset, insetRight:inset}),
Plot.ruleY([0])
],
width
})
viewof letter = Inputs.range([0, 25], {label: "Amount", step: 1})
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency",
fill: (d, i) => i === letter ? "pink" : "lightgray",
sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
import {chart as sankey} from "@d3/sankey"
sankey
Plot.plot({
marks: [
Plot.ruleY([1/26],{stroke:"green"}),
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.barY([1/26], {fill:"orange", fillOpacity:0.4}), //이거 내가 막대나 선 뒤에 배경 넣을 때 쓰는 방식이다!(평균계산 식으로 할 수 없나 궁금하네)+코드 위치로 막대 그래프 앞/뒤로 배치할 수 있다
Plot.ruleY([0])
]
})
1/26
Plot.plot({
marks: [
Plot.barY([0.127], {fill:"orange", fillOpacity:0.4}), //이거 내가 막대나 선 뒤에 배경 넣을 때 쓰는 방식이다!(평균계산 식으로 할 수 없나 궁금하네)+코드 위치로 막대 그래프 앞/뒤로 배치할 수 있다-특정 항목 뒤에만 배경 칠하는 방법은 없을까?
Plot.ruleY([1/26],{stroke:"green"}),
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
],
//domain: ["S", "C"],
//legend: true
})
Plot.plot({
y: {
grid: true,
label: "↑ Unemployment (%)"
},
marks: [
Plot.ruleY([0]),
Plot.line(bls, {x: "date", y: "unemployment", z: "division", stroke: "lightgray", title: "division"}),
// Plot.line(metro, {x: "date", y: "unemployment", z: "division", stroke: "black"}),
// Plot.line(bls, Plot.groupX({y: "mean"}, {x: "date", y: "unemployment", stroke: "steelblue"}))
Plot.line(bls, Plot.groupX({y: "mean"}, {x: "date", y: "unemployment", stroke: "steelblue"}))
],
width
})
import {bls} from "@observablehq/plot-line"
import {Plot} from "@mkfreeman/plot-tooltip"
data1 = bls
data1
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof k = Inputs.range([1, 20], {label: "Smoothing", step: 1, value: 1})
Plot.plot({
marks: [
// Plot.ruleY([0]),
Plot.lineY(power_vs_temperature,
Plot.windowY({x: "date", y: "temperature", k: k, reduce: "mean", stroke: "city"}))
],
color: {
domain: ["Seattle", "Los Angeles"],
legend: true
},
marginLeft: 50,
width
})
import {power_vs_temperature} from "@observablehq/guide-electricity"
data2 = power_vs_temperature
data2
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
// Plot.ruleY([0]),
Plot.dot(power_vs_temperature,
{x: "temperature", y: "power", fill: "city"})
],
color: {
domain: ["Seattle", "Los Angeles"],
legend: true
},
marginLeft: 50,
width
})
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.
