Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
html`<element />`
html`<!-- This is a comment -->`
html`
\`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World HTML Document</title>
</head>
<body>
<!-- This is a comment -->
<h1>Hello World</h1>
<div id="main">
...
</div>
</body>
</html>
\`
`
html`
<html lang="en">
<!-- HEAD element containing meta information, style, and links -->
<head>
</head>
<!-- BODY element containing all document content elements -->
<body>
...
</body>
</html>
`
html`<a href="http://duspviz.mit.edu/tutorials/">DUSP Viz Tutorials</a>`
html`<img src="http://duspviz.mit.edu/_assets/img/tutorials.png"> />`
html`
<p>This is one paragraph.</p><p>This is a second.</p>
`
html`
<!-- UL defines an unordered list -->
<ul>
<li>Ham.</li><li>Cheese.</li><li>Bread.</li>
</ul>
<!-- OL defines an ordered list -->
<ol>
<li>Cheesecake.</li>
<li>Family.</li>
<li>Friends.</li>
</ol>
<!-- A Description list, useful for pairing terms with definitions-->
<dl>
<!-- term -->
<dt>Coffee</dt>
<!-- description or definition -->
<dd>Hot delicious drink.</dd>
</dl>
`
html`
<p>Span allows you to classify and style similar elements throughout a page, like <span class="example">location names</span>, <span class="example">ingredients</span>, or <span class="example">key terms</span>, inline.</p>
<div id="section2">
Div allows you to classify and separate blocks or sections of webpages.
</div>
`
html`<h4 style="text-align: center;">Centered Header</h4>`
html`<p>I am a <i>paragraph</i> element!</p>`
html`<span style="background:yellow;">
My favorite language is <i>HTML</i>.
</span>`
color = "red"
html`My favorite color is <i style="background:${color};">${color}</i>.`
md`I, too, am a *paragraph* element.`
md`My favorite number is ${Math.random() * 100 | 0}.`
md`I like Markdown for prose, but ${tex`\LaTeX`} for math.`
md`A sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} is a chart inline with prose.`
function sparkline(values, width = 64, height = 17) {
const x = d3.scaleLinear().domain([0, values.length - 1]).range([0.5, width - 0.5]);
const y = d3.scaleLinear().domain(d3.extent(values)).range([height - 0.5, 0.5]);
const context = DOM.context2d(width, height);
const line = d3.line().x((d, i) => x(i)).y(y).context(context);
context.beginPath(), line(values), context.stroke();
return context.canvas;
}
md`The current time is ${new Date(now).toLocaleTimeString()}.`
{
const p = md`Less-angry rainbows are the *best* rainbows.`;
p.style.color = d3.interpolateRainbow(now / 2000);
return p;
}
{
const context = DOM.context2d(128, 128);
for (let radius = 8; radius < 128; radius += 8) {
context.beginPath();
context.arc(0, 0, radius, 0, 2 * Math.PI);
context.stroke();
}
return context.canvas;
}
html`<svg width="128" height="128" fill="none" stroke="black">${
d3.range(8, 128, 8).map(radius => `<circle r="${radius}"></circle>`)
}</svg>`
d3 = require("d3@5")
{
// Create a square <svg> 128px by 128px.
const svg = DOM.svg(128, 128);
// Compute various radii 128, 120, 112, 104 etc.
const radii = d3.range(128, 0, -8);
// Create a sequential color scale (dark for small radii, bright for large).
const color = d3.scaleSequential(d3.interpolateViridis).domain([0, 128]);
// Use D3’s data join to create circles.
d3.select(svg)
.selectAll("circle")
.data(radii)
.enter().append("circle")
.attr("fill", radius => color(radius))
.attr("r", radius => radius);
return svg;
}
d3.select(DOM.svg(128, 128))
.call(svg => svg.selectAll("circle")
.data(d3.range(128, 0, -8))
.enter().append("circle")
.attr("fill", d3.scaleSequential(d3.interpolateViridis).domain([0, 128]))
.attr("r", d => d))
.node()
tex`E = mc^2`
slider = html`<input type=range>`
slider.type
slider.value
viewof value = html`<input type=range>`
value
slider // This slider is already visible above!
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
simpleStatistics = require('simple-statistics')
//a model for regression, etc. only need to type in the name to use the functions
simpleStatistics.standardDeviation([1, 2, 3])
moment = require('moment')
moment('January 2, 2018').subtract(1, 'year').year()
moment2 = require('moment@2')
Chart = require('chart.js/dist/Chart.min.js')
ganja = require('https://cdn.rawgit.com/enkimute/ganja.js/master/ganja.js')
// Only load the DSV and Selection parts of D3, and combine their exports into one object
d3CsvAndFetch = require("d3-dsv", "d3-selection")
notValid = require('not-a-real-npm-module')
d3test = require('d3')
scale = import('d3-scale')
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.
