The avatar for @saneef
Saneef H. Ansari
Consultant Designer & Developer
Unlisted
Edited
Nov 27, 2022
Fork of B Movies
2
Insert cell
Insert cell
Insert cell
Insert cell
// BMovies = d3.json("https://legitbackend.wtf/b-movies?limit=200") // the live dataset #dead
Insert cell
BMovies = FileAttachment("b-movies.json").json()
Insert cell
Insert cell
dups = _(BMovies.map(m=> m.id)).countBy().reduce((acc, val, key) => val > 1 ? acc.concat(key) : acc, [])
Insert cell
d2 = dups.map(d=> BMovies.filter(movie=> movie.id == d))
Insert cell
idz = d2.map(d=> d[1]._id) // id to remove, the second one
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof what = Inputs.table(BMovies)
Insert cell
what // view data from slected items in above table,
Insert cell
Insert cell
Insert cell
no_pc = FileAttachment("untitled (4).json").json()

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
production_companies = _.uniq(_.flatten(BMovies.map(m=> m.production_companies.map( g => g.name))))
Insert cell
Insert cell
Insert cell
keys = _.keysIn(BMovies[0])
Insert cell
readableNumbers = d3.format(",.2r") // used to format the million dollar costs to make them readable numbers
Insert cell
# Paths and Images Sizes

**_There could be more than one poster and more than one backdrop._**

An image URL looks like these...
`"https://www.themoviedb.org/t/p/w300_and_h450_bestv2/wKAidKCypwuxtZfZ4iP584PsWXV.jpg"`

<img src="https://www.themoviedb.org/t/p/w300_and_h450_bestv2/ne2xAzlgSaWvBrYGw2LkO8W5pHi.jpg">
<img src="https://www.themoviedb.org/t/p/w300_and_h450_bestv2/wKAidKCypwuxtZfZ4iP584PsWXV.jpg">
<img src="https://www.themoviedb.org/t/p/w300_and_h450_bestv2/5rD3FElz0xjZp9eIi8jEAx7KJoZ.jpg">

`<img src='https://www.themoviedb.org/t/p/w533_and_h300_bestv2/7fxrCa5Pqx1xlnXZjrv0eYuRy9x.jpg' >
`
<img src='https://www.themoviedb.org/t/p/w533_and_h300_bestv2/7fxrCa5Pqx1xlnXZjrv0eYuRy9x.jpg' >


`https://www.themoviedb.org /t/p/w1066_and_h600_bestv2/64Btfwp7JWP7qTloYQcoqDaraN3.jpg`
<img src='https://www.themoviedb.org/t/p/w1066_and_h600_bestv2/64Btfwp7JWP7qTloYQcoqDaraN3.jpg'>

Insert cell
Insert cell
Insert cell
import {Plot} from "@mkfreeman/plot-tooltip"
Insert cell
import {toc} from "@nebrius/indented-toc"
Insert cell
Insert cell
Insert cell
uFuzzy = require('@leeoniya/ufuzzy@0.8.0/dist/uFuzzy.cjs.js').catch(() => window["uFuzzy"])
Insert cell
opts = ({
intraMode:0,
intraIns:1
})
Insert cell
Insert cell
// construct haystack from 'title', "original_title", "tagline", "overview"

haystacked = {

let info

let uf = new uFuzzy(opts);
let idxs = uf.filter(stacked,form.movieSearch);
if (idxs.length <= 1000) {
info = uf.info(idxs, stacked, form.movieSearch);
}
// order is a double-indirection array (a re-order of the passed-in idxs)
// this allows corresponding info to be grabbed directly by idx, if needed

return info
}
Insert cell
// build a stack of all the ascii that can be searched.

stacked = {
let stack = []
BMovies.map( m => {
stack.push(`${m.title} ${m.original_title} ${m.tagline} ${m.overview}`)
})
return stack
}
Insert cell
foundOld = {
let f = [];
for (let i = 0; i < haystacked.idx.length; ++i) {
f.push(BMovies[haystacked.idx[i]]);
}

let what = "";
let order = "";


return _.orderBy(
f,
[
function (o) {
switch (form.sortOrder) {
case "Alphabetic":
what = o.title;
order = "asc";
break;
case "Popularity":
what = o.popularity;
order = "desc";
break;
case "Revenue":
what = o.revenue;
order = "desc";
break;
case "Release Date":
what = o["release date"];
order = "desc";
break;
}
return what;
}
],
order
);
}
Insert cell
found = {
let arr = BMovies;
const { sortOrder } = form;

const order = sortOrder !== "Alphabetic" ? "desc" : "asc";
const keyMap = new Map([
["Alphabetic", "title"],
["Popularity", "popularity"],
["Revenue", "revenue"],
["Release Date", "release date"]
]);

arr = _.orderBy(arr, keyMap.get(sortOrder) ?? keyMap("Alphabetic"), order )

return arr;
}
Insert cell
Insert cell
viewof form = Inputs.form({
movieSearch: Inputs.text({label: "Search"}),
sortOrder: Inputs.radio(["Alphabetic","Popularity", "Revenue","Release Date"], {label: "Sort by ", value: 'Alphabetic'})
})
Insert cell
found
Insert cell
res = {
let scroll = d3.create("div")
scroll.attr('class','scroll')

found.map( f => {
let sdiv = scroll.append('div').attr('class','scroll2')
sdiv.append('strong').text(f.original_title)
sdiv.append('img').attr('src', `https://www.themoviedb.org/t/p/w300_and_h450_bestv2/${f.poster_path}`)
sdiv.append('i').text(f.tagline)
sdiv.append('div').text(`popularity ${f.popularity}`)
sdiv.append('div').text(`$$$ ${f.revenue}`)
})
return scroll.node()
}
Insert cell
<style>

div.scroll {
display: flex;
flex-flow:row;
overflow-x: auto;
height:100%;
}

.scroll2 {
padding: 20px;
color:white;
font-size:22px;
background-color: crimson;
border:1px solid white;
flex:1;
/* -webkit-flex:1; */
text-align:center;
min-width:320px;
max-width:320px;
}
img.scroll{
width: 300px;
margin: 20px 10px;
display: inline;
}
</style>
Insert cell

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.
Learn more