Published
Edited
Feb 11, 2019
Insert cell
Insert cell
Insert cell
Insert cell
html`<!DOCTYPE html>`
Insert cell
md`This is a markdown cell`
Insert cell
html`<!DOCTYPE html>`
Insert cell
Insert cell
Insert cell
html`<element>Content goes here!</element>`
Insert cell
Insert cell
html`<element />`
Insert cell
Insert cell
html`<!-- This is a comment -->`
Insert cell
Insert cell
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>
\`
`
Insert cell
Insert cell
Insert cell
html`
<html lang="en">
<!-- HEAD element containing meta information, style, and links -->
<head>
</head>
<!-- BODY element containing all document content elements -->
<body>
...
</body>
</html>
`
Insert cell
html`
<html lang="en">
<!-- HEAD element containing meta information, style, and links -->
<head>This is my first html document
</head>
<!-- BODY element containing all document content elements -->
<body>
<p>This is my first paragraph</p>
</body>
</html>
`
Insert cell
Insert cell
html`<a href="http://duspviz.mit.edu/tutorials/">DUSP Viz Tutorials</a>`
Insert cell
html`<a href="https://google.com"><This is a link to google</a>`
Insert cell
Insert cell
html`<img src="http://duspviz.mit.edu/_assets/img/tutorials.png"> />`
Insert cell
Insert cell
html`
<p>This is one paragraph.</p><p>This is a second.</p>
`
Insert cell
Insert cell
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>
`
Insert cell
Insert cell
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>
`
Insert cell
Insert cell
Insert cell
Insert cell
html`<h4 style="text-align: center;">Centered Header</h4>`
Insert cell
Insert cell
Insert cell
html`<p>I am a <i>paragraph</i> element!</p>`
Insert cell
Insert cell
html`<span style="background:yellow;">
My favorite language is <i>HTML</i>.
</span>`
Insert cell
color = "red"
Insert cell
Insert cell
html`My favorite color is <i style="background:${color};">${color}</i>.`
Insert cell
Insert cell
md`I, too, am a *paragraph* element.`
Insert cell
Insert cell
md`My favorite number is ${Math.random() * 100 | 0}.`
Insert cell
Insert cell
md`I like Markdown for prose, but ${tex`\LaTeX`} for math.`
Insert cell
md`A sparkline ${sparkline([0, 8, 3, 2, 6, 5, 1])} is a chart inline with prose.`
Insert cell
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;
}
Insert cell
Insert cell
md`The current time is ${new Date(now).toLocaleTimeString()}.`
Insert cell
Insert cell
{
const p = md`Less-angry rainbows are the *best* rainbows.`;
p.style.color = d3.interpolateRainbow(now / 2000);
return p;
}
Insert cell
Insert cell
{
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;
}
Insert cell
Insert cell
html`<svg width="128" height="128" fill="none" stroke="black">${
d3.range(8, 128, 8).map(radius => `<circle r="${radius}"></circle>`)
}</svg>`
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
{
// 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;
}
Insert cell
Insert cell
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()
Insert cell
Insert cell
tex`E = mc^2`
Insert cell
Insert cell
slider = html`<input type=range>`
Insert cell
Insert cell
slider.type
Insert cell
slider.value
Insert cell
Insert cell
viewof value = html`<input type=range>`
Insert cell
value
Insert cell
Insert cell
slider // This slider is already visible above!
Insert cell
Insert cell
Insert cell
Insert cell
simpleStatistics = require('simple-statistics')
Insert cell
simpleStatistics.standardDeviation([1, 2, 3])
Insert cell
Insert cell
moment = require('moment')
Insert cell
moment('January 2, 2018').subtract(1, 'year').year()
Insert cell
Insert cell
moment2 = require('moment@2')
Insert cell
Insert cell
Chart = require('chart.js/dist/Chart.min.js')
Insert cell
Insert cell
ganja = require('https://cdn.rawgit.com/enkimute/ganja.js/master/ganja.js')
Insert cell
Insert cell
// Only load the DSV and Selection parts of D3, and combine their exports into one object
d3CsvAndFetch = require("d3-dsv", "d3-selection")
Insert cell
Insert cell
notValid = require('not-a-real-npm-module')
Insert cell
Insert cell
Insert cell
d3test = require('d3')
Insert cell
Insert cell
scale = import('d3-scale')
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more