Public
Edited
Jul 7, 2024
d3.count([1, 2, 3, undefined, null, NaN])
browsers = [
{ name: "Firefox", isDeveloperEdition: undefined },
{ name: "Firefox Developer Edition", isDeveloperEdition: true },
{ name: "Safari", isDeveloperEdition: undefined },
{ name: "Safari Technology Preview", isDeveloperEdition: true },
{ name: "Chrome", isDeveloperEdition: false }
]
d3.count(browsers, (browser) => browser.isDeveloperEdition)
d3.count([1, 2, 3, undefined, null, NaN])
d3.count(["This", "won't", "work"])
d3.count(["1", "2"], (d) => +d)
d3.count(["1", "2", "3"]) // d3.count attempts to convert the items to a number
d3.min([28, 13, 4, 2, 12])
d3.min(["5", "10"]) // does not coerce
d3.min(["aablice", "aalice"]) // does not coerce
d3.min([1, 2, NaN, undefined, null]) // ignores the 'bad apple'
people = [
{name: "Mike", age: 44},
{name: "Susan", age: 33},
{name: "Julie", age: 22},
]
d3.min(people, (person) => person.age)
d3.extent([10, 20, 93, 45, 83])
d3.extent(people, (p) => p.name)
people
d3.least(people, (p1, p2) => p1.age - p2.age)
d3.least(people, (p) => -p.age) // negating inverts the order, in this case, to descending
d3.min(people, (p) => -p.age) // ⛔️ Don't make sense since `min` returns the value but `least` returns the object
people
d3.greatest(people, (p) => -p.age) // negating inverts the order, in this case, to ascending
{
const least = d3.least(people, (p) => -p.age); // inverted order
const greatest = d3.greatest(people, (p) => p.age);
return { least, greatest };
}
{
return {
leastIndex: d3.leastIndex([4, 6, 2, 8]),
greatestIndex: d3.greatestIndex([4, 6, 2, 8])
};
}
people
// Basically the same as d3.minIndex and d3.maxIndex because of the use of an accessor
{
return {
leastIndex: d3.leastIndex(people, (p) => p.name),
greatestIndex: d3.greatestIndex(people, (p) => p.name)
};
}
{
return {
leastIndex: d3.leastIndex(people, (p1, p2) => p1.age - p2.age),
greatestIndex: d3.greatestIndex(people, (p1, p2) => p1.age - p2.age)
};
}
{
return {
minIndex: d3.minIndex([4, 6, 2, 8]),
maxIndex: d3.maxIndex([4, 6, 2, 8])
};
}
// Basically the same as d3.leastIndex and d3.greatestIndex because of the use of an accessor
{
return {
minIndex: d3.minIndex(people, (p) => p.name),
maxIndex: d3.maxIndex(people, (p) => p.name)
};
}
d3.sum([1, 2, undefined, null, "Box", "7"]) // Notice the "7"
d3.sum([{ age: 1 }, { age: 2 }], (d) => d.age)
{
return {
someAreOdd: d3.some([0, 2, 5], (d) => d & 1),
isAllOdd: d3.every([1, 3, 5], (d) => d & 1)
};
}
d3.mean([5, 5, null, undefined, NaN])
d3.mean(
[
{ firstName: "John", age: 100 },
{ firstName: "Jane", age: 50 }
],
(d) => d.age
)
d3.median([12, 2, 34, 4, 5]) // if iterable's length is odd, take the middle number
d3.median([1, 2, 3, 4, 5, 6]) // if iterable's length is even, take the sum of the two middle numbers & divide by 2
An optional accessor can be specified:
d3.median(
[
{ firstName: "John", age: 100 },
{ firstName: "Jane", age: 50 },
{ firstName: "John", age: 100 }
],
(d) => d.age
)
d3.medianIndex([12, 2, 34, 4, 5])
d3.mode([1, 2, 2, 2, 3, 3])
d3.mode(
[
{ firstName: "John", age: 100 },
{ firstName: "Jane", age: 50 },
{ firstName: "John", age: 100 }
],
(d) => d.age
)
d3.cumsum([1, 2, 3, 4, 5])
d3.cumsum(
[
{ item: "Sugar", quantity: 2 },
{ item: "Milk", quantity: 4 }
],
(d) => d.quantity
)
{
const numbers = [0, 10, 30];
return {
plo: d3.quantile(numbers, 0),
ploMid: d3.quantile(numbers, 0.25),
pmid: d3.quantile(numbers, 0.5),
pmidHi: d3.quantile(numbers, 0.75),
phi: d3.quantile(numbers, 1)
};
}
{
const numbers = [0, 10, 30];
return {
plo: d3.quantileIndex(numbers, 0),
ploMid: d3.quantileIndex(numbers, 0.25),
pmid: d3.quantileIndex(numbers, 0.5),
pmidHi: d3.quantileIndex(numbers, 0.75),
phi: d3.quantileIndex(numbers, 1)
};
}
{
const sortedNumbers = [0, 10, 30];
const unsortedNumbers = [20, 30, 10];
return {
uPlo: d3.quantile(sortedNumbers, 0),
sPlo: d3.quantileSorted(unsortedNumbers, 0),
uPmid: d3.quantile(sortedNumbers, 0.5),
sPmid: d3.quantileSorted(unsortedNumbers, 0.5),
uPhi: d3.quantile(sortedNumbers, 1),
sPhi: d3.quantileSorted(unsortedNumbers, 1)
};
}
d3.rank([4, 2, 8, 6, 10])
d3.rank([20, null, 50, 0, 5])
d3.rank(
[
{ id: 33, price: 20 },
{ id: 44, price: 0 }
],
(D) => D.price
)
d3.rank([6, 8, 10, 2, 0, 2, 2])
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.
