{
let data = [10,50,42];
let margin = 10;
// draw this data in three bars
// The current draw fram is from (10,10) to (490,490)
// make 50 the longest bar from 10 to 490
// notice the y coordinate is inverted!
const svgContainer = document.createElement("div");
// notice how to pass variables to the string in JS
svgContainer.innerHTML =
<svg width="500" height="500">
<line x1="${margin}" y1="${margin}" x2="${margin}" y2= "${500 - margin}" stroke="blue" />
<line x1="${margin}" y1="${500 - margin}" x2="${500 - margin}" y2= "${500 - margin}" stroke="blue" />
<rect x = "margin + 50 + index * (barWidth + 50)";
Height = "(value) => (value * 480) / 50";
y = "(height) => 480 - height + 10";/>
</svg>
;
return svgContainer;
}
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.
