somehow-circle

somehow-circle

— part of somehow —

WIP svelte infographics

_{by Spencer Kelly}

work in progress

a svelte component to draw circular infographics.

npm i somehow-circle

<script>
  import { Round, Arc, Circle, Line, Label } from 'somehow-circle'
</script>

<Round rotate="0" margin="10">
  <Arc from="-45" to="45" color="blue" width="8" />
  <Arc from="-10" to="-5" color="red" width="8" />
  <Circle radius="73" />
  <Line length="70" angle="30" />
  <label angle="32" radius="68" text="30°" color="grey" size="8" />
</Round>

a Svelte component that has two automatically-resizing scales - a round one, and a radial one. This lets you easily plot data into a pie-chart-like form, and automatically fit the scales to the data, and responsively fit the graph to the page.

the svg will resize responsively to fit your container.

work-in-progress!

See also

• somehow-input
• somehow-ticks
• somehow-calendar
• somehow-maps

MIT