Maps, Infovis, Code
Published
Edited
Jun 25, 2019
2 forks
Importers
3 stars
viewof foo = helpers.labeledSlider({
value: 3,
min: 1,
max: 5,
step: 0.1,
label: "A Slider:"
})
viewof slider2 = helpers.steppedSlider({
label: "Stepped Slider:",
steps: [1,5,10,20,50]
})
viewof foo2 = helpers.labeledInput({
value: 3,
min: 1,
max: 5,
label: "An Input Box:"
})
helpers.JSONView({
foo: "bar",
baz: 0
},'⇒ ',2)
md`Color Box: ${helpers.colorBox('#ff0000')}`
function colorBox(color, options) {
options = Object.assign({},{
size: '0.8em',
offset: '-0.4em'
}, options);
return html`<span style="display: inline-block; width: ${options.size}; height: ${options.size}; background-color: ${color}; vertical-align: ${options.offset}; margin: 0 2px;"> </span>`
}
md`${tweet("999677202944987136")}`
function tweet(id, options) {
options = Object.assign({},{
cards: 'hidden',
width: 350
}, options);
const div = html`<div>`;
twttr.widgets.createTweet(id, div, options).then(() => div.dispatchEvent(new CustomEvent("load")));
return div;
}
defaultCSS = html`
[CSS style declaration]
<style>
hr {
/* make HR a little darker */
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
margin: 1em 0;
}
code {
/* make code snippets in text stand out more */
font-weight: bold;
background-color: #f0f0f0;
padding: 0.1em 0.4em;
}
svg {
background-color: #fafafa;
border: 1px solid #dddddd;
max-width: 100%; /* mobile friendly */
}
input[type=number] {
display: inline-block;
width: 4em;
}
</style>
`
helpers = ({
signature: signature,
defaultCSS: defaultCSS,
labeledSlider: labeledSlider,
steppedSlider: steppedSlider,
labeledInput: labeledInput,
JSONView: JSONView,
colorBox: colorBox
})
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.
