Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
<svg width="500" height="200">
<path d="M 50,50 C ${point1},${height} ${point2},${height} 250,50" style="fill: none; stroke: black;"></path>
<circle cx=${point1} cy=${height} r="2"></circle>
<circle cx=${point2} cy=${height} r="2"></circle>
</svg>
<svg width="500" height="200">
<g transform="translate(50,100)">
<line x1="0" y1="0" x2="300" y2="0" style="stroke: #ccc"></line>
<path d="M 0,-20 C 100,-1 270,-1 300,-20 L 300,20 C 270,1 100,1 0,20 Z" style="fill: steelblue; stroke: black; opacity: 0.5"></path>
</g>
</svg>
<svg width="500" height="200">
<g transform="translate(${translateX},${translateY}), rotate(${rotate})">
<line x1="0" y1="0" x2="300" y2="0" style="stroke: #ccc"></line>
<path d="
M ${lineStartX},-${startHalfWidth}
C ${leftControlPointX},-${innerControlPointHalfWidth} ${rightControlPointX},-${innerControlPointHalfWidth} ${lineLengthX},-${endHalfWidth}
L ${lineLengthX},${endHalfWidth}
C ${rightControlPointX},${innerControlPointHalfWidth} ${leftControlPointX},${innerControlPointHalfWidth} ${lineStartX},${startHalfWidth}
Z"
style="fill: steelblue; stroke: black; opacity: 0.5">
</path>
</g>
</svg>
lineStartX = 0
lineLengthX = 300
startHalfWidth = 20
endHalfWidth = 10
innerControlPointHalfWidth = 1
leftControlPointX = 50
rightControlPointX = 270
translateX = 50
translateY = 100
rotate = 20
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.
