31:T6dc,The US Library of Congress maintains a list of films called The National Film Registry, which contains historically, culturally, and aesthetically significant films from the United States. The registry is managed by the National Film Preservation Foundation, a nonprofit organization created by the U.S. Congress to help save America's film heritage. Films are inducted into this list by the foundation's board members, based on their own preferences and inspired by nominations from the general public. The full list of films is available online [[0](https://en.wikipedia.org/wiki/National_Film_Registry#Films), [1](https://www.loc.gov/programs/national-film-preservation-board/film-registry/complete-national-film-registry-listing/)], together with additional information, such as short descriptions of the films [[2](https://www.loc.gov/programs/national-film-preservation-board/film-registry/descriptions-and-essays/)] and the active board members [[3](https://www.filmpreservation.org/about/board-and-staff/)]. Films can be submitted for recommendation via an online form[[4](https://www.research.net/r/national-fim-registry-nomination-form)]. A curated list of previously nominated films that are not yet in the registry [[5](https://www.loc.gov/programs/national-film-preservation-board/film-registry/films-not-yet-named-to-the-registry/)] can serve as inspiration. This notebook provides visualizations for exploring this dataset! There are some interesting patterns we can observe, so have fun digging in. **Note:** In this notebook, we explore the official Registry's listing enriched with some additional information from IMDb. The data transformation and preprocessing steps are detailed [at the end of this notebook](#data-preprocessing).32:T4e5,
## When were the inducted films released? First, we will explore the relationship between a film's publication date and the time it was inducted into the registry. The color of each cell encodes the number of films for that combination of x and y values. Histograms along both axes provide an overview of how "popular" films from that year are overall. The Film Registry itself was only **founded in 1989**, which is why there are no films inducted before that in the data. Since 1989, the board members then could decide to **induct up to 25 films per year** into the registry, which is why the vertical histogram is more or less constant over the years. Since films cannot be inducted that have not been published, yet, the visualization also encodes each induction year on the right of the matrix. In fact, a film only becomes **eligible 10 years after its original release**, clearly reflected as the "white corridor" to the right of every row. We can also have a look at trends in terms of the ages of the films that were inducted. To show the median age of the inducted films per year, we can toggle the checkbox below. We an see that, overall, the average film age lies around 50 years, but we can observe some interesting fluctuations. 33:T53c,We next enriched this dataset with information from [IMDb](https://imdb.com/), using publicly available data from [@Ashirwad on Kaggle](https://www.kaggle.com/datasets/ashirwadsangwan/imdb-dataset) (version: 2023-09-15). Specifically, we joined the official data with the `title.basics.tsv.gz` and `title.ratings.tsv.gz` tables, using a film's title and release year as keys. This join reduced the data to 684 entries, because the Registry lists some films release dates as ranges (e.g., "1931–1944" for "Martha Graham dance films"), or because the IMDb dump simply does not contain a particular film. We then further cleaned the joined data, discarding all entries with a `title_type` of "tvEpisode", "tvMovie", or "video", as the Film Registry only contains full-length movies and short movies with a theatrical release. Finally, we resolved duplicated titles by comparing the [descriptions on the Registry's website](https://www.loc.gov/programs/national-film-preservation-board/film-registry/descriptions-and-essays) and the respective IMDb pages of each duplicate. In the end, our dataset contains full information on ${filteredData.length} films (covering ${Math.round((filteredData.length / 850) * 100)}% of the Registry's complete list). The full data transformation pipeline is attached to this Observable as IPython notebook.34:T4b3,35:T627,updateHistogramBins = function() { const xMaxBinSize = d3.max(xBins.map(d => d.length)); const yMaxBinSize = d3.max(yBins.map(d => d.length)); const binScale = d3.scaleLinear([0, d3.max([xMaxBinSize, yMaxBinSize])], [0, MARGIN * 0.75]) const xGroupedFilms = d3.group(getSelectedFilms(), d => +d[ATTR_X]); const xBinsContainer = svg.select("g.histogram.x g.bins").selectAll("g.bin").data(xBins).join("g") .attr("class", "bin") .attr("transform", d => `translate(${scaleX(+d.x0)},${-binScale(d.length)})`); xBinsContainer.append("rect") .attr("width", scaleX.bandwidth()) .attr("height", d => binScale(d.length)) .attr("fill", "steelblue"); xBinsContainer.append("rect") .attr("width", scaleX.bandwidth()) .attr("height", d => xGroupedFilms.size === 0 ? 0 : binScale(d.length) - binScale(xGroupedFilms.get(+d.x0)?.length || 0)) .attr("fill", "#ccc"); const yGroupedFilms = d3.group(getSelectedFilms(), d => +d[ATTR_Y]); const yBinsContainer = svg.select("g.histogram.y g.bins").selectAll("rect.bar").data(yBins).join("g") .attr("class", "bin") .attr("transform", d => `translate(${-binScale(d.length)},${scaleY(+d.x0)})`); yBinsContainer.append("rect") .attr("width", d => binScale(d.length)) .attr("height", scaleY.bandwidth()) .attr("fill", "steelblue"); yBinsContainer.append("rect") .attr("width", d => yGroupedFilms.size === 0 ? 0 : binScale(d.length) - binScale(yGroupedFilms.get(+d.x0)?.length || 0)) .attr("height", scaleY.bandwidth()) .attr("fill", "#ccc"); }36:T4a9,drawMatrixCells = function() { svg.select("g.cells").remove(); svg.on("click", (e) => { clickedCell.length = 0; updateSelectedFilmsList(); e.stopPropagation(); }); const cells = svg.append("g") .attr("class", "cells"); const filmCell = cells.selectAll("rect.cell.film").data(groupedData).join("rect") .attr("class", "cell film") .attr("width", scaleX.bandwidth()) .attr("height", scaleY.bandwidth()) .attr("transform", d => `translate(${scaleX(+d[0])},${scaleY(+d[1])})`) .attr("fill", d => isMatrixCellInSelection(d) ? cellAggregate === "count" ? scaleColor(d[2].length) : scaleRating(d3.mean(d[2].map(d => d[ATTR_RATING]))) : "#ccc") .attr("fill-opacity", fadedMatrix ? 0.25 : 1); filmCell.on("click", (e, d) => { clickedCell.length = 0; e.stopPropagation(); if (d3.select(e.target).classed("clicked")) { filmCell.classed("clicked", false); updateSelectedFilmsList(); return; } filmCell.classed("clicked", false); d3.select(e.target).classed("clicked", true); clickedCell.push(...d[2]); updateSelectedFilmsList(); }); }37:T748,drawMedianAgePerYear = function() { const medianAgePerYear = groupedByInductionYear.map(d => [d[0], Math.floor(d3.median(d[1].map(di => +di[ATTR_X])))]); const medianIndicators = svg.append("g") .attr("class", "median-indicators") .style("display", fadedMatrix ? "block" : "none"); const medianIndicator = medianIndicators.selectAll("g.median-indicator").data(medianAgePerYear).join("g") .attr("class", "median-indicator") .attr("transform", d => `translate(${scaleX(+d[1]) + scaleX.bandwidth() / 2},${scaleY(+d[0]) + scaleY.bandwidth() / 2})`); medianIndicator.append("circle") .attr("r", scaleX.bandwidth() / 2) .attr("fill", "firebrick"); medianIndicator.append("text") .attr("x", -10) .attr("text-anchor", "end") .attr("dy", scaleY.bandwidth() * 0.25) .text(d => d[1]); medianIndicator.append("text") .attr("x", 10) .attr("dy", scaleY.bandwidth() * 0.25) .attr("font-weight", "bold") .text(d => `${d[0] - d[1]} years`); const oldestMedianIndex = d3.maxIndex(medianAgePerYear.map(d => d[0] - d[1])); const oldestMedianYear = medianAgePerYear[oldestMedianIndex]; const oldestMedian = medianIndicators.append("g") .attr("class", "oldest-median") .attr("transform", `translate(${scaleX(oldestMedianYear[1])},${scaleY(oldestMedianYear[0])})`); oldestMedian.append("circle") .attr("r", scaleX.bandwidth() / 2) .attr("cx", scaleX.bandwidth() / 2 - 75) .attr("cy", scaleY.bandwidth() / 2) .attr("fill", "black"); oldestMedian.append("line") .attr("x1", -35) .attr("x2", -75) .attr("y1", scaleY.bandwidth() / 2) .attr("y2", scaleY.bandwidth() / 2) .attr("stroke", "black"); oldestMedian.append("text") .attr("x", -80) .attr("y", scaleY.bandwidth() * 0.75) .attr("text-anchor", "end") .text("oldest median age"); }38:T4e9,drawEarliestInductee = function() { const earliestOffset = 45; const earliestInducteeIndex = d3.minIndex(groupedData, d => d[1] - d[0]); const earliestInducteeFilm = groupedData[earliestInducteeIndex][2][0]; const earliestInductee = svg.append("g") .attr("class", "earliest-inductee") .attr("transform", `translate(${scaleX(+earliestInducteeFilm[ATTR_X])},${scaleY(+earliestInducteeFilm[ATTR_Y])})`); earliestInductee.append("rect") .attr("fill", "rgba(255,255,255,0.7)") .attr("x", earliestOffset - FONT_SIZE) .attr("width", 110) .attr("height", 1.5 * FONT_SIZE); earliestInductee.append("text") .attr("dy", scaleY.bandwidth() * 0.75) .attr("dx", earliestOffset) .attr("font-size", FONT_SIZE) .style("font-family", "sans-serif") .text("earliest inductee"); earliestInductee.append("circle") .attr("cx", earliestOffset - scaleY.bandwidth()) .attr("cy", scaleY.bandwidth() / 2) .attr("r", scaleX.bandwidth() / 2) .attr("fill", "black") earliestInductee.append("line") .attr("x1", scaleX.bandwidth() * 1.5) .attr("x2", earliestOffset - scaleY.bandwidth()) .attr("y1", scaleY.bandwidth() / 2) .attr("y2", scaleY.bandwidth() / 2) .attr("stroke", "black") }39:T64b,drawMatrixColorLegend = function() { const LEGEND_WIDTH = 300; const LEGEND_HEIGHT = 10; const LEGEND_MARGIN = FONT_SIZE; const N_SEGMENTS = 20; const legendSVG = d3.create("svg") .attr("width", width) .attr("height", LEGEND_HEIGHT + LEGEND_MARGIN); const legend = legendSVG.append("g") .attr("class", "legend") .attr("transform", `translate(${MARGIN},0)`); const noSegments = 10; const scale = cellAggregate === "count" ? scaleColor : scaleRating; const minSegment = Math.floor(d3.min(scale.domain())); const maxSegment = Math.ceil(d3.max(scale.domain())); const medianSegment = d3.median(scale.domain()); const segmentStep = (maxSegment - minSegment) / N_SEGMENTS; const segmentValues = d3.range(minSegment, maxSegment, segmentStep); const legendScaleX = d3.scaleBand(segmentValues, [LEGEND_MARGIN, LEGEND_WIDTH - LEGEND_MARGIN]); const legendLinearScaleX = d3.scaleLinear(d3.extent(legendScaleX.domain()), legendScaleX.range()); legend.selectAll("rect.segment").data(segmentValues).join("rect") .attr("class", "segment") .attr("x", legendScaleX) .attr("width", legendScaleX.bandwidth()) .attr("height", LEGEND_HEIGHT) .attr("fill", scale); legend.selectAll("text.label").data(legendLinearScaleX.domain().concat(medianSegment)).join("text") .attr("class", "label") .attr("x", legendLinearScaleX) .attr("y", LEGEND_HEIGHT + LEGEND_MARGIN) .attr("font-size", FONT_SIZE) .attr("text-anchor", "middle") .text((d, i) => i === 2 ? `${Math.round(d)} (median)` : Math.round(d)); return legendSVG.node(); }3a:T1252,renderGenres = function() { const stackGenres = genreXPosition === "stack"; const genres = Array.from(genresMap.keys()); const genresList = Array.from(genresMap.entries()); const mostGenresPerFilm = d3.max(filteredData.map(d => d[ATTR_GENRES]).map(d => d.length)); const mostFilmsPerGenre = d3.max(Array.from(genresMap.values()).map(d => d.length)); const DEFAULT_OPACITY = 0.5; const genreScaleX = d3.scaleBand( stackGenres ? d3.range(0, mostFilmsPerGenre + 1) : genreXPosition === ATTR_X ? xDomain : genreXPosition === ATTR_RATING ? d3.range(0, 10.1, 0.1).map(d => Math.floor(d * 10) / 10) : yDomain, [2*MARGIN, width - MARGIN] ).padding(0.15); const genreScaleY = d3.scaleBand(genres, [GENRE_HEIGHT - MARGIN, MARGIN]).padding(0.15); let hoveredFilm = null; let hoveredGenre = null; function getHoveredFilms() { // multiple films can be at the hovered location! But the way that the data join works, only one // update event is fired, so we need a workaround here. const hoveredFilms = hoveredGenre === null || hoveredFilm === null ? [] : stackGenres ? [hoveredFilm] : hoveredGenre[1].filter(d => +d[genreXPosition] === +hoveredFilm[genreXPosition]); return hoveredFilms; } function updateHoveredFilm() { const hoveredFilms = getHoveredFilms(); genre.selectAll("rect.film") .attr("fill-opacity", d => { if (hoveredFilms.length === 0) { return DEFAULT_OPACITY; } if (hoveredFilms.indexOf(d) > -1) { return DEFAULT_OPACITY; } return DEFAULT_OPACITY / 2; }) .attr("stroke", d => hoveredFilm === d ? "#000" : "#fff"); } function updateTooltip(e) { const hoveredFilms = getHoveredFilms(); const parent = genreSvg.node().getBoundingClientRect(); tooltip .attr("display", hoveredFilm === null ? "none" : "block") .attr("transform", `translate(${e.clientX - parent.left + 10},${e.clientY - parent.top + FONT_SIZE * 0.75})`); tooltip.select("text").selectAll("tspan").data(hoveredFilms) .join("tspan") .attr("x", 0) .attr("y", (d, i) => i * FONT_SIZE * 1.05) .text(d => `${d[ATTR_TITLE]} (${d[ATTR_X]})`); tooltip.select("rect") .attr("width", tooltip.select("text").node().getBBox().width) .attr("height", tooltip.select("text").node().getBBox().height); } const genreSvg = d3.create("svg") .attr("width", width) .attr("height", GENRE_HEIGHT) .on("mousemove", updateTooltip); const genreLinearScaleX = stackGenres || genreXPosition === ATTR_RATING ? d3.scaleLinear(d3.extent(genreScaleX.domain()), genreScaleX.range()) : d3.scaleTime(d3.extent(genreScaleX.domain()).map(d => new Date(`${d}-01-01`)), genreScaleX.range()); const axisX = d3.axisBottom(genreLinearScaleX); genreSvg.append("g") .attr("class", "axis x") .attr("transform", `translate(0, ${genreScaleY.range()[0]})`) .call(axisX); const barchart = genreSvg.append("g") .attr("class", "genre-barchart"); const genre = barchart.selectAll("g.bar").data(genresList).join("g") .attr("class", d => d[0]) .attr("transform", d => `translate(0,${genreScaleY(d[0])})`) .on("mouseenter", (e, d) => { hoveredGenre = d; updateHoveredFilm(); }) .on("mouseleave", () => { hoveredGenre = null; updateHoveredFilm(); }); genre.selectAll("rect.film").data(d => d[1]).join("rect") .attr("class", "film") .attr("x", (d, i) => stackGenres ? genreScaleX(i) : genreScaleX(+d[genreXPosition])) .attr("width", genreScaleX.bandwidth()) .attr("height", genreScaleY.bandwidth()) .attr("fill", "steelblue") .attr("fill-opacity", DEFAULT_OPACITY) .attr("stroke-width", stackGenres ? 0 : 1) .on("mouseenter", (e, d) => { hoveredFilm = d; updateHoveredFilm(); }) .on("mouseleave", (e, d) => { hoveredFilm = null; updateHoveredFilm(); }); genre.append("text") .attr("x", d => d3.min(genreScaleX.range()) - 10) .attr("y", genreScaleY.bandwidth() / 2) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", FONT_SIZE) .text(d => d[0]); const tooltip = genreSvg.append("g").attr("class", "tooltip"); tooltip.append("rect") .attr("x", 0) .attr("y", -FONT_SIZE) .attr("fill", "white") .attr("fill-opacity", 0.73); tooltip.append("text") .attr("font-family", "sans-serif") .attr("font-size", FONT_SIZE); updateHoveredFilm(); return genreSvg.node(); }3b:[{"id":"d62b68d9b8bfcf584683ad37e63440fea9a4e61ae60a88f7cde96023b19caa3444052b2704bb378dfb7d00c5921a2d9e6e331b0d743a1564a8da2f1d06b78677","href":"https://static.observableusercontent.com/files/d62b68d9b8bfcf584683ad37e63440fea9a4e61ae60a88f7cde96023b19caa3444052b2704bb378dfb7d00c5921a2d9e6e331b0d743a1564a8da2f1d06b78677","name":"library_of_congress_films@3.csv","type":"text/csv","lastModified":1694781333741.827,"size":30026},{"id":"584dc9992daf6f7ae6602b83ac3522dfb9a3f1729c337e5b2712b53d32abb66d190496afb62852cffd1063dc1ec860ceb74304744189ad7b0fa83df7fd996f1c","href":"https://static.observableusercontent.com/files/584dc9992daf6f7ae6602b83ac3522dfb9a3f1729c337e5b2712b53d32abb66d190496afb62852cffd1063dc1ec860ceb74304744189ad7b0fa83df7fd996f1c","name":"cleaned-imdb+registry.csv","type":"text/csv","lastModified":1694781341740.334,"size":63713},{"id":"1bad5ae7b6412f1567230f3401e81458b9cf3512e28abc6cdce42f7a33c36aeb8b2299aa6a5a10d1d31b3073220cf07257e5d22d2ba8d58d22fd54fe0ae621a3","href":"https://static.observableusercontent.com/files/1bad5ae7b6412f1567230f3401e81458b9cf3512e28abc6cdce42f7a33c36aeb8b2299aa6a5a10d1d31b3073220cf07257e5d22d2ba8d58d22fd54fe0ae621a3","name":"data-preprocessing.ipynb","type":"application/octet-stream","lastModified":1694781366631.889,"size":3862},{"id":"535b3c69db9555a1d40dae83643673bef36ba62b418a31a92fa3b8ff1a812899c33ab97195d0a13d60bb9a4aa29dced10116434c41ad1a8fec679e460c7a94cb","href":"https://static.observableusercontent.com/files/535b3c69db9555a1d40dae83643673bef36ba62b418a31a92fa3b8ff1a812899c33ab97195d0a13d60bb9a4aa29dced10116434c41ad1a8fec679e460c7a94cb","name":"architecture2.png","type":"image/png","lastModified":1695199642750.447,"size":126093}] 2f:{"title":"Stories of our Time - Exploring The National Film Registry","cells":[{"id":0,"value":"# Stories of our Time - Exploring The National Film Registry","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":998,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":568,"value":"{\n div.selectAll(\"*\").remove();\n svg.selectAll(\"*\").remove();\n filmDiv.selectAll(\"*\").remove();\n\n drawAxes();\n drawAxisTitles();\n \n drawXHistogram();\n drawYHistogram();\n \n drawMatrixCells();\n drawMedianAgePerYear();\n drawFuture();\n drawEarliestInductee();\n \n div.node().appendChild(svg.node());\n div.node().appendChild(filmDiv.node());\n\n updateSelectedFilmsList();\n return div.node() \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1937,"value":"drawMatrixColorLegend()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1924,"value":"viewof cellAggregate = Inputs.radio([\"count\", \"average IMDb rating\"], {label: \"cell aggregation\", value: \"count\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"viewof fadedMatrix = Inputs.toggle({label: `show median ${ATTR_X}`, value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1476,"value":"viewof filmListOrder = Inputs.radio(FUN_ATTRIBUTES, {label: \"Sort film list by\", value: ATTR_TITLE})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1278,"value":"viewof selectedFilmTypes = Inputs.checkbox(FILM_TYPES, {value: FILM_TYPES, label: html`Include film types`, format: d => html`${d}`}, {width: \"100%\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2145,"value":"

\n👉 **This chart is interactive**: You can **click** on the cells to see the list of movies behind them. You can also **brush** over the histograms at the top and on the left by clicking and dragging your mouse around over them. This will filter the list by x and y attributes, and also show the distribution in the histograms. You can also use the **controls** above to change the chart's parameters.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1007,"value":"
\n\n## What types of film are inducted into the Registry?\nNext, let's see if we can find some trends in what type of film are inducted into the registry each year. This is depicted in the visualization below. ","pinned":false,"hidden":false,"mode":"md"},{"id":1672,"value":"renderGenres()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1880,"value":"viewof genreXPosition = Inputs.radio([\"stack\", ATTR_X, ATTR_Y, ATTR_RATING], {label: \"x position\", value: \"stack\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"

\n👉 **This chart is interactive**: You can use your mouse to see the title of movies behind each box by **hovering** over them. Notice that many movies are assigned _more than one genre_, so pay attention to other highlighted boxes. You can also use the **controls** above to change some parameters.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":1013,"value":"
\n\n## Data Preprocessing\nBefore we can work with the data, we need to bring it into a usable shape. As a base dataset, we copy-pasted the films listed on the [official website](https://www.loc.gov/programs/national-film-preservation-board/film-registry/complete-national-film-registry-listing) (version: 2023-09-15) into a CSV file that is attached to this notebook, containing a total of 850 entries.\n\nHere's what this base dataset looks like:","pinned":false,"hidden":false,"mode":"md"},{"id":936,"value":"Inputs.table(FileAttachment(\"library_of_congress_films@3.csv\").csv(), {\n width: width * 0.55,\n columns: [\n \"title\",\n \"year_released\",\n \"year_inducted\"\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1613,"value":"$33","pinned":false,"hidden":false,"mode":"md"},{"id":1002,"value":"
\n
\n

\n\n## Generator Code below","pinned":false,"hidden":false,"mode":"md"},{"id":1302,"value":"### Constants","pinned":false,"hidden":false,"mode":"md"},{"id":90,"value":"HEIGHT = 750;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1898,"value":"GENRE_HEIGHT = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":1087,"value":"MATRIX_WIDTH = width * 0.75;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1090,"value":"LIST_WIDTH = width - MATRIX_WIDTH;","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"MARGIN = 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1148,"value":"SPACING = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1588,"value":"ATTRIBUTES = Array.from(Object.keys(data[0]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1591,"value":"FUN_ATTRIBUTES = [ATTR_TITLE, ATTR_X, ATTR_Y, ATTR_RATING]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1593,"value":"NUM_ATTRIBUTES = [\"year_released\", \"runtimeMinutes\", \"averageRating\", \"numVotes\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"ATTR_X = \"year_released\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"ATTR_Y = \"year_inducted\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"ATTR_CAT = \"titleType\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"ATTR_TITLE = \"title\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1646,"value":"ATTR_URL = \"tconst\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1665,"value":"ATTR_GENRES = \"genres\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":1904,"value":"ATTR_RATING = \"averageRating\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"FONT_SIZE = 12;","pinned":false,"hidden":false,"mode":"ojs"},{"id":886,"value":"FILM_TYPES = Array.from(groupedByType.keys())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1304,"value":"### Scales","pinned":false,"hidden":false,"mode":"md"},{"id":636,"value":"scaleX = d3.scaleBand(valueRange, [MARGIN, MATRIX_WIDTH - MARGIN]).padding(0.15);","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"scaleY = d3.scaleBand(yDomain, [MARGIN, HEIGHT - MARGIN]).padding(0.15);","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"linearScaleX = d3.scaleLinear()\n .domain(d3.extent(scaleX.domain()))\n .range(scaleX.range());","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"linearScaleY = d3.scaleLinear()\n .domain(d3.extent(scaleY.domain()))\n .range(scaleY.range());","pinned":false,"hidden":false,"mode":"ojs"},{"id":643,"value":"scaleColor = d3.scaleSequential(d3.interpolateYlGnBu).domain([0, d3.max(groupedData.map(d => d[2].length))]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1191,"value":"scaleColorCategorical = d3.scaleOrdinal(d3.schemeTableau10).domain(FILM_TYPES);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1912,"value":"scaleRating = d3.scaleDiverging(d3.interpolatePiYG).domain([d3.min(ratings), d3.median(ratings), d3.max(ratings)]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"### User Input Variables","pinned":false,"hidden":false,"mode":"md"},{"id":814,"value":"xBrushSelection = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"yBrushSelection = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"clickedCell = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"selectedReleaseYears = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"selectedInductionYears = [];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"### D3 Selections","pinned":false,"hidden":false,"mode":"md"},{"id":1114,"value":"div = d3.create(\"div\")\n .attr(\"id\", \"content\")\n .style(\"width\", `${width}px`)\n .style(\"height\", `${HEIGHT}px`);","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"svg = d3.create(\"svg\")\n .attr(\"id\", \"matrix\")\n .attr(\"width\", MATRIX_WIDTH)\n .attr(\"height\", HEIGHT)\n .attr(\"font-size\", FONT_SIZE)\n .attr(\"font-family\", \"sans-serif\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"filmDiv = d3.create(\"div\")\n .attr(\"id\", \"film-list\")\n .style(\"width\", `${LIST_WIDTH - SPACING}px`)\n .style(\"height\", `${HEIGHT - 2*MARGIN}px`);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1133,"value":"$34","pinned":false,"hidden":false,"mode":"html"},{"id":2130,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":1336,"value":"### Data Transformations","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"data = FileAttachment(\"cleaned-imdb+registry.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"filteredData = data\n .filter(d => selectedFilmTypes.length === FILM_TYPES.length || selectedFilmTypes.indexOf(d[ATTR_CAT]) > -1)\n .map(d => {\n d[ATTR_GENRES] = d[ATTR_GENRES] instanceof Array ? d[ATTR_GENRES] : d[ATTR_GENRES].split(\",\");\n return d;\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"groupedData = d3.flatGroup(filteredData, d => d[ATTR_X], d => d[ATTR_Y]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"groupedByInductionYear = d3.flatGroup(filteredData, d => +d[ATTR_Y]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"groupedByType = d3.group(data, d => d[ATTR_CAT]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":337,"value":"xDomain = d3.range(d3.min(filteredData, d => +d[ATTR_X]), d3.max(filteredData, d => +d[ATTR_X]) + 1); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"yDomain = d3.range(d3.min(filteredData, d => +d[ATTR_Y]), d3.max(filteredData, d => +d[ATTR_Y]) + 1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":342,"value":"valueRange = d3.range(Math.floor(d3.min(xDomain.concat(yDomain))), Math.ceil(d3.max(xDomain.concat(yDomain))) + 1);","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"xBins = d3.bin().thresholds(xDomain)(filteredData.map(d => d[ATTR_X]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"yBins = d3.bin().thresholds(yDomain)(filteredData.map(d => d[ATTR_Y]));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1727,"value":"genresMap = {\n const genresMap = new Map();\n \n filteredData.forEach(film => {\n film[ATTR_GENRES].forEach(genre => {\n const filmsInGenre = genresMap.has(genre) ? genresMap.get(genre) : [];\n filmsInGenre.push(film);\n genresMap.set(genre, filmsInGenre);\n });\n });\n \n return genresMap;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1932,"value":"ratings = filteredData.map(d => +d[ATTR_RATING]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1306,"value":"### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":1109,"value":"updateSelectedFilmsList = function() {\n const selectedFilms = getSelectedFilms();\n\n selectedFilms.sort((a, b) => a[filmListOrder] > b[filmListOrder] ? 1 : -1);\n\n filmDiv.selectAll(\"div.list\").remove();\n \n const films = filmDiv.append(\"div\")\n .attr(\"class\", \"list\");\n\n const film = films.selectAll(\"div.film\").data(selectedFilms).join(\"div\")\n .attr(\"class\", \"film\")\n .on(\"mouseenter\", (e, d) => {\n svg.selectAll(\"rect.cell.film\").classed(\"hover\", di => {\n return di[0] === d[ATTR_X] && di[1] === d[ATTR_Y];\n });\n })\n .on(\"mouseleave\", () => {\n svg.selectAll(\"rect.cell.film\").classed(\"hover\", false);\n });\n\n film.append(\"div\")\n .attr(\"class\", \"type\")\n .style(\"background\", d => scaleColorCategorical(d[ATTR_CAT]));\n \n film.append(\"a\")\n .attr(\"href\", d => `https://www.imdb.com/title/${d[ATTR_URL]}`)\n .attr(\"target\", \"_blank\")\n .text(d => `${d[ATTR_TITLE]} (${d[ATTR_X]})`);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"getSelectedFilms = () => filteredData\n .filter(d => clickedCell.length === 0 || clickedCell.indexOf(d) > -1)\n .filter(d => selectedInductionYears.length === 0 || selectedInductionYears.indexOf(+d[ATTR_Y]) > -1)\n .filter(d => selectedReleaseYears.length === 0 || selectedReleaseYears.indexOf(+d[ATTR_X]) > -1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"drawAxes = function() {\n const dateExtent = d3.extent(scaleX.domain()).map(d => new Date(`${d}-01-01`));\n const timeScale = d3.scaleTime()\n .domain(dateExtent) \n .range(scaleX.range());\n \n const axisX = d3.axisBottom(timeScale); \n const axisY = d3.axisRight(scaleY);\n\n const axes = svg.append(\"g\").attr(\"class\", \"axes\");\n \n axes.append(\"g\")\n .attr(\"class\", \"axis x\")\n .attr(\"transform\", `translate(0, ${scaleY.range()[1]})`)\n .call(axisX);\n \n axes.append(\"g\")\n .attr(\"class\", \"axis y\")\n .attr(\"transform\", `translate(${scaleX.range()[1]},0)`)\n .call(axisY);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":831,"value":"drawAxisTitles = function() {\n const titles = svg.append(\"g\")\n .attr(\"transform\", `translate(${MARGIN},${MARGIN})`)\n .attr(\"class\", \"titles\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"center\");\n\n titles.append(\"text\")\n .attr(\"class\", \"title x\")\n .attr(\"x\", linearScaleX.range()[1] / 2)\n .attr(\"y\", -MARGIN * 0.75)\n .text(ATTR_X);\n \n titles.append(\"text\")\n .attr(\"class\", \"title y\")\n .style(\"transform\", `rotate(270deg)translate(-${scaleY.range()[1] / 2}px,${-MARGIN * 0.8}px)`)\n .text(ATTR_Y);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"brushXHistogram = d3.brushX()\n .on(\"end\", (event, target) => {\n xBrushSelection.length = 0;\n if (event.selection === null) {\n selectedReleaseYears.length = 0;\n } else {\n xBrushSelection.push(...event.selection)\n }\n drawMatrixCells();\n updateHistogramBins();\n updateSelectedFilmsList();\n })\n .on(\"brush\", (event, target) => {\n const minMaxYears = event.selection.map(d => Math.round(linearScaleX.invert(d)));\n selectedReleaseYears.length = 0;\n selectedReleaseYears.push(...d3.range(...minMaxYears));\n selectedReleaseYears.push(minMaxYears[1]);\n\n drawMatrixCells();\n })\n .extent([[MARGIN, 0], [MATRIX_WIDTH - MARGIN, MARGIN]]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"drawXHistogram = function() { \n const histogram = svg.append(\"g\")\n .attr(\"class\", \"histogram x\")\n .attr(\"transform\", `translate(0,${MARGIN})`)\n\n histogram.append(\"path\")\n .attr(\"d\", `M${MARGIN},0L${scaleX.range()[1]},0`)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1);\n\n const bins = histogram.append(\"g\").attr(\"class\", \"bins\");\n \n updateHistogramBins();\n \n histogram.append(\"g\")\n .attr(\"class\", \"brush x\")\n .attr(\"transform\", `translate(0,${-MARGIN})`)\n .call(brushXHistogram);\n\n if (xBrushSelection.length > 0) {\n histogram.select(\"g.brush.x\").call(brushXHistogram.move, xBrushSelection);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"brushYHistogram = d3.brushY()\n .on(\"end\", (event, target) => {\n yBrushSelection.length = 0;\n if (event.selection === null) {\n selectedInductionYears.length = 0;\n } else {\n yBrushSelection.push(...event.selection)\n }\n drawMatrixCells();\n updateHistogramBins();\n updateSelectedFilmsList();\n })\n .on(\"brush\", (event, target) => { \n const minMaxYears = event.selection.map(d => Math.round(linearScaleY.invert(d)));\n selectedInductionYears.length = 0;\n selectedInductionYears.push(...d3.range(...minMaxYears));\n selectedInductionYears.push(minMaxYears[1]);\n \n drawMatrixCells();\n })\n .extent([[0, MARGIN], [MARGIN, HEIGHT - MARGIN]]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"drawYHistogram = function() {\n const histogram = svg.append(\"g\")\n .attr(\"class\", \"histogram y\")\n .attr(\"transform\", `translate(${MARGIN},0)`)\n\n histogram.append(\"path\")\n .attr(\"d\", `M0,${MARGIN}L0,${scaleY.range()[1]}`)\n .attr(\"stroke\", \"black\")\n .attr(\"stroke-width\", 1);\n\n const bins = histogram.append(\"g\").attr(\"class\", \"bins\");\n\n updateHistogramBins();\n\n histogram.append(\"g\")\n .attr(\"class\", \"brush y\")\n .attr(\"transform\", `translate(${-MARGIN},0)`)\n .call(brushYHistogram);\n\n if (yBrushSelection.length > 0) {\n histogram.select(\"g.brush.y\").call(brushYHistogram.move, xBrushSelection);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"isMatrixCellInSelection = function(cell) {\n const isReleaseYearInSelection = selectedReleaseYears.length === 0 || selectedReleaseYears.indexOf(+cell[0]) > -1;\n const isInductionYearInSelection = selectedInductionYears.length === 0 || selectedInductionYears.indexOf(+cell[1]) > -1;\n\n return isReleaseYearInSelection && isInductionYearInSelection;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":528,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"drawFuture = function() {\n const latestYear = valueRange[valueRange.length - 1];\n\n const futureIndicator = svg.selectAll(\"g.future-indicator\").data(yDomain).join(\"g\")\n .attr(\"class\", \"future-indicator\")\n .attr(\"transform\", d => `translate(${scaleX(d)},${scaleY(d)})`);\n\n futureIndicator.append(\"rect\")\n .attr(\"width\", 2)\n .attr(\"height\", scaleY.bandwidth())\n .attr(\"fill\", \"#ccc\");\n\n futureIndicator.append(\"line\")\n .attr(\"x1\", 0)\n .attr(\"x2\", d => scaleX(latestYear) - scaleX(d) + 1)\n .attr(\"y1\", d => scaleY.bandwidth() / 2)\n .attr(\"y2\", d => scaleY.bandwidth() / 2)\n .attr(\"stroke-width\", 1)\n .attr(\"stroke\", \"#ccc\")\n .attr(\"stroke-dasharray\", \"2 2\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":1939,"value":"$39","pinned":true,"hidden":false,"mode":"ojs"},{"id":1662,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}