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"
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.