{
const numbers = [39, 21, 1, 104, 22];
return numbers.sort(d3.ascending);
}
{
const numbers = [39, 21, 1, 104, 22];
return numbers.sort(d3.descending)
}
d3.reverse([5, 4, 3, 2, 1])
{
const numbers = [39, 21, 1, 104, 22];
return d3.shuffle(numbers);
}
d3.shuffle([1, 2, 3, 4, 5], 0, 3) // Shuffle the first three
{
const seed = 42;
const shuffleFn = d3.shuffler(d3.randomLcg(seed));
return shuffleFn([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
}
d3.sort(new Set([0, 12, 33, 11]))
d3.sort(
[
{ id: 0, value: 4 },
{ id: 1, value: 44 },
{ id: 2, value: 0 }
],
(d) => d.value
)
{
const people = [
{ name: "adebiyi", age: 21 },
{ name: "aishat", age: 22 },
{ name: "toye", age: 24 },
{ name: "adebiyi", age: 12 },
{ name: "shalewa", age: 15 }
];
return d3.sort(
people.slice(),
(a, b) => d3.ascending(a.name, b.name) || d3.ascending(a.age, b.age)
);
}
{
const people = [
{ name: "adebiyi", age: 21 },
{ name: "aishat", age: 22 },
{ name: "toye", age: 24 },
{ name: "adebiyi", age: 12 },
{ name: "shalewa", age: 15 }
];
return d3.sort(
people,
({ name }) => name,
({ age }) => age
);
}
{
const people = [
{ name: "adebiyi", age: 21 },
{ name: "aishat", age: 22 },
{ name: "toye", age: 24 },
{ name: "adebiyi", age: 12 },
{ name: "shalewa", age: 15 }
];
return d3.sort(
people,
({ age }) => -age,
({ name }) => name
);
}
{
const foods = [
{ item: "Soup", votes: 4, emoji: "🍜" },
{ item: "Cake", votes: 5, emoji: "🍰" },
{ item: "Cabbage", votes: 1, emoji: "🥬" },
{ item: "Ice Cream", votes: 4, emoji: "🍦" }
];
return foods.slice().sort((a, b) => d3.descending(a.votes, b.votes)); // vanilla JS
}
{
const foods = [
{ item: "Soup", votes: 4, emoji: "🍜" },
{ item: "Cake", votes: 5, emoji: "🍰" },
{ item: "Cabbage", votes: 1, emoji: "🥬" },
{ item: "Ice Cream", votes: 4, emoji: "🍦" }
];
return d3.sort(foods, ({ votes }) => -votes);
}
d3.autoType(["100", "67", "103", "245"]).sort(d3.ascending)
k = 8
qsNumbers = [65, 28, 59, 33, 21, 56, 22, 95, 50, 12, 90, 53, 28, 77, 39];
d3.quickselect(qsNumbers, k)
qsNumbers[k]
d3.permute([1, 2, 3, 4, 5], [3, 1, 4, 2, 0])
d3.permute(["apple", "banana", "cherry", "date", "elderberry"], [4, 3, 1, 0, 2])
{
const object = {age: 27, club: "FC Barcelona", name: "Pedri", number: 8};
const fields = ["name", "age", "club", "number"];
return d3.permute(object, fields);
}
d3.permute("abcdefghijklmnopqrstuvwxyz", [0, 4, 8, 14, 20])
{
const array = ["apple", "banana", "cherry", "date", "elderberry"];
// Shuffle the indexes...d3.range (https://observablehq.com/@d3/d3-range) will return an array
// from 0 to array.length
const shuffledIndexes = d3.shuffle(d3.range(array.length));
// Permute the original array based on the shuffled indexes
return d3.permute(array, shuffledIndexes);
}
function permuteFn(source, keys) {
return Array.from(keys, (key) => source[key]);
}
permuteFn([1, 2, 3, 4, 5], [3, 1, 4, 2, 0])
permuteFn({ age: 27, club: "FC Barcelona", name: "Pedri", number: 8 }, [
"name",
"age",
"club",
"number"
])
permuteFn("abcdefghijklmnopqrstuvwxyz", [0, 4, 8, 14, 20])
{
const array = ["apple", "banana", "cherry", "date", "elderberry"];
const shuffledIndexes = d3.shuffle(d3.range(array.length));
return permuteFn(array, shuffledIndexes);
}
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.
