The avatar for @cesandoval
Carlos Sandoval Olascoaga
Big walls, cities, computing, and design.
Public
INAM5983: Design, Urban Tech and Community Participation
Edited
Jan 22, 2024
Fork of Week 1a - Introduction to HTML and Javascript
•
1 fork
Insert cell
Insert cell
Insert cell
<!DOCTYPE html>
Insert cell
Insert cell
Insert cell
<element>Content goes here!</element>
Insert cell
Insert cell
<element />
Insert cell
Insert cell
Insert cell
Insert cell
<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">
<p>I am a p</p>
...
</div>
</body>
</html>
Insert cell
Insert cell
Insert cell

<!-- HEAD element containing meta information, style, and links -->
<head>
</head>
<!-- BODY element containing all document content elements -->
<body>
...
</body>

Insert cell


<!-- 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>

Insert cell
Insert cell
<a href="https://observablehq.com/tutorials">Observable Tutorials</a>
Insert cell
Insert cell
Insert cell
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png"> />
Insert cell
Insert cell

<p>This is one paragraph.</p>
<p>This is a second.</p>

Insert cell
Insert cell

<!-- 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

<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
<h4 style="text-align: center;">Centered Header</h4>
Insert cell
Insert cell
Insert cell
<p>I am a <i>paragraph</i> element!</p>
Insert cell
Insert cell
<span style="background:yellow;">
My favorite language is <i>HTML</i>.
</span>
Insert cell
color = "red"
Insert cell
Insert cell
My favorite color is <i style="background:${color};">${color}</i>.
Insert cell
Insert cell
I, too, am a *paragraph* element.
Insert cell
Insert cell
Insert cell
My favorite number is *${Math.random() * 100 | 0}*.
Insert cell
Insert cell
Insert cell
I like Markdown for prose, but ${tex`\LaTeX`} for math.
Insert cell
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
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")
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