function addingNumbers(number1, number2){
let number3 = number1 + number2
return number3
}
function multiply(p1, p2) {
let p3 = p1*p2;
return p3;
// write your code here, -- don't delete the semicolon ->;
}
multiply(2,3);
{ 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 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 => word.endsWith("t"));
return result
}
{ const words = ['business', 'profit', 'quarter', 'market', 'funding', 'audience'];
return words.slice(1,3).concat(words.slice(4,5));
}
{
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 = Map()
athletesByNation = d3.group(athletes, d => d.nation)
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(athletes, d => d.earnings)
d3.median([0, 1, 2, 5])
d3.variance(olympic_athletes, d => d.height)
d3.variance(athletes, d => d.earnings)
d3.deviation(olympic_athletes, d => d.height)
d3.quantile(olympic_athletes, 0.05, d => d.height)
d3.rank([23, 2, -1, 4])
d3.rank(athletes, d => d.earnings)
values1 = distribution("Uniform") // 1000 values distributed with d3.randomUniform
draw_buckets(bin1, values1)
ViewingActivity.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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")
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.
