31:T405,viewof objectCollection2 = view`

Title

Scales

${[ "...", { 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() } ]}

${[ "...", { 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() } ]}

`32:T43c,md`### 6. Formatting and parsing local numbers and dates | Function | Type | Method | |----------|--------|-------------------------------------------------------------------------------------| | format | number | [(123.456789).toLocaleString()](https://observablehq.com/@mbostock/number-formatting) | | format | date | [date.toLocaleString("de-DE", { day: "numeric", month: "numeric", year: "numeric" })](https://observablehq.com/@mbostock/date-formatting) | | parse | number | [(after import:) new NumberParser("de").parse("100.000,3")](https://observablehq.com/@mbostock/localized-number-parsing) | | parse | date | [d3.utcParse("%d.%m.%Y")("10.2.2010")](https://github.com/d3/d3-time-format) ~~~js import {NumberParser} from "@mbostock/localized-number-parsing" ~~~ For date formatting, see also - https://github.com/d3/d3-time-format - or https://bl.ocks.org/zanarmstrong/ca0adb7e426c12c06a95 `33:T648,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`

${Array.from({ length: stepsTotal }, (_, i) => i + 1).map((ele) => ele <= step ? htl.html.fragment`${ele}` : htl.html.fragment`${ele}` )} ${titleHTML}

`; }34:[] 2f:{"title":"Formatting in Observable","cells":[{"id":0,"value":"md`# Formatting in Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"toc()","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`## Links\n- https://observablehq.com/@tomlarkworthy/view\n- https://observablehq.com/@makio135/thumbnail-generator\n- https://observablehq.com/@bumbeishvili/input-groups\n- https://observablehq.com/@saneef/feather-icons\n- https://observablehq.com/@observablehq/introduction-to-data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`### 1. Colored headers\n\n~~~js\n import {heading} from '@ee2dev/formatting-in-observable'\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"heading(\"Load File 🧐 check input data\", 2, 5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"heading(\"Load File 🧐 check input data\", 2, 10, \"blue\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"heading(\"Load File 🧐 check input data\", 7, 15, \"red\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"heading(\"Load File 🧐 check input data\", 7, 15, \"brown\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":367,"value":"heading(\"Load File 🧐 check input data\", 7, 15, \"purple\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`### 2. Displaying Unicode letters\n\n✔ ➜ \\u26D4`","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"md`### 3. Multiple Input elements\n~~~js\n import {view} from '@tomlarkworthy/view'\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"// see https://observablehq.com/@tomlarkworthy/view\nviewof composite = view`

${[\n \"r1\",\n Inputs.range([0, 10], { value: 0, label: \"Secret number:\" })\n ]}

${[\n \"r2\",\n Inputs.range([0, 3], { value: 1, label: \"Another magic number:\" })\n ]}

${[\n \"text\",\n Inputs.text({\n label: \"Enter some text\"\n })\n ]}

\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"viewof toggle = Inputs.toggle({label: \"On / Off\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"viewof objectCollection = view`${[\n \"...\",\n {\n number: Inputs.range([0, 10], { value: 0, label: \"Secret number1:\" }),\n number2: Inputs.range([0, 10], { value: 0, label: \"Secret2:\" }),\n number3: Inputs.range([0, 10], {\n value: 0,\n label: \"Number3 :\"\n }),\n text: Inputs.text()\n }\n]}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"composite","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`### 4. Range slider\n\n~~~js\n import {rangeSlider} from '@mootari/range-slider'\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof year = rangeSlider({\n title: \"year\",\n description: \"Filter to a range\",\n min: 1990,\n max: 2020,\n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":440,"value":"year","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"viewof range = Inputs.range([0, 100], {label: \"Amount\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`### 5. Color annotation in markdown\n\n~~~js\n import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"In the chart below, we can see ${textcolor('AMZN', d3.schemeTableau10[1])} overtaking ${textcolor('GOOG', d3.schemeTableau10[2])} between 2016 and 2018.","pinned":true,"hidden":false,"mode":"md"},{"id":240,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"#### Examples","pinned":false,"hidden":false,"mode":"md"},{"id":285,"value":"(1233647852.456789).toLocaleString() // format a number","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"new Date(2018, 11, 1, 9, 27, 9, 247).toLocaleString(\"de-DE\", {\n day: \"numeric\",\n month: \"numeric\",\n year: \"numeric\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"new Date(2018, 11, 1, 9, 27, 9, 247).toLocaleString(\"fr-FR\", {\n day: \"numeric\",\n month: \"numeric\",\n year: \"numeric\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"new Date(2018, 11, 1, 9, 27, 9, 247).toLocaleString(\"en-US\", {\n day: \"numeric\",\n month: \"numeric\",\n year: \"numeric\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"new NumberParser(\"de\").parse(\"100.000,3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"d3.utcParse(\"%d.%m.%Y\")(\"10.2.2010\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"### 7. Crossfilter Input\n\n~~~js\nimport {filters} from \"@gampleman/crossfilter-input\"\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"### 8. Geographics links","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"- https://app.placemark.io/converter, (https://www.placemark.io/post/introducing-our-free-map-file-converter)\n- https://observablehq.com/@neocartocnrs/geoverview","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"### 9. Multiple Plots","pinned":false,"hidden":false,"mode":"md"},{"id":409,"value":"viewof orientation = Inputs.radio([\"vertical\", \"horizontal\"], {\n label: \"Select one\",\n value: \"vertical\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"orientation === \"vertical\"\n ? html`

${plot1()}${plot2()}

`\n : html`

${plot1()}${plot2()}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"html`${plot1()}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"function plot1() {\n return Plot.plot({\n marks: [Plot.areaY(aapl, { x: \"Date\", y: \"Close\" }), Plot.ruleY([0])]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"plot2()","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"function plot2() {\n return Plot.plot({\n marks: [Plot.dot(cars, { x: \"power (hp)\", y: \"economy (mpg)\" })]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"//html`${plot1}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Other ressources`","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"import { toc } from \"@mbostock/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"// import { toc } from \"@bryangingechen/toc\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"import { NumberParser } from \"@mbostock/localized-number-parsing\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}