Public
Edited
Mar 19
Insert cell
Insert cell
data = d3.csv("https://data.frankcontrepois.com/FinOpsGuyAwsPricingElaboratedData/ec2_gen_lnx_na_prices.csv", d3.autoType)
Insert cell
family
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof family = Inputs.select(families, {label: "Instance Family"})
Insert cell
family
Insert cell
Plot.plot({
marginLeft: 120,
marginBottom: 60,
marginTop: 50,
x: {
label: "All prices per vCPU",
inset: 35,
},
y: {
label: null,
},
marks: [
Plot.ruleX([0]),
Plot.tickX(
family,
{x: "pricePervCPU", y: "Region Code", strokeOpacity: 0.3, tip: true}
),
Plot.tickX(
family,
Plot.groupY(
{x: "median"},
{x: "pricePervCPU", y: "Region Code", stroke: "red", strokeWidth: 4, sort: {y: "x"}}
)
)
]
})
Insert cell
data
X
instanceFamily
Y
PricePerUnit
Color
Location
Size
Facet X
Facet Y
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Plot.plot({
width: 1000,
marginLeft: 50,
marginBottom: 60,
marginTop: 50,
color: { legend: true },
x: {
//type: "log",
inset: 35,
tickRotate: -90
},
y: {
//type: "log",
inset: 25,
transform: (f) => d3.format(".2f")(f)
},
marks: [
Plot.density(family, {
x: "pricePervCPU",
y: "pricePerNomalUnit",
stroke: "blue",
//thresholds: 4,
channels: { generation: "generation", region: "Region Code" }
}),
Plot.dot(family, {
x: "pricePervCPU",
y: "pricePerNomalUnit",
tip: true,
fill: "Region Code",
channels: { Generation: "generation" }
}),
Plot.linearRegressionY(family, {
x: "pricePervCPU",
y: "pricePerNomalUnit",
stroke: "red"
})
]
})
Insert cell
Plot.plot({
marginLeft: 60,
marginBottom: 60,
marginTop: 50,
width: 1000,
color: {legend: true},
x:{
inset: 35,
type: "log",
tickRotate: -90,
},
y:{
inset: 25,
type: "log",
},
marks: [
Plot.density(data,
{x: "pricePervCPU",
y: "pricePerNomalUnit",
stroke: "blue",
//thresholds: 4,
channels: {generation: "generation", region: "Region Code"}
}),
Plot.dot(data,
{x: "pricePervCPU",
y: "pricePerNomalUnit",
tip: true,
fill: d=>d["instanceFamily"] == family[0].instanceFamily ? "red" : "grey",
r: d=>d["instanceFamily"] == family[0].instanceFamily ? "5" : "3",
channels: {Generation: "generation"}}),
Plot.linearRegressionY(data,
{x: "pricePervCPU",
y: "pricePerNomalUnit",
stroke: "instanceFamily"}),

]
})
Insert cell
families = d3.group(data, d => d.instanceFamily)
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

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