Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<h4>a simple stacked bar graph in SVG</h4>
<svg width="300" height="200">
<line x1=10 y1=200 x2=480 y2=200 style="stroke: #aaa" />
<rect width=50 height=120 x=40 y=80 style="fill: #F63" />
<rect width=50 height=20 x=40 y=60 style="fill: #06F" />
<rect width=50 height=180 x=130 y=20 style="fill: #3F3" />
<!-- positions and size are defined here. -->
<!-- styles defined here are object specific, and will override the styles defined in <style> -->
<text x=65 y=90 class="label">first</text>
<text x=65 y=70 class="label">second</text>
<text x=155 y=30 class="label">third</text>
<!-- no style at all defined here. they inherit from the styles in <style> -->
</svg>
<style>
rect {
stroke: #ccc;
}
.label {
font-family:Arial, Helvetica, sans-serif;
font-size: 9px;
fill: #fff;
text-anchor: middle;
}
</style>
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.
