43:["$","title",null,{"children":"Movies to watch during quarantine | Nolan Johnson | Observable"}] 4b:Tef5,viewof movies = { const between = (value, range) => { return range[0] <= value && value <= range[1]; }; const maxRuntime = 500; const maxResults = 25; const defaultSort = (a, b) => +b.numVotes - +a.numVotes; const watchListOptions = (d) => { switch (searchWatchList) { case "all": return true; case "watch": return watchList.indexOf(d.primaryTitle) >= 0; case "notwatch": return watchList.indexOf(d.primaryTitle) === -1; default: return true; } }; const filteredData = data .filter(watchListOptions) .filter( (d) => d.primaryTitle.toLowerCase().includes(searchTitle.toLowerCase()) && between(d.averageRating, searchRating) && between(d.startYear, searchYear) && between(Math.min(d.runtimeMinutes, maxRuntime), searchRuntime) && (searchGenres.length === 0 ? true : searchCombineGenre ? searchGenres.every((r) => d.genres.split(",").indexOf(r) >= 0) : searchGenres.some((r) => d.genres.split(",").indexOf(r) >= 0)) ) .sort(defaultSort) .slice(0, maxResults) .map( ({ tconst, primaryTitle, startYear, genres, runtimeMinutes, numVotes, averageRating }) => ({ tconst, primaryTitle, startYear, genres, runtimeMinutes: +runtimeMinutes, averageRating: +averageRating, numVotes: +numVotes }) ); const movieTable = (data) => { return table( data.map(({ tconst, primaryTitle, ...d }) => ({ tconst, primaryTitle, watched: primaryTitle, ...d })), { sortable: true, paged: 1000, columns: { tconst: { title: "", formatter(val, i) { return html`

`; } }, primaryTitle: { title: "", formatter(val, i) { return html`${val}`; } }, watched: { title: "Watch", formatter(value, i, row) { let elem = html`${ watchList.indexOf(value) >= 0 ? "✅" : "✓" }`; elem.addEventListener("click", () => { if (watchList.indexOf(value) === -1) { addToWatchList(value); } else { removeFromWatchList(value); } }); return elem; } }, startYear: { title: "Released" }, runtimeMinutes: { title: "Runtime" }, numVotes: { title: "Votes", type: "number", formatter(val) { return html`${d3.format(",.0f")( val )}`; } }, averageRating: { title: "Rating", formatter(val, i) { let color = d3 .scaleLinear() .domain([4, 6, 8]) .range(["#f4c8cf", "#f8f8f8", "#c8f4cb"]); return html`${val}`; } } } } ); }; return filteredData.length > 0 ? movieTable(filteredData) : md`### There are no movies matching your criteria 😖`; }4c:[{"id":"e80d780a499d640f3a2bb4f79aa2cf08941a72a1f2f3bb2e7c42428a8309958c55f5964791fe5de3310c7f0eaf34cd20579482d26a3378badb2cf212e39ef9cc","href":"https://static.observableusercontent.com/files/e80d780a499d640f3a2bb4f79aa2cf08941a72a1f2f3bb2e7c42428a8309958c55f5964791fe5de3310c7f0eaf34cd20579482d26a3378badb2cf212e39ef9cc","name":"movies_with_ratings_top_half_vote_count_improved@1.csv","type":"text/csv","lastModified":1586711753957.12,"size":5483809},{"id":"427011254afce1b0853a25f2fde5c7b451509b81230461f7c616b9039f441133f35f35634fc525e1df8a256fdf09fe960483558ab613e5f66610347a585b5bd0","href":"https://static.observableusercontent.com/files/427011254afce1b0853a25f2fde5c7b451509b81230461f7c616b9039f441133f35f35634fc525e1df8a256fdf09fe960483558ab613e5f66610347a585b5bd0","name":"genres@1.csv","type":"text/csv","lastModified":1586711861289.705,"size":2261290}] 47:{"id":"a10f0863fa73ae97","slug":"movies-to-watch-during-quarantine","title":"Movies to watch during quarantine","thumbnail":"6faf07defa5f110ece334e18159668ea2b28b5c7767e31c6bbf61b918e831e7e","access_level":"public","create_time":"$D2020-04-12T03:32:43.548Z","update_time":"$D2022-01-13T23:25:39.477Z","view_time":null,"first_public_time":"$D2020-04-18T18:30:52.184Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"b4d4c6f199c86820","login":"nolanbjohnson","name":"Nolan Johnson","avatar_url":"https://avatars-next.observableusercontent.com/57cd1ae90cfb935890f756de647048aeadeec3cf8dfd56576b3dbd94fafb7906","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":637,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8ce3f003f06f805","login":"nolanbjohnson","name":"Nolan Johnson","avatar_url":"https://avatars-next.observableusercontent.com/57cd1ae90cfb935890f756de647048aeadeec3cf8dfd56576b3dbd94fafb7906","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"b8ce3f003f06f805","login":"nolanbjohnson","name":"Nolan Johnson","avatar_url":"https://avatars-next.observableusercontent.com/57cd1ae90cfb935890f756de647048aeadeec3cf8dfd56576b3dbd94fafb7906","tier":null,"role":"editor"},{"type":"team","id":"b4d4c6f199c86820","login":"nolanbjohnson","name":"Nolan Johnson","avatar_url":"https://avatars-next.observableusercontent.com/57cd1ae90cfb935890f756de647048aeadeec3cf8dfd56576b3dbd94fafb7906","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Movies to watch during quarantine","cells":[{"id":0,"value":"md`# Movies to watch during quarantine`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`**Search ${data.length.toLocaleString(\n undefined\n)} of the most rated films across more than 100 years to find the perfect thing to watch tonight.**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"vl\n .markBar(vlDefaultToolTip)\n .data(data)\n .transform(vl.filter(\"datum.startYear !== '\\N'\"))\n .encode(vl.x().fieldO(\"startYear\"), vl.y().count())\n .height(100)\n .width(width - 200)\n .render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"md`## Search`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"viewof searchRating = rangeSlider({\n min: 0,\n max: 10,\n step: 0.1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, 10],\n title: \"Movies above a specific rating\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"viewof searchYear = rangeSlider({\n min: d3.min(data, d => +d.startYear),\n max: d3.max(data, d => +d.startYear),\n step: 1,\n // Note that values must be specified as array of length 2.\n value: this\n ? this.value\n : [d3.min(data, d => +d.startYear), d3.max(data, d => +d.startYear)],\n title: \"Movies from a specific era\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"viewof searchRuntime = rangeSlider({\n min: 0,\n max: 500,\n step: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, 500],\n title: \"Movies within a specific running time in minutes\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"viewof searchGenres = checkbox({\n title: \"Narrow your selections by genre\",\n options: [...new Set(genres.map(d => d.genre))]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"viewof searchCombineGenre = checkbox({\n description:\n \"Check this box if you want titles that match ALL the genres you select\",\n options: [{ value: true, label: \"Combine Genres\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"viewof searchTitle = text({\n title: \"Search for a specific film\",\n placeholder: \"a fish called...\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"viewof searchWatchList = radio({\n title: \"Watched List\",\n options: [\n { value: \"all\", label: \"Show all movies\" },\n { value: \"watch\", label: \"My Watch List\" },\n { value: \"notwatch\", label: \"Exclude My Watch List\" }\n ],\n value: \"all\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"viewof resetWatchList = button({ value: \"Reset Your Watch List\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`___`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"md`## Notes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`TODO:\n* Incorporate actors and directors in the search feature\n* Image or synopsis from IMDB on title hover\n* More data visualizations of the distribution by rating, year, genre, etc. for smarter searching.\n* TV shows (probably a separate notebook)\n* Movie Awards filter\n* Find movies similar to your \\`watchlist\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`IMDB data here: https://datasets.imdbws.com/\n\n* \\`\\\\N\\` is the null representation, though in the upload it comes through as \\`\\\\\\\\N\\`\n* Downloaded [title basics](https://datasets.imdbws.com/title.basics.tsv.gz), filtered to movies only.\n* Downloaded [ratings](https://datasets.imdbws.com/title.ratings.tsv.gz), combined with titles and took the top half in terms of total vote count. ~~Further improvement would be top half grouped by year so that newer movies aren't disadvantaged~~.\n* Preprocessing done in pandas. Final file size is \\`5MB\\`, and can be attached as a file.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"md`___\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"mutable watchList = {\n resetLocalStorage;\n const savedMovieList =\n JSON.parse(localStorage.getItem(localStorageKey)) || [];\n return savedMovieList;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"resetLocalStorage = {\n resetWatchList;\n await localStorage.removeItem(localStorageKey);\n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"data.filter(d => d.primaryTitle === \"His Girl Friday\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"addToWatchList = movie => {\n const newList = [...new Set([...watchList, movie])];\n\n mutable watchList = newList;\n localStorage.setItem(localStorageKey, JSON.stringify(newList));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"removeFromWatchList = movie => {\n const newList = watchList.filter(d => d !== movie);\n mutable watchList = newList;\n localStorage.setItem(localStorageKey, JSON.stringify(newList));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"localStorageKey = \"movieWatchList\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"data = d3.csvParse(\n await FileAttachment(\n \"movies_with_ratings_top_half_vote_count_improved@1.csv\"\n ).text()\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"genres = d3.csvParse(await FileAttachment(\"genres@1.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"dataColumns(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"dataColumns = data => {\n const columns = Object.keys(data[0]);\n return html`\n \n ${columns.map(\n (col, i) =>\n html``\n )}\n

#	Column	Unique
${i}	${col}	${\n new Set(data.map(d => d[col])).size\n }

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"import { table } from \"@tmcw/tables@513\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"vlDefaultToolTip = ({\n tooltip: {\n content: \"encoding\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import {\n button,\n slider,\n radio,\n checkbox,\n select,\n autoSelect,\n text\n} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"import { rangeSlider } from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"d3@5\", \"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 42:null