data
nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
evens = nums.filter(currentElement => currentElement % 2 === 0)
nums.filter(function(currentElement) {
return currentElement % 2 === 0;
})
{
const evens = [];
for (const num of nums) {
if (num % 2 === 0) {
evens.push(num);
}
}
return evens;
}
data.filter(currentElement => currentElement.type === 'H')
data.filter(currentElement => currentElement.calories < 100 && currentElement.sodium === 0)
data.filter(d => d.fat === 0 && d.sugars === 0)
favoriteBrands = new Set(['N', 'K', 'G'])
data.filter(d => favoriteBrands.has(d.mfr))
// write answer here
// write answer here
nums
nums.map(currentElement => currentElement * 2)
words = ['I', 'love', 'information', 'visualization']
wordLengths = words.map(currentElement => currentElement.length)
{
const wordLengths = [];
for (const word of words) {
wordLengths.push(word.length)
}
return wordLengths;
}
data.map(d => d.sodium)
abbreviationToBrandName = ({
'A': 'American Home Food Products',
'G': 'General Mills',
'K': 'Kelloggs',
'N': 'Nabisco',
'P': 'Post',
'Q': 'Quaker Oats',
'R': 'Ralston Purina'
})
cleanedData = data.map(currentElement => ({
name: currentElement.name,
rating: currentElement.rating,
type: currentElement.type === "H" ? "hot" : "cold",
shelf: currentElement.shelf,
brand: abbreviationToBrandName[currentElement.mfr]
}))
data.map(({name, rating, type, shelf, mfr}) => ({
name,
rating,
type: type === "H" ? "hot" : "cold",
shelf,
brand: abbreviationToBrandName[mfr]
}))
// write answer here
// write answer here
nums
nums.reduce((total, currentValue) => {
// update the accumulated value and return it
total += currentValue;
return total;
}, 0) // This 0 is the initial value for total. See what happens when you change it!
cleanedData.reduce((accumulator, currentValue) => {
/*
Get the count of cereals that we have seen for this brand so far.
If this is the first time we are seeing this brand, then
accumulator[currentValue.brand] will return undefined,
so count is given the default value of 0.
*/
const count = accumulator[currentValue.brand] ?? 0;
// update the count for this brand
accumulator[currentValue.brand] = count + 1;
return accumulator;
}, {}); // an empty object, {}, is our initial value
{
const accumulator = {};
for (const currentValue of cleanedData) {
const count = accumulator[currentValue.brand] ?? 0;
accumulator[currentValue.brand] = count + 1;
}
return accumulator;
}
unsortedNums = [9, 4, 5, 7, 2, 1, 10, 3, 8, 6]
// If you change toSorted to sort and rerun this cell,
// then notice what happens when you run the cell below
unsortedNums.toSorted((a, b) => d3.ascending(a, b))
unsortedNums
unsortedNums.toSorted(d3.descending)
cleanedData
.toSorted((a, b) => d3.descending(a.rating, b.rating))
.slice(0, 5) // get elements starting with index 0 and stopping before index 5
cleanedData
// only get Kelloggs cereals
.filter(d => d.brand === 'Kelloggs')
// sort in ascending order by rating
.sort((a, b) => d3.ascending(a.rating, b.rating))
// take the first three
.slice(0, 3)
// get the name property
.map(d => d.name)
// write answer here
// write answer here
d3.min(data, d => d.rating)
d3.min(data, function (d) {
return d.rating;
})
d3.min(data.map(d => d.rating))
d3.max(data, d => d.rating)
d3.extent(data, d => d.rating)
d3.sum(data, d => d.protein)
d3.median(data, d => d.calories)
d3.mean(data, d => d.calories)
ages = new Map([
['Abby', 30],
['Bob', 35],
['Chrissy', 25]
])
d3.max(ages, d => d[1])
d3.max(ages, ([name, age]) => age)
d3.max(ages.values())
// write answer here
// write answer here
// write answer here
// write answer here
brandToCereals = d3.group(cleanedData, cereal => cereal.brand)
brandToCereals.get('Nabisco')
{
const brandToCereals = new Map();
for (const currentValue of cleanedData) {
if (!brandToCereals.has(currentValue.brand)) {
brandToCereals.set(currentValue.brand, []);
}
brandToCereals.get(currentValue.brand).push(currentValue);
}
return brandToCereals;
}
d3.group(
cleanedData,
cereal => cereal.brand,
cereal => cereal.shelf
)
// write answer here
// write answer here
d3.rollup(cleanedData, group => group, cereal => cereal.brand)
d3.rollup(
// The first argument is our data.
cleanedData,
// The second argument is a reducing function that gets called on each group.
// The input to this function is an array of elements from our data that
// all belong to the same group. The output of this function is what is
// used as the values in the map.
//
// In this case, group is an array of all of the cereals that have the same brand.
// If we want to get the number of cereals for this brand, then we can return
// the length of the group.
group => group.length,
// The third argument is a key function that gets called on each element
// in our data array. The input to this function is a single data element.
// The output of this function is the key for the group that we want this
// element to be in.
//
// Since we want to group the cereals by their brand, we make this function
// return the brand for a cereal.
cereal => cereal.brand
)
d3.rollup(
cleanedData,
group => d3.mean(group, cereal => cereal.rating),
cereal => cereal.brand
)
d3.rollup(
cleanedData,
group => d3.extent(group, cereal => cereal.rating),
cereal => cereal.brand
)
d3.rollup(
cleanedData,
// group is all cereals that have the same brand and are on the same shelf
group => group.length,
// first group by brand
cereal => cereal.brand,
// then group by shelf
cereal => cereal.shelf
)
function myRollup(data, reduceFunc, keyFunc) {
// Create an empty map to store the output in.
const map = new Map();
// Step 1: Group the data according to keyFunc.
// Loop over the rows in the dataset.
// row is one element from the data array.
for (const row of data) {
// Call keyFunc to determine the key of the group
// that this element belongs in.
const key = keyFunc(row);
// Get the group for this key.
const group = map.get(key);
if (group === undefined) {
// If this group does not exist, then this row is the first
// element in this group. We need to create a new array for
// the group that contains this element.
map.set(key, [row]);
} else {
// If this group already exists, then we can just add
// this element to the end of the array.
group.push(row);
}
}
// Step 2: Call reduceFunc on each group
// Loop over the key-value pairs in the map.
for (const keyValuePair of map) {
const key = keyValuePair[0];
// Group is an array of elements that all belong to the same group.
const group = keyValuePair[1];
// Set the value for this key to be the output of the reduceFunc on this group.
// reduceFunc, for example, may get the length of the group or calculate an average.
map.set(key, reduceFunc(group));
}
return map;
}
myRollup(
cleanedData,
group => d3.mean(group, cereal => cereal.rating),
cereal => cereal.brand
)
d3.rollup(
cleanedData,
group => d3.mean(group, cereal => cereal.rating),
cereal => cereal.brand
)
function getMeanRatingOfGroup(group) {
return d3.mean(group, cereal => cereal.rating);
}
function getCerealBrand(cereal) {
return cereal.brand;
}
myRollup(cleanedData, getMeanRatingOfGroup, getCerealBrand)
d3.rollup(cleanedData, getMeanRatingOfGroup, getCerealBrand)
// write answer here
// write answer here
// write answer here
d3.group(cleanedData, cereal => cereal.brand)
d3.groups(cleanedData, cereal => cereal.brand)
d3.rollup(
cleanedData,
group => group.length,
cereal => cereal.brand
)
d3.rollups(
cleanedData,
group => group.length,
cereal => cereal.brand
)
brandRatings = d3.rollups(
cleanedData,
group => d3.median(group, cereal => cereal.rating),
cereal => cereal.brand
)
top3Brands = brandRatings
.toSorted((a, b) => d3.descending(a[1], b[1]))
.slice(0, 3)
d3.rollups(
cleanedData,
group => d3.median(group, cereal => cereal.rating),
cereal => cereal.brand
)
.sort((a, b) => d3.descending(a[1], b[1]))
.slice(0, 3)
// write answer here
// write answer here
d3.rollup(
cleanedData,
// group is all cereals that have the same brand and are on the same shelf
group => d3.mean(group, cereal => cereal.rating),
// first group by brand
cereal => cereal.brand,
// then group by shelf
cereal => cereal.shelf
)
d3.flatRollup(
cleanedData,
// group is all cereals that have the same brand and are on the same shelf
group => d3.mean(group, cereal => cereal.rating),
// first group by brand
cereal => cereal.brand,
// then group by shelf
cereal => cereal.shelf
)
d3.groupSort(
// our data
cleanedData,
// we want to sort the groups by their median rating
group => d3.median(group, cereal => cereal.rating),
// we want to group the cereals by brand
cereal => cereal.brand
)
d3.groupSort(
cleanedData,
group => d3.median(group, cereal => cereal.rating),
cereal => cereal.brand
).reverse()
d3.groupSort(
cleanedData,
group => -d3.median(group, cereal => cereal.rating),
cereal => cereal.brand
)
d3.rollups(
cleanedData,
group => d3.median(group, cereal => cereal.rating),
cereal => cereal.brand
)
.sort((a, b) => d3.descending(a[1], b[1]))
.slice(0, 3)
.map(([brand, rating]) => brand)
d3.groupSort(
cleanedData,
group => -d3.median(group, cereal => cereal.rating),
cereal => cereal.brand
).slice(0, 3)
// write answer here
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.
