import {ramp} from "@mbostock/color-ramp" //this "from" uses last part of MBostock's Observables URL for this particular ramp page. needs to be published for a bit before import works on it...
ramp(t => `hsl(${t * 360}, 100%, 50%)`)
ramp(d3.interpolateLab("red","blue"))
import {multiply_this} from '@cesandoval/week-2a-introduction-to-javascript-part2/2'
import {canvas as map} from "@mbostock/interrupted-sinu-mollweide"
map
import {interval} from "@mbostock/countdown"
interval
//i
//reactive, notices import below and runs
import {i} from "@mbostock/generator-cells-functions-and-objects"
import {canvas as map2} from "@mbostock/interrupted-sinu-mollweide"
map === map2
primes = [2, 3, 5, 7, 11, 13]
mtcars = d3.csvParse(`name,mpg,cyl,disp,hp,drat,wt,qsec,vs,am,gear,carb
Mazda RX4,21,6,160,110,3.9,2.62,16.46,0,1,4,4
Mazda RX4 Wag,21,6,160,110,3.9,2.875,17.02,0,1,4,4
Datsun 710,22.8,4,108,93,3.85,2.32,18.61,1,1,4,1
Hornet 4 Drive,21.4,6,258,110,3.08,3.215,19.44,1,0,3,1
Hornet Sportabout,18.7,8,360,175,3.15,3.44,17.02,0,0,3,2
Valiant,18.1,6,225,105,2.76,3.46,20.22,1,0,3,1
Duster 360,14.3,8,360,245,3.21,3.57,15.84,0,0,3,4
Merc 240D,24.4,4,146.7,62,3.69,3.19,20,1,0,4,2
`)
d3 = require("d3@5")
md`The first prime is ${primes[0]}.`
md`The first car is a ${mtcars[0].name} with ${mtcars[0].hp} horsepower.`
d3.median(mtcars, d => d.mpg) // The median miles per gallon.
flare = d3.csv("https://gist.githubusercontent.com/mbostock/4063570/raw/11847750012dfe5351ee1eb290d2a254a67051d0/flare.csv")
aapl = require("@observablehq/aapl@0")
DOM.download(
new Blob([d3.csvFormat(flare)], {type: "text/csv"}),
"flare.csv"
)
viewof image = html`<input type=file accept="image/*">`
html`<img src="${URL.createObjectURL(image)}">`
Files
//we'll learn how to keep info private later as passwords, etc must be kept private
viewof text = html`<input type=file accept="text/* ">`
Files.text(text)
viewof binary = html`<input type=file>`
Files.buffer(binary)
data = d3.csv("https://gist.githubusercontent.com/mbostock/ddc6d50c313ebe6edb45519f43358c6c/raw/c443ed14c34c5c1b544949a546dd9d0acd05bad3/temperatures.csv")
data.map(d => +d.Year)
Promises
Promises.delay(3000, "Hello, world!")
{
let i = 0;
while (true) {
yield Promises.tick(1000, ++i);
}
}
{
let greeting = await Promises.delay(3000, "Hello, ");
return greeting + "world!";
}
yield 13
13
{
let i = 0;
while (true) {
yield Promises.delay(1000, ++i);
}
}
{
let i = 0;
while (true) {
await Promises.delay(1000);
yield ++i;
}
}
{
const div = html`<div style="transition:background 250ms linear;height:33px;">`;
yield div;
while (true) {
div.style.background = "red";
yield Promises.delay(1000, div);
div.style.background = "green";
yield Promises.delay(1000, div);
div.style.background = "blue";
yield Promises.delay(1000, div);
}
}
{
yield 1;
yield 2;
yield 3;
return "ignored"; // It’s ignored!
}
input = html`<input type=range>`
Generators.observe(next => {
// Yield the input’s initial value.
next(input.value);
// Define an event listener to yield the input’s next value.
const inputted = () => next(input.value);
// Attach the event listener.
input.addEventListener("input", inputted);
// When the generator is disposed, detach the event listener.
return () => input.removeEventListener("input", inputted);
})
Generators.input(input)
viewof value = html`<input type=range>`
width
now
viewof x = html`<input type=range min=0 max=1 step=any>`
x
viewof message = html`<input type=text placeholder="Say hello">`
message
viewof color = html`<select>
<option>red
<option>orange
<option>yellow
<option selected>green
<option>blue
<option>violet
</select>`
color
point
viewof silly = {
const element = html`<div>I am a silly view!</div>`;
element.value = "I am a silly value.";
return element;
}
silly
viewof count = {
const element = html`<div style="font-size:64px;user-select:none;">🤪</div>`;
element.value = 0;
element.onclick = () => {
++element.value;
element.dispatchEvent(new CustomEvent("input"));
};
return element;
}
count
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.