data.columns
data.forEach(currentElement => {
if (currentElement.rating >= 75) {
currentElement.grade = 'A';
} else if (currentElement.rating >= 50) {
currentElement.grade = 'B';
} else if (currentElement.rating >= 25) {
currentElement.grade = 'C';
} else {
currentElement.grade = 'D';
}
})
nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
evens = nums.filter(currentElement => currentElement % 2 === 0)
data.filter(currentElement => currentElement.type === 'H')
data.filter(currentElement => currentElement.calories < 100 && currentElement.sodium === 0)
nums
nums.map(currentElement => currentElement * 2)
words = ['I', 'love', 'information', 'visualization']
wordLengths = words.map(currentElement => currentElement.length)
cleanedData = data.map(currentElement => ({
'name': currentElement.name,
'rating': currentElement.rating,
'type': currentElement.type === "H" ? "hot" : "cold",
'brand': abbreviationToBrandName[currentElement.mfr]
}))
nums
nums.reduce((total, currentValue) => {
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, which evaluates
to false, so count is given the value of the right side of the
or operator (||), which is 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
cleanedData.reduce((accumulator, currentValue) => {
let count = 0;
// hasOwnProperty will check if there's a key for this brand in the accumulator object
if (accumulator.hasOwnProperty(currentValue.brand)) {
count = accumulator[currentValue.brand];
}
accumulator[currentValue.brand] = count + 1;
return accumulator;
}, {});
unsortedNums = [9, 4, 5, 7, 2, 1, 10, 3, 8, 6]
// If you remove the call to slice and rerun, notice what happens when you run the cell below
unsortedNums.slice().sort(d3.ascending)
unsortedNums
unsortedNums.slice().sort(d3.descending)
cleanedData.slice()
.sort((a, b) => d3.descending(a.rating, b.rating))
.slice(0, 5) // get elements starting with index 0 and stopping before index 5
d3.min(data, 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)
d3 = require("d3@5", "d3-array@2")
brandToCereals = d3.group(cleanedData, d => d.brand)
d3.rollup(cleanedData, v => v, d => d.brand)
/*
The first argument is our data
The second argument is the function that gets the value for each group,
where v is an array of objects for each group
The third argument is the function to say what key to group by
*/
d3.rollup(cleanedData, v => v.length, d => d.brand)
d3.rollup(cleanedData,
arr => d3.mean(arr, cereal => cereal.rating),
d => d.brand)
d3.rollup(cleanedData, arr => ({
minRating: d3.min(arr, cereal => cereal.rating),
maxRating: d3.max(arr, cereal => cereal.rating)
}), d => d.brand)
brandToMedianRating = d3.rollup(cleanedData,
arr => d3.median(arr, cereal => cereal.rating),
d => d.brand)
brandAndMedianRating = Array.from(brandToMedianRating, ([brand, median]) => ({brand, median}))
topBrandsByMedianRating = brandAndMedianRating.slice()
.sort((a, b) => d3.descending(a.median, b.median))
.slice(0, 3)
topBrandsByMedianRating.map(d => d.brand)
{
const brandToMedian = d3.rollup(cleanedData,
arr => d3.median(arr, cereal => cereal.rating),
d => d.brand)
return Array.from(brandToMedian, ([brand, median]) => ({brand, median}))
.sort((a, b) => d3.descending(a.median, b.median))
.slice(0, 3)
.map(d => d.brand)
}
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.
