Visualization can transform the reach of open data and revolutionize transparency and accountability.
Markdown or
<em>HTML</em> to represent text.
x * 10 +3
y = x + 2;
z = square(y);
htmlcreator("world");
viewof value = Inputs.range([0, 100], {label: "Amount", step: 1})
viewof age = Inputs.range([0, 80], {label: "Age", step: 1})
age
The current slider value is ${value}
viewof selected = Inputs.select(["clear", "cloudy", "rainy", "windy"], {label: "Select the desired weather"})
viewof form = Inputs.form({
potato: Inputs.checkbox(["A", "B", "C"], {label: "Select some"}),
option2: Inputs.range([0, 100], {label: "Amount", step: 1}),
option3: Inputs.radio(["A", "B"], {label: "Select one"}),
option4: Inputs.select(["A", "B"], {label: "Select one"})
})
form.potato
form.option2
form.option3
form.option4
{
const context = DOM.context2d(128, 128);
context.fillStyle = 'rgb(200, 20, 30)';
context.fillRect(10, 10, 50, 50);
context.fillStyle = 'rgba(20, 200, 30, 0.4)';
context.fillRect(50, 30, 120, 60);
return context.canvas;
}
<svg width="128" height="128" fill="none" stroke="black">
<rect x="10" y="10" width="50" height="50" style="fill:rgb(200,20,30);stroke-width:0" />
<rect x="50" y="30" width="120" height="60" style="fill:rgba(20,200,30, 0.4);stroke-width:0" />
</svg>
<svg width="128" height="128" fill="none" stroke="black">
<rect x="10" y="10" width="${width}" height="${height}" style="fill:rgb(200,20,30);stroke-width:0" />
</svg>
json = FileAttachment("testDataJsonExample.json").json()
weather = await FileAttachment("GironaWeatherData.csv").csv();
d3 = require("d3@6")
square=x=>x*x;
htmlcreator = function(word){
return html`<p>Hello <b>${word}</b>!</p>`;
}
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.
