Public
Edited
Aug 24, 2023
bulb1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
bulbs = FileAttachment("bulb1.csv").csv({typed: true})
viewof features = Inputs.checkbox(["rgb", "wifi", "sensor", "dim", "hub", "BT", "temp"], {label: "features", value: ["rgb"]})
features
function filterFunction(d) {
return features.every(feature => d[feature] === 1);
}
viewof rgb = Inputs.toggle({label: "rgb"})
viewof wifi = Inputs.toggle({label: "wifi"})
viewof sensor = Inputs.toggle({label: "sensor"})
viewof dim = Inputs.toggle({label: "dim"})
viewof hub = Inputs.toggle({label: "hub"})
viewof BT = Inputs.toggle({label: "BT"})
viewof temp = Inputs.toggle({label: "temp"})
bulb = Plot.plot({
marks: [
Plot.dot(bulb1, Plot.dodgeX("middle", {fx: "fixture type", y: "brand", fill: "lumens", r: "price", channels: {id: "id no.", model: "model"}, tip: true}))
], grid: true, color: {legend: true, scheme: "Oranges", reverse:true }, marginLeft: 100, marginBottom: 50
})
bulb2 = Plot.plot({
marks: [
Plot.dot(bulb1, Plot.dodgeX("middle",{ filter: (d) => (d.rgb == 1 && d.wifi ==1 && d.dim == 1), fx: "fixture type", y: "brand", fill: "lumens", r: "price", channels: {id: "id no.", model: "model"}, tip: true}))
], grid: true, color: {legend: true, scheme: "Oranges", reverse:true }, marginLeft: 100, marginBottom: 50
})
height = 400
bulb4 = Plot.plot({
width: 1000, // Set the width of the frame
height: 600, // Set the height of the frame
marks: [
Plot.dot(bulb1, Plot.dodgeX("middle", {
filter: filterFunction,
fx: "fixture type",
y: "brand",
fill: "lumens",
r: "price",
channels: { id: "id no.", model: "model" },
tip: true,
}))
],
grid: true,
color: { legend: true, scheme: "Oranges", reverse: true },
marginLeft: 100,
marginBottom: 50,
style: { // Add the style property for background color
// background: "#5E8993", // Set background color to #15313E
color: "#black", // Set text color to off white
gridColor: "black",// Set grid color to off white
padding: "20px"
}
});
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.
