md`# Day Four, 28 Aug 2020`
html`
<a href="https://hongtaoh.com/">This is my personal website</a>
`
md`## Some key points I learnt today:
- What are HTML elements: html, head, link, title, body, h1, h2, h3, p, div, span, img, ul, ol, li, em, strong, a
- \`<a href="Link here">Content here</a>\`, where *href* stands for **hypertext reference**;
- Difference between \`id\` and \`class\`: each element can only have one \`id\` and each \`id\` can be used only once. In contrast, elements can have mutiple \`class\`(seperated by space), and each \`class\` can be used for multiple times.
- Comments: \`<!-- Comments here -->\`
- **DOM** stands for *Document Object Model*, which refers to "the hierarchical structure of HTML" (p.50).
- **CSS**: *Cascading Style Sheets*. How to use CSS: Check [here](https://www.w3schools.com/html/html_css.asp).
- In CSS, a child adopts the style of the parent.
- **JavaScript**: Arrays, Objects, JSON (JavaScript Object Notation)
- **SVG**: Scalable Vector Graphics
`
svg`
<svg width="50" height="50">
<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>
`
html`
<svg width="50" height="50">
<circle cx="25" cy="25" r="22"
fill="yellow" stroke="orange" stroke-width="5"/>
`
html`
<svg width="120" height="50">
<rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>
`
d3 = require("d3@6")
html`
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="../d3.js"></script>
</head>
<body>
<script type="text/javascript">
d3.select("body").append("p").text("New paragraph!")
</script>
</body>
</html>
`
dataset = [5,10,15,20,25];
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
