IntroductionJavaScript BasicsSVG and D3 BasicsBar Chart Walk-throughLine and Area ChartsSelections and JoinsMapsChoropleth Color SchemesFundamental Graphs with D3Graphical Encoding ExamplesContextual Elements, Aesthetics, and ClaritySmall MultiplesSmall Multiples with Different AxesNetworksInteractionSocrata Open Data API & NYC Open DataStarting a sequential color scale at a darker color
Data Transformation
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
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.