function transformObject(object, property, searchValue, replaceValue) {
return _.mapValues(object, function(value, key) {
if (_.isObject(value)) {
return transformObject(value, property, searchValue, replaceValue);
} else if (key === property) {
return value.replace(new RegExp(searchValue, 'g'), replaceValue);
} else {
return value;
}
});
}
function transformArray(array, property, searchValue, replaceValue) {
return array.map(item => {
if (_.isObject(item)) {
return transformObject(item, property, searchValue, replaceValue);
} else {
return item;
}
});
}
animeNew = transformArray(anime,'gross', '[$M]','');
colorObj = {
const colors = _.zipObject(topGenres, petalColors)
colors.Other = '#FFF2B4'
return colors
}
pathObjKeys = Object.keys(pathObj);
function greatestYear(years, year){
const smallerYears = years.filter(y => y < year);
return Math.max(...smallerYears);
}
function shuffleGenres(array) {
return array.map((item) => {
if (_.isObject(item)) {
return _.mapValues(item, function (value, key) {
if (_.isObject(value)) {
return shuffleGenres(value);
} else if (key === "genre") {
const genres = value.split(",");
const shuffledGenres = _.shuffle(genres);
return shuffledGenres.map(genre => genre.trim());
} else {
return value;
}
});
} else {
return item;
}
});
}
newAnime2 = shuffleGenres(animeNew);
{
const svg = html`<svg width=${width} height=${svgHeight}></svg>`;
d3.select(svg)
.selectAll("path")
.data(newAnime2)
.enter()
.append("path")
.attr("transform", (d, i) => `translate(${calculateGridPos(i)})`)
.attr("d", (d) => pathObj[greatestYear(pathObjKeys, d.year)])
.attr("fill", (d) => colorObj[d.genre[0]] || colorObj.Other)
.attr("stroke", (d) => colorObj[d.genre[0]] || colorObj.Other)
.attr("fill-opacity", 0.5)
.attr("stroke-width", 2);
return scrollSVG(svg);
}
flowers = {
// movie genre → `color` (color of petals)
// array of top genres: `topGenres`
// array of colors to map to: `petalColors`
const colorScale = d3
.scaleOrdinal()
.domain(topGenres)
.range(petalColors)
.unknown(colorObj.Other);
// `rated` → `path` (type of flower petal)
// array to map to: `petalPaths`
const pathScale = d3.scaleOrdinal().range(petalPaths);
// `rating` → `scale` (size of petals)
const minMaxRating = d3.extent(newAnime2, (d) => d.rating);
const sizeScale = d3.scaleLinear().domain(minMaxRating).range([0.2, 0.75]);
// `votes` → `numPetals` (number of petals)
const minMaxVotes = d3.extent(newAnime2, (d) => d.votes);
const numPetalScale = d3
.scaleQuantize()
.domain(minMaxVotes)
.range([5, 6, 7, 8, 9, 10]);
return _.map(newAnime2, (d, i) => {
return {
color: colorScale(d.genre[0]),
path: pathScale(greatestYear(pathObjKeys, d.year)),
scale: sizeScale(d.rating),
numPetals: numPetalScale(d.votes),
title: d.title,
translate: calculateGridPos(i) // util function that returns [x, y]
};
});
}
{
const svg = html`<svg width=${width} height=${svgHeight}></svg>`;
d3.select(svg)
.selectAll("path")
.data(flowers)
.enter()
.append("path")
.attr(
"transform",
(d,i) => `translate(${d.translate})scale(${d.scale || 1})`
)
.attr("d", (d) => d.path)
.attr("fill", (d) => d.color)
.attr("fill-opacity", 0.75)
.attr("stroke", (d) => d.color);
return scrollSVG(svg);
}
{
const svg = html`<svg width=${width} height=${svgHeight}></svg>`;
const g = d3
.select(svg)
.selectAll("g")
.data(flowers)
.enter()
.append("g")
.attr("transform", (d) => `translate(${d.translate})`);
g.selectAll("path")
.data((d) => {
return _.times(d.numPetals, (i) =>
Object.assign({}, d, { rotate: i * (360 / d.numPetals) })
);
})
.enter()
.append("path")
.attr("transform", (d) => `rotate(${d.rotate})scale(${d.scale})`)
.attr("d", (d) => d.path)
.attr("fill", (d) => d.color)
.attr("stroke", (d) => d.color)
.attr("fill-opacity", 0.5)
.attr("stroke-width", 3);
g.append("text")
.text((d) => _.truncate(d.title, 18))
.style("font-size", ".57em")
.style("font-style", "italic")
.attr("text-anchor", "middle")
.attr("dy", ".35em");
return scrollSVG(svg);
}
filtered = _.filter(newAnime2, d => {
// either the genre is in the filtered genres
return (_.includes(filteredGenres, d.genre[0]) ||
// OR the movie's genre isn't one of the top genres, and "Other" is toggled
(_.includes(filteredGenres, 'Other') && !_.includes(topGenres, d.genre[0]))) &&
// AND movie's pg rating is in filtered pg
_.includes(filteredPG, d.rated)
})
petalPath = "M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0"
petalPaths = [
'M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0',
'M-35 0 C-25 25 25 25 35 0 C50 25 25 75 0 100 C-25 75 -50 25 -35 0',
window.localStorage.petalPath || '"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0"',
'M0 0 C50 25 50 75 0 100 C-50 75 -50 25 0 0',
]
d3 = require('d3')
_ = require('lodash')
import {Inputs} from "@jashkenas/inputs"
import {checkbox} from "@jashkenas/inputs"
import {form} from '@mbostock/form-input'
import {calculateData} from '2683357905679f61'
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.
