Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg width="800" height="500">
<line x1="50" y1="100" x2="100" y2="200" style="stroke:#000;" />
<line x1="100" y1="200" x2="300" y2="100" style="stroke:#f00;" />
<!-- line from x1,y1 to x2,y2 -->
<!-- note that ALL coordinates start with 0,0 in the top left -->
<rect width="300" height="200" x="200" y="200" style="fill:yellow; opacity: 0.5;" />
<!-- rectangle with width and heigh, starting at x,y location -->
<circle r="30" cx="300" cy="200" style="stroke:#0f0; stroke-width: 10px; fill: blue; opacity: .6;" />
<!-- circle with radius r, centered at cx, cy -->
<ellipse rx="50" ry="100" cx="300" cy="350" style="opacity:0.2;" transform="rotate(30 300 400)" />
<!-- ellipse with radii rx in x direction, ry in y direction, centered at cx,cy -->
<text x="300" y="130" style="font-family:Comic Sans MS" rotate="20">what do you see? ...</text>
<!-- text element, with anchor point located at x,y -->
<!-- the rotate attribute is a more advanced one that rotates each letter -->
<path d="M100,100 L50,0 L0,200" style="stroke:#777; fill:none" />
<!-- the path element combines may drawing types into a single description -->
<!-- L l lineto (x,y), H h horizontal lineto (x), V v vertical lineto (y) -->
<!-- Z z closepath -->
<!-- M m moveto (x,y) -->
<!-- C c curveto (x1 y1 x2 y2 x y), S s curveto (x2 y2 x y) -->
<!-- A a elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y) -->
<!-- UPPER CASE COMMANDS USE ABSOLUTE COORDINATES, lowercase use relative coordinates -->
<path d="M200,200 A 150 150 0 0 1 400,200" style="stroke:#777;fill:none" />
<!-- a different path that makes a circular arc -->
</svg>
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.
