The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Learn Just Enough JavaScript: Python Users
function addingNumbers(number1, number2){
let number3 = number1 + number2
return number3
}
function multiply(p1, p2) {
// write your code here, -- don't delete the semicolon ->;
}
{ const arrayOfNums = [2, 4, 6, 8];
// pass a function that adds 12 to the array number
const map = arrayOfNums.map(x => x + 12);
return map
}
{ const oddNums = [1, 3, 5, 7];
// create a function that makes each number even
const evenNums = oddNums.map(// write your code here);
return evenNums
}
{ const words = ['business', 'profit', 'quarter', 'market', 'funding', 'audience'];
const result = words.filter(word => word.length > 4);
return result
}
{ const words = ['business', 'profit', 'quarter', 'market', 'funding', 'audience'];
const result = words.filter(word => // write your code here);
return result
}
{ const words = ['business', 'profit', 'quarter', 'market', 'funding', 'audience'];
return // write your slice function here and don't delete the semicolon at the end ->;
}
{
const arrayA = ['a', 'b', 'c'];
const arrayB = ['d', 'e', 'f'];
const arrayC = arrayA.concat(arrayB);
return arrayC
}
{
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
return iterator;
}
{
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
return iterator;
}
athletesBySport.get("Soccer")
athletesByNation = // write your code here
d3.rollup(athletes, v => v.length, d => d.sport)
d3.rollup(athletes, v => d3.sum(v, d => d.earnings), d => d.sport)
d3.groupSort(athletes, g => d3.median(g, d => d.earnings), d => d.earnings)
d3.groupSort(athletes, g => -d3.median(g, d => d.earnings), d => d.earnings)
index = d3.index(athletes, d => d.name)
facts = [
{about: "Neymar", fact: "Neymar is Neymar da Silva Santos Júnior"},
{about: "Roger Federer", fact: "Federer has won 20 Grand Slam men's singles titles"},
{about: "Megan Rapinoe", fact: "Rapinoe was named The Best FIFA Women's Player in 2019"}
]
facts.map(({about: name, fact}) => ({fact, name, ...index.get(name)}))
d3.merge([[1], [2, 3]])
flights = [
{airline: "Icelandair", price: 1621, stops: 3},
{airline: "Multiple airlines", price: undefined, stops: 2},
{airline: "Air France", price: 1948, stops: 0},
{airline: "WestJet", price: undefined, stops: 1},
{airline: "Air France", price: 1951, stops: 1},
{airline: "French Bee", price: 1780, stops: 1}
]
d3.count(flights, d => d.price)
d3.sum([1, 2, 3, -0.5])
olympic_athletes = d3.csv("https://raw.githubusercontent.com/flother/rio2016/master/athletes.csv", d3.autoType)
d3.mean(olympic_athletes, d => d.height)
d3.mean(// add your code here)
d3.median([0, 1, 2, 5])
d3.variance(olympic_athletes, d => d.height)
d3.variance(// add your code here)
d3.deviation(olympic_athletes, d => d.height)
d3.quantile(olympic_athletes, 0.05, d => d.height)
d3.rank([23, 2, -1, 4])
d3.rank(// add your code here)
values1 = distribution("Uniform") // 1000 values distributed with d3.randomUniform
draw_buckets(bin1, values1)
data = d3.csv("https://data.seattle.gov/api/views/76t5-zqzr/rows.csv")
data
import { SummaryTable } from "@observablehq/summary-table"
import { compareCode } from '@ballingt/comparecode'
bandcampSales1 = FileAttachment("1000000-bandcamp-sales-1.parquet")
max = 18
function distribution(label) {
return select_distribution(label).value
}
function select_distribution(
label,
description = "Random distribution",
length = 1000
) {
const form = html`<form>${randomDistributions.map(
(o, i) =>
`<label style="display: inline-block; margin: 5px 10px 3px 0; font-size: 0.85em;"><input name=radio type=radio value=${i}${
o.label === label ? " checked" : ""
}>${o.label}</label>`
)}
${
description
? `<div style="font-size: 0.85rem; font-style: italic;">${description}</div>`
: ""
}</form>`;
form.oninput = () => {
form.value = Float32Array.from(
{ length },
randomDistributions[+form.radio.value].random
);
};
form.onchange = () => {
// Safari…
form.value = form.radio.value;
form.dispatchEvent(new CustomEvent("input"));
};
form.oninput();
return form;
}
randomDistributions = {
const r20 = d3.randomNormal(max * 0.3, 2),
r21 = d3.randomNormal(max * 0.75, 1),
r4 = d3.randomExponential(0.3);
return [
{ label: "Uniform", random: d3.randomUniform(0.5, max - 0.3) },
{ label: "Normal", random: d3.randomNormal(max / 2, (1.4 * max) / 18) },
{ label: "Two blobs", random: () => (Math.random() > 0.3 ? r20() : r21()) },
{ label: "Skewed right", random: d3.randomLogNormal() },
{ label: "Skewed left", random: () => 18 - r4() }
];
}
function draw_values(svg, values) {
// We sort the data for meaningful transitions.
const current = values.slice().sort();
const prev = (svg && svg.values) || current;
svg.values = current;
d3.select(svg)
.selectAll("circle")
.data(current)
.join("circle")
.attr("r", 2)
.attr("stroke", "#588")
.attr("fill", "lightblue")
.attr("fill-opacity", 0.3)
.attr("cx", (_, i) => x(prev[i]))
.attr("cy", (_, i) => y(i))
.transition()
.duration(500)
.attr("cx", x);
return svg;
}
function draw_buckets(bin, values) {
const svg = this || DOM.svg(width, 100);
const buckets = bin(values);
const binColor = d3
.scaleThreshold()
.domain(buckets.map(d => d.x0))
.range(colors);
d3.select(svg)
.selectAll("rect")
.data(buckets)
.join("rect")
.attr("y", d => 10)
.attr("height", 100 - 2 * 10)
.attr("x", d => (x(d.x0) + 1) | 0)
.attr("width", d => (x(d.x1) | 0) - (x(d.x0) | 0) - 2)
.attr("stroke", d => binColor(d.x0))
.attr("stroke-width", 1)
.attr("stroke-dasharray", d => (d.length === 0 ? "1 5" : null))
.attr("fill", "none");
draw_values(svg, values);
d3.select(svg)
.selectAll("circle")
.attr("fill", binColor)
.attr("stroke", binColor);
d3.select(svg)
.selectAll("text")
.data(buckets.filter(d => d.length > 0))
.join("text")
.attr("x", d => (x(d.x0) + 3) | 0)
.attr("y", 86)
.attr("fill", "black")
.attr("font-size", 9)
.text(d =>
x(d.x1) - x(d.x0) < 50
? d.length
: d.length > 1
? `${d.length} items`
: d.length === 1
? "1 item"
: "empty bin"
);
return svg;
}
y = {
const frac = x => x - (x | 0);
return i => 50 + 25 * frac(952 * Math.sin((i + 0.5) * 876));
}
x = d3.scaleLinear()
.domain([0, max])
.range([30, width - 30])
.clamp(false)
bin1 = d3.bin()
function draw_histogram_from_buckets(buckets, x, opts = {}) {
const width = opts.width || 300,
height = opts.height || 200,
margin = opts.margin || { top: 20, right: 20, bottom: 30, left: 40 },
svg = d3.select(DOM.svg(width, height)),
maxBins = d3.max(buckets, d => d.length),
data = buckets.flat(),
count = data.length,
y = d3
.scaleLinear()
.domain([0, maxBins])
.nice()
.range([height - margin.bottom, margin.top]),
frequency = opts.relative
? d3
.scaleLinear()
.domain([0, maxBins / count])
.nice()
.range([height - margin.bottom, margin.top])
: y,
xAxis = g =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g =>
g
.append("text")
.attr("x", width - margin.right)
.attr("y", -4)
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "end")
.text(opts.xText)
);
const binColor = d3
.scaleThreshold()
.domain(buckets.map(d => d.x0))
.range(colors);
svg
.append("g")
.selectAll("rect")
.data(buckets)
.join("rect")
.attr("fill", opts.fill || (d => binColor(d.x0)))
.attr("x", d => x(d.x0) + 1)
.attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1))
.attr("y", d => y(d.length))
.attr("height", d => y(0) - y(d.length));
svg.append("g").call(xAxis);
if (opts.title)
svg
.append("g")
.append("text")
.text(opts.title)
.style("fill", "#000")
.attr("font-weight", "bold")
.style("font-size", 14)
.style("text-anchor", "end")
.attr("x", width - 30)
.attr("y", 10);
const labels = svg
.append("g")
.selectAll("text")
.data(buckets.filter(d => d.length > 0))
.join("text")
.attr("x", d => ((x(d.x0) + x(d.x1)) / 2) | 0)
.attr("y", d => y(d.length) - 2)
.style("fill", "black")
.style("font-size", 10)
.style("text-anchor", "middle");
if (opts.relative) {
const format = d3.format(".1%");
labels.text(d => format(d.length / count));
} else
labels.text(d =>
x(d.x1) - x(d.x0) < 50
? d.length
: d.length > 1
? `${d.length} items`
: d.length === 1
? "1 item"
: "empty bucket"
);
return svg.node();
}
colors = ["black"]
.concat(d3.schemeCategory10)
.concat(d3.schemePaired)
.concat(d3.schemePastel1)
.concat(d3.schemePastel2)
// Require the d3 library
d3 = require("d3")
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.