Published
Edited
Dec 28, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
rect_template = html`
<script type="text/x-template" id="svg-rect">
<rect
:x="x"
:y="y"
:width="width"
:height="height"
:rx="rx"
:ry="ry"
:pathLength="pathLength"
:fill="fill"
:stroke="stroke"
:opacity="opacity"
:stroke-width="strokeWidth"
:stroke-opacity="strokeOpacity"
:fill-opacity="fillOpacity"
:stroke-dasharray="strokeDasharray"
></rect>
</script>`
Insert cell
picker_template = html`
<script type="text/x-template" id="picker-template">
<div>
<template>
<div v-for="attribute in Object.keys(attributes)">
<div v-if="attributes[attribute].min !== undefined">
<label>{{ attributes[attribute].label }}</label>
<input type="range" v-model="attributes[attribute].value" :min="attributes[attribute].min" :max="attributes[attribute].max" :step="attributes[attribute].step">{{ attributes[attribute].value }}
</div>
</div>
</template>
</div>
</script>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more