Published
Edited
May 21, 2021
1 star
newcolor = "purple"
import { p5pinwheel } with {newcolor as color } from "3fc63e2b05319437"
p5pinwheel
requests = `
turn geojson into a map
turn geojson into a map
game for anything!
just listening
`
import {chart as horizontalBarChart} with {surveyResults as data, myMargin as margin} from "@d3/horizontal-bar-chart"
myMargin = ({top: 30, right: 0, bottom: 10, left: 120})
md`Dependencies for notebook`
publishButton = html`<button aria-label="Publish this notebook for the first time." class="jsx-561469291 bg-transparent pointer ba br2 f6 fw6 inline-flex items-center action-button tooltipped-sw tooltipped"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" class="mr2 h1 w1"><circle cx="8" cy="8" r="7.1"></circle><path d="M1.14285 10.5286 L14.8571 10.5286 M1.14285 5.71429H14.8571 M8 1.14285C7.42857 2.09523 5.14285 4.21428 5.14285 8C5.14285 12.5714 8 14.8571 8 14.8571 M8 1.14285C8.57143 2.09523 10.8571 4.21428 10.8571 8C10.8571 12.5714 8 14.8571 8 14.8571"></path></svg>Publish…</button>`
paperclip = html`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke-width="2" aria-label="Open file attachments pane"><path d="M7.19855 2.52175L7.88131 1.79111L7.19855 2.52175ZM12.6 11.7764L13.2581 11.0234L12.6 11.7764ZM5.34191 6.76078L11.9419 12.5293L13.2581 11.0234L6.65809 5.2549L5.34191 6.76078ZM10.8958 13.6864L3.35462 6.63385L1.98852 8.09459L9.52965 15.1472L10.8958 13.6864ZM6.51578 3.25238L13.8172 10.0755L15.1828 8.61419L7.88131 1.79111L6.51578 3.25238ZM3.08395 3.55474C3.91017 2.45311 5.50967 2.31219 6.51578 3.25238L7.88131 1.79111C6.0058 0.0384695 3.02413 0.301162 1.48395 2.35474L3.08395 3.55474ZM3.35462 6.63385C2.49183 5.82695 2.37516 4.49978 3.08395 3.55474L1.48395 2.35474C0.162683 4.11642 0.380169 6.59044 1.98852 8.09459L3.35462 6.63385ZM11.993 13.6551C11.6977 13.9647 11.2082 13.9786 10.8958 13.6864L9.52965 15.1472C10.6432 16.1886 12.3878 16.1388 13.4402 15.0356L11.993 13.6551ZM11.9419 12.5293C12.2764 12.8216 12.2996 13.3337 11.993 13.6551L13.4402 15.0356C14.5328 13.8903 14.4499 12.0651 13.2581 11.0234L11.9419 12.5293Z" fill="currentColor"></path></svg>`
threedot = html`<svg viewBox="0 0 16 16" width="16" height="16" fill="currentColor" stroke="none" class="h1 w1" aria-label="Notebook actions"><circle r="2" cy="8" cx="2"></circle><circle r="2" cy="8" cx="8"></circle><circle r="2" cy="8" cx="14"></circle></svg>`
forkIcon = html`<svg width="45" height="45" viewBox="0 0 16 16" fill="currentColor" class="mr2 h1 w1"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 1.75C3.80964 1.75 3.25 2.30964 3.25 3C3.25 3.69036 3.80964 4.25 4.5 4.25C5.19036 4.25 5.75 3.69036 5.75 3C5.75 2.30964 5.19036 1.75 4.5 1.75ZM1.75 3C1.75 1.48122 2.98122 0.25 4.5 0.25C6.01878 0.25 7.25 1.48122 7.25 3C7.25 4.16599 6.52434 5.1625 5.5 5.56253V7H8.5C9.4199 7 10.1947 6.37895 10.4281 5.53327C9.44188 5.11546 8.75 4.13853 8.75 3C8.75 1.48122 9.98122 0.25 11.5 0.25C13.0188 0.25 14.25 1.48122 14.25 3C14.25 4.18168 13.5047 5.18928 12.4585 5.57835C12.1782 7.51343 10.5127 9 8.5 9H5.5V10.4375C6.52434 10.8375 7.25 11.834 7.25 13C7.25 14.5188 6.01878 15.75 4.5 15.75C2.98122 15.75 1.75 14.5188 1.75 13C1.75 11.834 2.47566 10.8375 3.5 10.4375L3.5 9V7V5.56253C2.47566 5.1625 1.75 4.16599 1.75 3ZM4.5 11.75C3.80964 11.75 3.25 12.3096 3.25 13C3.25 13.6904 3.80964 14.25 4.5 14.25C5.19036 14.25 5.75 13.6904 5.75 13C5.75 12.3096 5.19036 11.75 4.5 11.75ZM10.25 3C10.25 2.30964 10.8096 1.75 11.5 1.75C12.1904 1.75 12.75 2.30964 12.75 3C12.75 3.69036 12.1904 4.25 11.5 4.25C10.8096 4.25 10.25 3.69036 10.25 3Z"></path></svg>`
newButton = html`<button aria-haspopup="true" aria-controls="menu--5" data-cy="new-button" class="no-underline pointer inline-flex fw6 dark-gray hover-blue bg-transparent ph2 pv2 f6 bg-animate lh-f7 br2 bn" data-reach-menu-button="" type="button" id="menu-button--menu--5"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 13H6V15H4C2.89543 15 2 14.1046 2 13V3C2 1.89543 2.89543 1 4 1H10H10.4142L10.7071 1.29289L13.7071 4.29289L14 4.58579V5V7.5H12V6L10 6H9V5L9 3L4 3L4 13ZM10 11V8.5H12V11H14.5V13H12V15.5H10V13H7.5V11H10Z" fill="currentColor"></path></svg><span class="db-ns dn ml1-ns">New</span></button>`
verticalthreedot = html`<svg viewBox="0 0 8 14" width="8" height="14" fill="currentColor"><circle r="1.5" cx="4" cy="2"></circle><circle r="1.5" cx="4" cy="7"></circle><circle r="1.5" cx="4" cy="12"></circle></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.
