The avatar for @emfielduva
Eric Field
Building and Using Tools to See. UVA Architecture + Data Science. IT Director. Instructor.
Public
misc
Edited
Apr 19, 2023
misc
getting values from inputsGet nearest data neighborsPolygons by [lon,lat] sets on Map (geo)Filter data on array of multiple valuesgeoContainsFilled Arc Polygon BandsAdd text labels to Fixed location Network GraphScale Date / Time on a lineForce Directed clustering along a pathD3 join, with updating dataSVG distance along path / curveCurves / distance color gradient
"Thickened" line with SVG filled Bezier
Title from Variable DropdownMousover change textStacked dropdown filter
Insert cell
Insert cell
Insert cell
<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>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<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>
Insert cell
Insert cell
Insert cell
<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>
Insert cell
lineStartX = 0
Insert cell
lineLengthX = 300
Insert cell
startHalfWidth = 20
Insert cell
endHalfWidth = 10
Insert cell
innerControlPointHalfWidth = 1
Insert cell
leftControlPointX = 50
Insert cell
rightControlPointX = 270
Insert cell
translateX = 50
Insert cell
translateY = 100
Insert cell
rotate = 20
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more