Published
Edited
Sep 14, 2022
# DVIA_ Excercise
<!-- <svg viewBox = "0 0 100 100" xml="http://www.w3.org/2000/svg">
<circle cx="1" cy="1" r="5" />
<circle cx="2" cy="2" r="5" />
<circle cx="3" cy="3" r="5" /> -->
<!-- <svg viewBox = "0 0 100 100" xml="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="5" />
<circle cx="50" cy="50" r="5" />
<circle cx="75" cy="75" r="5" /> -->
<!-- Above plots cicles in the wrong position, re-scaled by multiplying by 3 -->
<!-- SVG's 0,0 is top left of the viewBox -->
<svg viewBox = "0 0 100 100" xml="http://www.w3.org/2000/svg">
<!-- Difference between the cartesian y coordinate and the upperlimit of the viewBox -->
<!-- <circle cx="25" cy="75" r="1.5" />
<circle cx="50" cy="50" r="1.5" />
<circle cx="75" cy="25" r="1.5" /> -->
<!-- <svg viewBox = "0 0 1000 1000" xml="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="5" />
<circle cx="200" cy="200" r="5" />
<circle cx="300" cy="300" r="5" /> -->
<!-- Original Line -->
<!-- <line x1="3" y1="3" x2="9" y2="9" stroke="black" /> -->
<!-- Multiply by 10 -->
<!-- <line x1="30" y1="30" x2="90" y2="90" stroke="black" /> -->
<!-- Convert to SVG coordinate system -->
<!-- <line x1="30" y1="70" x2="90" y2="10" stroke="black" /> -->
<!-- Off the viewBox
<rect x="120" width="10" height="10"/>
In the viewBox
<rect x="10" width="10" height="10"/>
Make Bars
<rect x="10" width="10" height="30"/>
<rect x="10" width="10" height="50"/>
<rect x="10" width="10" height="70"/> -->
Seperate Bars
<rect x="20" width="10" height="30"/>
<rect x="40" width="10" height="50"/>
<rect x="60" width="10" height="70"/>
<!-- Ground Bars ?
<rect x="-20" width="10" height="30"/>
<rect x="-40" width="10" height="50"/>
<rect x="-60" width="10" height="70"/> -->
</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.
