Formatting in Observable
toc()
heading("<strong>Load File</strong> 🧐 check input data", 2, 5)
heading("<strong>Load File</strong> 🧐 check input data", 2, 10, "blue")
heading("<strong>Load File</strong> 🧐 check input data", 7, 15, "red")
heading("<strong>Load File</strong> 🧐 check input data", 7, 15, "brown")
heading("<strong>Load File</strong> 🧐 check input data", 7, 15, "purple")
// see https://observablehq.com/@tomlarkworthy/view
viewof composite = view`<div style="display: flex; justify-content:space-between; ">
<div style="display: flex-column;">
<div>${[
"r1",
Inputs.range([0, 10], { value: 0, label: "Secret number:" })
]}</div>
<div>${[
"r2",
Inputs.range([0, 3], { value: 1, label: "Another magic number:" })
]}</div>
<div>${[
"text",
Inputs.text({
label: "Enter some text"
})
]}</div>
</div>
<img width="150"src="https://media.giphy.com/media/2vobTwCkFg88ZUnilt/giphy-downsized.gif"></img>
</div>
`
viewof objectCollection2 = view`<div style="text-align:center;font-size:30px">Title</div><div style="display: grid; grid-template-columns: repeat(2, 1fr);">
<div><h4>Scales</h4>${[
"...",
{
number: Inputs.range([0, 10], { value: 0, label: "Secret number1:" }),
number2: Inputs.toggle({ label: "On / Off" }),
number3: Inputs.range([0, 10], {
value: 0,
label: "Number3 :"
}),
text: Inputs.text()
}
]}</div>
<div>${[
"...",
{
number: Inputs.range([0, 10], { value: 0, label: "Secret number1:" }),
number2: Inputs.range([0, 10], { value: 0, label: "Secret2:" }),
number3: Inputs.range([0, 10], {
value: 0,
label: "Number3 :"
}),
text: Inputs.text()
}
]}</div>
<div>${[
"...",
{
number: Inputs.range([0, 10], { value: 0, label: "Secret number1:" }),
number2: Inputs.range([0, 10], { value: 0, label: "Secret2:" }),
number3: Inputs.range([0, 10], {
value: 0,
label: "Number3 :"
}),
text: Inputs.text()
}
]}</div>
</div>`
viewof toggle = Inputs.toggle({label: "On / Off"})
viewof objectCollection = view`${[
"...",
{
number: Inputs.range([0, 10], { value: 0, label: "Secret number1:" }),
number2: Inputs.range([0, 10], { value: 0, label: "Secret2:" }),
number3: Inputs.range([0, 10], {
value: 0,
label: "Number3 :"
}),
text: Inputs.text()
}
]}`
composite
viewof year = rangeSlider({
title: "year",
description: "Filter to a range",
min: 1990,
max: 2020,
step: 1
})
year
viewof range = Inputs.range([0, 100], {label: "Amount"})
In the chart below, we can see ${textcolor('AMZN', d3.schemeTableau10[1])} overtaking ${textcolor('GOOG', d3.schemeTableau10[2])} between 2016 and 2018.
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
(1233647852.456789).toLocaleString() // format a number
new Date(2018, 11, 1, 9, 27, 9, 247).toLocaleString("de-DE", {
day: "numeric",
month: "numeric",
year: "numeric"
})
new Date(2018, 11, 1, 9, 27, 9, 247).toLocaleString("fr-FR", {
day: "numeric",
month: "numeric",
year: "numeric"
})
new Date(2018, 11, 1, 9, 27, 9, 247).toLocaleString("en-US", {
day: "numeric",
month: "numeric",
year: "numeric"
})
new NumberParser("de").parse("100.000,3")
d3.utcParse("%d.%m.%Y")("10.2.2010")
orientation === "vertical"
? html`<div>${plot1()}${plot2()}</div>`
: html`<div style="display: flex">${plot1()}${plot2()}</div>`
html`${plot1()}`
function plot1() {
return Plot.plot({
marks: [Plot.areaY(aapl, { x: "Date", y: "Close" }), Plot.ruleY([0])]
});
}
plot2()
function plot2() {
return Plot.plot({
marks: [Plot.dot(cars, { x: "power (hp)", y: "economy (mpg)" })]
});
}
//html`${plot1}`
function heading(
titleHTML = "Load data",
step = 1,
stepsTotal = 10,
color = "green"
) {
const containerStyle = "h-container-" + color;
const squareStyle = "h-square h-completed-" + color;
return html`
<style>
.h-container-green {
background-color: #C1E1C1;
}
.h-container-blue {
background-color: #d8eff3;
}
.h-container-red {
background-color: #ffdacc;
}
.h-container-brown {
background-color: #f5deb3;
}
.h-container-purple {
background-color: #e6e6fa;
}
.h-square {
padding-left: 5px;
padding-right: 5px;
text-align: center;
border: 1px outset;
}
.h-completed-green {
border-color: darkgreen;
background-color: green;
color: white;
}
.h-completed-blue {
border-color: darkblue;
background-color: steelblue;
color: white;
}
.h-completed-red {
border-color: darkred;
background-color: #b22222;
color: white;
}
.h-completed-brown {
border-color: black;
background-color: #a0522d;
color: white;
}
.h-completed-purple {
border-color: black;
background-color: #6a5acd;
color: white;
}
.h-not-completed {
border: 1px outset darkgrey;
background-color: white;
color: grey;
}
</style>
<div class=${containerStyle} style="padding:5px;border-radius:5px;">
${Array.from({ length: stepsTotal }, (_, i) => i + 1).map((ele) =>
ele <= step
? htl.html.fragment`<span class=${squareStyle}>${ele}</span>`
: htl.html.fragment`<span class="h-square h-not-completed">${ele}</span>`
)}
<span style="padding-left:15px">${titleHTML}</div>
</span>`;
}
import { view } from "@tomlarkworthy/view"
import { toc } from "@mbostock/toc"
// import { toc } from "@bryangingechen/toc"
import { rangeSlider } from "@mootari/range-slider"
import { textcolor } from "@observablehq/text-color-annotations-in-markdown"
import { NumberParser } from "@mbostock/localized-number-parsing"
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.
