Dr. Tanner is a research professor at the University of Tennessee working towards making data science accessible using AI tools.
Public
Edited
Sep 12, 2023
Chart({ width: 800 })
Chart({ width: 600 })
Chart({ width: 200 })
Chart()
function Chart({
width=400,
height=40,
border=3,
radius=3,
bordercolor='#565656',
background='#e8e8e8',
foreground='#949494',
}={}) {
return htl.html`
<svg width=${width} height=${height}>${htl.svg`
<rect x="${X(0)}" y="${Y(0)}" width=${X(1)-X(0)} height=${Y(1)-Y(0)}
fill=${bordercolor}
/>
<rect
x=${border}
y=${border}
width=${X(1)-border*2}
height=${Y(1)-border*2}
fill=${background}
/>
<circle
cx=${X(1/16)}
cy=${Y(1/2)}
r=${radius}
fill=${foreground}
/>
<circle
cx=${X(1/16+1/32)}
cy=${Y(1/2)}
r=${radius}
fill=${foreground}
/>
<circle
cx=${X(1/16+2/32)}
cy=${Y(1/2)}
r=${radius}
fill=${foreground}
/>
<rect
x=${X(1/6)}
y=${Y(1/2-1/3)}
width=${X(8/9-1/6)}
height=${Y(2/3)}
fill=white
/>
<circle
cx=${X(1/6+1/16)}
cy=${Y(1/2)}
r=${2*radius}
fill=${foreground}
/>
<circle
cx=${X(1/6+1/16)}
cy=${Y(1/2)}
r=${radius}
fill=white
/>
<rect
x=${X(1/6+1/16)}
y=${Y(1/2-1/32)}
width=${2*radius}
height=${Y(2/32)}
fill=white
/>
<rect
x=${X(8/9+1/18-1/50)}
y=${Y(1/2-1/8-1/8/2)}
width=${X(2/50)}
height=${Y(1/8/2/2)}
fill=${foreground}
/>
<rect
x=${X(8/9+1/18-1/50)}
y=${Y(1/2+0/8-1/8/2)}
width=${X(2/50)}
height=${Y(1/8/2/2)}
fill=${foreground}
/>
<rect
x=${X(8/9+1/18-1/50)}
y=${Y(1/2+1/8-1/8/2)}
width=${X(2/50)}
height=${Y(1/8/2/2)}
fill=${foreground}
/>
`}</svg>
`;
function X(r) {
return r * width;
}
function Y(r) {
return r * height;
}
}
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.
