2d:null 2e:["$","title",null,{"children":"@ratemyskyperoom Room Rating Stats | Eli Holder | Observable"}] 33:T473,moversShakers={ const compareTweetByTs = (l,r)=>{return Date.parse(l.ts) - Date.parse(r.ts)} let risingTweets= Object.entries(userToTweets) .filter(([username,tweets])=>2<=tweets.length) .map(([username,tweets])=>{return [username,tweets.sort(compareTweetByTs)]}) .filter(([username,tweets])=>3<=tweets[tweets.length-1].rating-tweets[0].rating) let fallingTweets= Object.entries(userToTweets) .filter(([username,tweets])=>2<=tweets.length) .map(([username,tweets])=>{return [username,tweets.sort(compareTweetByTs)]}) .filter(([username,tweets])=>2 ${improvementsViz(risingTweets, {title: "Room Ratings Rising", description: "Rating increases over time, per user"})} ${improvementsViz(fallingTweets, {title: "Room Ratings Falling", description: "Rating decreases over time, per user"})} `}34:T653,imageComparisonChoices = { const allTweetIds = ratingTweets.map(t=>t.idStr); return [ {left: {tweetIds: setDifference(allTweetIds, labelToTweetIdStrs.image["animalGroup"]), title: "No Animals", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.image["animalGroup"], title: "Animals", color: colors.green}, range: [0, 0.4]}, {left: {tweetIds: setDifference(allTweetIds, labelToTweetIdStrs.image["bookGroup"]), title: "No Books", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.image["bookGroup"], title: "Books", color: colors.green}, range: [0, 0.3]}, {left: {tweetIds: setDifference(allTweetIds, labelToTweetIdStrs.image["artGroup"]), title: "No Art", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.image["artGroup"], title: "Art", color: colors.green}, range: [0, 0.4]}, {left: {tweetIds: setDifference(allTweetIds, labelToTweetIdStrs.image["plantGroup"]), title: "No Plants", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.image["plantGroup"], title: "Plants", color: colors.green}, range: [0, 0.4]}, {left: {tweetIds: labelToTweetIdStrs.face["male"], title: "Likely Male", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.face["female"], title: "Likely Female", color: colors.green}, range: [0, 0.3]}, ]}35:T9a6,textComparisonChoices = [ {left: {tweetIds: labelToTweetIdStrs.word["lightingBadGroup"], title: "Bad Lighting", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.word["lightingGroup"], title: "Good Lighting", color: colors.green}, range: [0,.3]}, {left: {tweetIds: labelToTweetIdStrs.word["cameraAngleGroup"], title: "Bad Camera Angle", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.word["depth"], title: "\"Depth\"", color: colors.green}, range: [0,.4]}, {left: {tweetIds: labelToTweetIdStrs.word["succulentGroup"], title: "\"Succulents\"", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.word["orchidGroup"], title: "\"Orchids\"", color: colors.green}, range: [0,.4]}, {left: {tweetIds: labelToTweetIdStrs.word["corybooker"], title: "\"CoryBooker\"", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.word["bookGroup"], title: "\"Books\"", color: colors.green}, range: [0,.5]}, {left: {tweetIds: labelToTweetIdStrs.word["hostage"], title: "\"Hostage\"", color: colors.red}, right: {tweetIds: labelToTweetIdStrs.word["historic"], title: "\"Historic\"", color: colors.green}, range: [0,.8]}, {left: {tweetIds: ratingTweets.map(t=>t.idStr), title: "All Ratings", color: colors.gray}, right: {tweetIds: labelToTweetIdStrs.word["pineappleGroup"], title: "\"Pineapples\"", color: colors.green}, range: [0,.5]}, {left: {tweetIds: ratingTweets.map(t=>t.idStr), title: "All Ratings", color: colors.gray}, right: {tweetIds: labelToTweetIdStrs.word["elmo"], title: "\"Elmo\"", color: colors.green}, range: [0,.8]}, {left: {tweetIds: ratingTweets.map(t=>t.idStr), title: "All Ratings", color: colors.gray}, right: {tweetIds: labelToTweetIdStrs.word["wutangGroup"], title: "\"Wu Tang\"", color: colors.green}, range: [0,.5]}, {left: {tweetIds: ratingTweets.map(t=>t.idStr), title: "All Ratings", color: colors.gray}, right: {tweetIds: labelToTweetIdStrs.word["midCenturyGroup"], title: "\"Mid Century\"", color: colors.green}, range: [0,.8]}, ]36:T981,mentionOverride = ({ "1278669814291148800": "SteveRattner", "1278409229917917184": "JeffPassan", "1278291020556492800": "NotahBegay3", "1278037082443833344": "SangerNYT", "1278020854350336001": "dcstudio", "1277420418169700353": "Bob_Casey", "1276960387695550465": "KrisBryant_23", "1276934217943920642": "jwgop", "1276890407985647617": "mschwirtz", "1276654048045871104": "sbg1", // double "1276568392682463232": "sia", "1275879114931687426": "LBJLibrary", "1275442930258292736": "TheRickWilson", "1275277079643291648": "darrenwalker", "1275258257515241472": "tamarakeithNPR", "1275181732938092549": "AGBecerra", "1275153459097022464": "VinGuptaMD", "1274728162031788033": "EricaRHill", "1274720108221542400": "rgoodlaw", "1274514582443261952": "murphymike", "1274159498668634113": "JoeBiden", // double "1273754951194468352": "jonathansfrakes", "1273682961712414723": "ryangrim", "1273334654649552896": "AoDespair", "1273064579908562945": "JoeBiden", // double "1272717976563847168": "nflcommish", "1272706447021916160": "KFILE", "1271795793289195525": "marisatomei", "1271653485969195013": "jimmyfallon", "1271639017629650945": "Dmozaffarian", "1271501705138466816": "agoldennamedkev", "1270905798294679556": "BubbaWallace", "1270720900267032576": "JuddApatow", "1270716763273957376": "RepKinzinger", "1270514825605648386": "BillMoyers", "1270404961323692032": "AharonWasserman", "1270335413367066624": "RepMcCaul", "1270080462547976194": "HilarieBurton", // double "1269420726215479297": "megynkelly", "1269086915418087424": "darrenwalker", "1268002262783328256": "carlbernstein", // double "1267986737994883072": "jwharris", "1267788583622135809": "dkhos", "1267636086555193349": "hannahferrier_", "1267504935215730692": "NASA", "1267267445699620865": "AstroBehnken", "1266866052463460360": "KamalaHarris", "1266452490930851841": "DuckCommanderPR", "1266189419385466880": "paullanglois101", "1265716715779952641": "SpaceX", "1265320516723847170": "SenSherrodBrown", "1265025745799299072": "EricRosengren", "1264581319868256256": "benyt", "1264396490857996289": "BillNye", "1263983349770735618": "CoryBooker", "1263217865194438661": "costareports", "1262896143958147079": "satyanadella", "1262816377485905923": "Dan_Schulman", "1262805583297761283": "radiotalkermike", "1262359448204521475": "bartongellman"})37:T490,tweets = tweetsRaw.map(t=>{ const ratingMatches = t.text.match(/([1]?[0-9])\/10/) const rating = (ratingMatches !== null)? Number.parseInt(ratingMatches[1]) : null const mentions = t.entities.user_mentions.map(u=>u.screen_name) let mention = t.entities.user_mentions.map(u=>u.screen_name)[0] if (t.id_str in mentionOverride) { mention = mentionOverride[t.id_str] } const ts = new Date(Date.parse(t.created_at)).toISOString() let imageUrl = null if ( t.entities.media ) { imageUrl= t.entities.media[0].media_url_https } let imageThumbUrl = null if (imageUrl) { imageThumbUrl = imageUrl + "?format=jpg&name=thumb" } let imageHasMultiplePeople= null if (imageUrl in imageUrlToFaceDetails) { imageHasMultiplePeople = 1{ const formatToken=(token)=>(token.toLowerCase()) return t.text.split(/[^a-zA-Z]/) .filter(word=>0{ return Object.entries(imageUrlToLabels[t.imageUrl]) .filter(([label,{confidence}])=>(59<=confidence)) .map(([label,_])=>label) } const getTweetFaceLabels = (t)=>{ //Just using the first face let faceDetails = (imageUrlToFaceDetails[t.imageUrl]||[])[0] // Skip if no faces if ( !faceDetails ) return [] faceDetails = {...faceDetails, ...faceDetails.emotions} const allFaceLabels = ["eyeglasses","beard","sunglasses","mustache","eyes-open","smile","mouth-open", "calm", "confused", "happy", "surprised", "disgusted", "angry", "sad", "fear"] const faceLabels = allFaceLabels .filter((k)=>(faceDetails[k].value)) .filter((k)=>(70<=faceDetails[k].confidence)) const genderLabel = (80<= faceDetails.gender.confidence) ? faceDetails.gender.value : null const imageBrightnessLabel = (80<= faceDetails["image-quality"].brightness) ? "bright" : "dark" return [...faceLabels, genderLabel, imageBrightnessLabel].filter(x=>x) } const labelIdStrPairs = ratingTweets.map(t=>{ // Extract different types of labels and add psuedo-namespaces for them return [...getTweetTextTokens(t).map(label=>["word", label]), ...getTweetImageLabels(t).map(label=>["image", label]), ...getTweetFaceLabels(t).map(label=>["face", label])] .map(label=>[label, t.idStr]) }).flat() // This is good to go... let output= d3.nest() .key(([[ns, label],idStr])=>ns) .key(([[ns, label],idStr])=>label) .rollup(pairs=>pairs.map(([[ns,label], idStr])=>idStr)) .object(labelIdStrPairs) output= Object.keys(labelGroups).reduce((acc,ns)=>{ const inner = Object.keys(labelGroups[ns]).reduce((innerAcc,groupLabel)=>{ const groupMemberLabels = labelGroups[ns][groupLabel] const groupTweetIdStrs = setUnion(...groupMemberLabels.map(label=>output[ns][label]).filter(x=>x)) return {...innerAcc, [groupLabel + "Group"]: groupTweetIdStrs} },{}) return {...acc, [ns]: {...acc[ns], ...inner}} },output) return output }3a:T8dc,improvementsViz= (tweets, params) => { params = params || {} const title = params.title const description = params.description const {renderedSvg: headerSectionSvg, height: headerSectionHeight} = chartHeaderSection(null, {title, description}) const width = params.width || 400 const rowHeight = 40 const height = rowHeight * tweets.length + rowHeight * 2.5 + headerSectionHeight * 2; const margin = {left: 20, top: 90} const sortByImproveThenFinalThenScale = ([_,lTweets],[l,rTweets])=>{ const lDelta = lTweets[lTweets.length-1].rating - lTweets[0].rating const rDelta = rTweets[rTweets.length-1].rating - rTweets[0].rating const lImproved = lDelta > 0 const rImproved = rDelta > 0 const lMultipler = (lDelta > 0)? 1 : 10 const rMultipler = (rDelta > 0)? 1 : 10 // if (lDelta !== rDelta) return rDelta - lDelta if ( rTweets[rTweets.length-1].rating * lMultipler !== lTweets[lTweets.length-1].rating * rMultipler) return rTweets[rTweets.length-1].rating * lMultipler - lTweets[lTweets.length-1].rating * rMultipler return rDelta - lDelta } const sortByFinal = ([_,lTweets],[l,rTweets])=>{ if (rTweets[rTweets.length-1].rating !== lTweets[lTweets.length-1].rating) return rTweets[rTweets.length-1].rating - lTweets[lTweets.length-1].rating return rTweets[0].rating - lTweets[0].rating } // tweetsToShow= tweetsToShow.sort(sortByImproveThenFinalThenScale) const tweetsToShow= tweets.sort(sortByFinal) return html` ` }3b:Tff9,renderImprovementRow= (tweets, params)=>{ params = params || {} const rowHeight = params.rowHeight || 30 const margin = {left: 0} const twitterUserNameMaxWidth = 80 const width = params.width || 400 const imageWidth= rowHeight* 1.2 const imageHeight = rowHeight const renderAxisTop = params.renderAxisTop || false const renderAxisBottom = params.renderAxisBottom || false const spacing = 10 const scaleWidth = Math.max(0,width-(imageWidth * 2 + spacing * 4 + twitterUserNameMaxWidth)) const x=d3.scaleLinear().domain([1,10]).range([0,scaleWidth]) if (renderAxisTop || renderAxisBottom) { const axisFn = (renderAxisTop) ? d3.axisTop : d3.axisBottom const axis= axisFn(x).tickFormat((n)=>`${n}`) const xAxis = (g) => ( g .attr("transform", `translate(${imageWidth + margin.left},${rowHeight})`) .call(axis)) return svg` ${d3.select(svg``).call(xAxis).node()} ` } const firstRating = tweets[0].rating const lastRating = tweets[tweets.length-1].rating const firstImageUrl = tweets[0].imageUrl + "?format=jpg&name=thumb" const isImproved = firstRating <= lastRating const mentionUserName = tweets[0].mention const ratingChangeText = (((isImproved)? "+" : "") + "" + (lastRating-firstRating)) //https://twitter.com/ratemyskyperoom/status/1277405935779143700 //https://twitter.com/ratemyskyperoom/status/1255870354959949825 const fillClass = (isImproved)? "fill-green" : "fill-red"; const strokeClass = (isImproved)? "stroke-green" : "stroke-red"; // const fillClass = ""; // const strokeClass = ""; return svg` @${mentionUserName} ${firstRating} ${lastRating} ${ ((firstRating !== lastRating)? ( svg`` ) : "") } ` }3c:Tede,tweetsComparisonViz = (leftTweets, rightTweets, params)=>{ params = params || {} const colors = params.colors || [] const leftTitle = params.leftTitle || null const rightTitle = params.rightTitle || null const allRatings = ratingTweets.map(t=>t.rating) const leftTweetRatings = leftTweets.map(t=>t.rating) const rightTweetRatings = rightTweets.map(t=>t.rating) const chartHeight = 180 const chartWidth = 320 const spacing = 32 const margin = {top: 8, left: 0, bottom: 8, right: 8} const height = chartHeight + spacing + 60 const width = 3*(spacing + chartWidth) const cssId = `me${randomId()}` const range = params.range const dscNumFmt=d3.format(",.0f") const domain = [1,10] const thresholds=[1,2,3,4,5,6,7,8,9,10] const compChart= areaHistogramChart([allRatings, leftTweetRatings, rightTweetRatings], { thresholds, domain: [1,10], height: chartHeight, width: chartWidth, xTickFormatFn: (n)=>(Number(n).toFixed(0) + "/10"), title: `${leftTitle} v.s. ${rightTitle}`, colors: ["#eee", ...colors], description: `% of Room Ratings by Score`, range, // description: `${leftAttr} ${d3.mean(leftTweetRatings).toFixed(2)} v.s. ${rightAttr} ${d3.mean(rightTweetRatings).toFixed(2)}` }) const leftChart = tweetRatingHistogramChart(leftTweets, { thresholds, domain: [1,10], height: chartHeight, width: chartWidth, title: `${leftTitle}`, color: colors[0], range, // description: `avg rating: ${d3.mean(leftTweetRatings).toFixed(2)}` description: `% of Room Ratings by Score` }) // console.log(rightTweets) const rightChart = tweetRatingHistogramChart(rightTweets, { thresholds, domain: [1,10], height: chartHeight, width: chartWidth, title: `${rightTitle}`, color: colors[1], range, description: `% of Room Ratings by Score` // description: `avg rating: ${d3.mean(rightTweetRatings).toFixed(2)}` }) return svg` ` return svg` ` return svg` ` }3d:T138b,tweetRatingHistogramChart = ((tweets,params) => { params = params || {} const ratingData = tweets.map(t=>t.rating) const domain = params['domain'] || d3.extent(ratingData) const color = params['color'] || null var histogram = d3.histogram() .domain(domain) .thresholds(params['thresholds']||20); const ratingToTweets = d3.nest().key(t=>t.rating).object(tweets) const plotFn = params["plotFn"] || ((data, params) => { const {x, y, margin} = params; const yMax = d3.max(data.map(d=>d.y)) const yMaxTweets = d3.max(data.map(d=>(ratingToTweets[Number.parseInt(d.x)]||[]).length)) const plotHeight = y(0)-y(yMax) const imageHeight = Math.max(plotHeight / 20, plotHeight / yMaxTweets) const maxImagesNeeded = Math.ceil(plotHeight/imageHeight) const thisId = randomId() const clipId= "id-" + randomId() const imageTileYScale = d3.scaleLinear().domain([0,maxImagesNeeded]).range([y(0), y(yMax)]) const clipPathDefs = svg` ${data.map( (d,i) => ( svg` `))} ` const imageTiles = svg` ${data.map( (d,i) => { const matchingTweets= ratingToTweets[Number.parseInt(d.x)]||[] let tweetIdsToRender = d3.shuffle(matchingTweets.map(t=>t.idStr)) /* weird stuff to correct for off-by-one when there is a low number of matching tweets. It doesn't need to line up perfectly, just need to make sure there's more than enough since we're clipping */ tweetIdsToRender= [...tweetIdsToRender, ...tweetIdsToRender].slice(0, maxImagesNeeded) return svg` ${tweetIdsToRender.map((idStr,i)=>{ const t = idStrToTweet[idStr] const imageUrl = `${t.imageUrl}?format=jpg&name=thumb` return svg` ` })} ` })} ` const topLines = svg` ${data.map( (d,i) => ( svg` ${(0.01<=d.y)? svg` ${d3.format(".0%")(d.y)}`: ""} `))} ` // .series-0 {fill: #1184C4; mix-blend-mode: multiply;} // .series-2 {fill: #EB4137; mix-blend-mode: multiply;}*/ // .series-1 {fill: #40B643; mix-blend-mode: multiply;} // .series-2 {fill: #F76062; mix-blend-mode: multiply;} //fill: ${color}; mix-blend-mode: multiply; fill-opacity: .66; pointer-events: none; return svg` ${clipPathDefs} ${ imageTiles } ${(color)? svg``: ""} ${topLines} ` }) const dataToPlot = histogram(ratingData).map(bin=>({x:bin.x0, y: (bin.length / ratingData.length)})) params = { yTickFormatFn: d3.format(".0%"), xTickFormatFn: (n)=>(n.toFixed(0) + "/10"), ...params, margin: {...params.margin, top: 30}, plotFn, domain: dataToPlot.flat().map(d=>d.x), } return barChart( dataToPlot, params) })//(ratingTweets.filter((t,i)=>i%2==0), {thresholds: [1,2,3,4,5,6,7,8,9,10], width: 600, height: 300, // contextData: ratingTweets, domain: [1,10], // title: "I'm a title", description: "Chart description"})3e:T434,areaHistogramChart = ((data,params) => { params = params || {} const colors = params['colors'] || [] const plotFn = ((data, params) => { const {x, y, margin, seriesIndex} = params; var area = d3.area() .x(function(d) { return x.bandwidth() * 0.5 + x(d.x); }) .y0((d)=>(y(0))) .y1(function(d) { return y(d.y); }) // .curve(d3.curveBasis); return svg` `}) const contextPlotFn = ((data, params) => { const {x, y, margin, seriesIndex} = params; const yMax = d3.max(data.map(d=>d.y)) const xMean = d3.sum(data.map(d=>d.x*d.y)) const xLinScale= d3.scaleLinear() .domain([1,10]) .range(x.range()) return svg` `}) params = { plotFn, contextPlotFn, ...params, } return histogramChart(data, params) })//([1,2,3,4,3,5], {nBins: 10})3f:T50a,chartHeaderSection = ((data, params)=> { const title = params['title'] || null const description = params['description'] || null const margin = params['margin'] || {top: 0, right: 0, bottom: 0, left: 0} const width = params.width * 0.5 const lineSpacing = 12; const titleHeight = (title)? 14 : 0 const descriptionHeight = (description)? 20 : 0 const height = titleHeight + descriptionHeight const classId= `header-section-${Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)}` const renderedSvg = svg` ${title? (svg` ${title}`):""} ${description? (svg` ${description} `):""} ` return {renderedSvg, height: titleHeight + lineSpacing + descriptionHeight} })//([], {title: "hello world", description: "I'm a description"}).renderedSvg40:Tc22,/** * A simple d3 bar chart. */ barChart = ((dataOrSeries, params) => { params = params || {} const dataIsStacked = Array.isArray(dataOrSeries[0]) let series= [] if (dataIsStacked === false) { series = [dataOrSeries] } else { series = dataOrSeries } const title = params['title'] || null const description = params['description'] || null const width = params['width'] || 320 const height = params['height'] || 120 const color = params['color'] || '#1184C4' const classId = params['class'] || "" // const domain = params['domain'] || dataOrSeries.flat().map(d=>d.x) const range = params['range'] || [Math.min(0,d3.min(dataOrSeries.flat().map(d=>d.y))), d3.max(dataOrSeries.flat().map(d=>d.y))] const yMax = range[1] const yMin = range[0] const xTickFormatFn = params.xTickFormatFn || d3.format(".1d") const yTickFormatFn = params.yTickFormatFn || d3.format(".1d") const {renderedSvg: headerSectionSvg, height: headerSectionHeight} = chartHeaderSection(dataOrSeries, params) let margin = {top: 20, right: 0, bottom: 24, left: 30, spacing: 1} margin.top= margin.top + headerSectionHeight const plotHeight = height-margin.top-margin.bottom const plotWidth = width - margin.left - margin.right const defaultPlotFn = ((data, params) => { const {x, y, margin} = params; return data.map( (d,i) => ( svg` `))}) const plotFn = params["plotFn"] || defaultPlotFn const contextPlotFn = params["contextPlotFn"] const x = d3.scaleBand() .domain(series.flat().map(d=>d.x)) .rangeRound([0, plotWidth]); const axisBottom= d3.axisBottom(x).tickFormat(xTickFormatFn) const xAxis = (g) => ( g .attr("transform", `translate(0,${plotHeight})`) .call(axisBottom)) const y = d3.scaleLinear() .domain(range) .range([plotHeight, 0]) const axisLeft = d3.axisLeft(y).tickFormat(yTickFormatFn) const yAxis = (g) => ( g .attr("transform", `translate(${0},${0})`) .call(axisLeft.ticks(5)) // .call(axisLeft.tickValuaes(d3.range(yMin, yMax+1, 1))) .call(axisLeft) ) //viewBox="0 0 ${width} ${height}" return html` ` })41:[{"id":"6689cd6a3e3fb6179e671bc12c3393f774dde3f5e4d0bac62d0687f0378d4fa9d0fb7c0a9c25247f5af8af475b37969376dff6d40756fc53c2f70b4a18923bb7","href":"https://static.observableusercontent.com/files/6689cd6a3e3fb6179e671bc12c3393f774dde3f5e4d0bac62d0687f0378d4fa9d0fb7c0a9c25247f5af8af475b37969376dff6d40756fc53c2f70b4a18923bb7","name":"room-rate-tweets.json","type":"application/json","lastModified":1593737681823.271,"size":12261605},{"id":"bc7f9d19ae43219f6643e53afdbe0a0839098ed83f62d5bb81143021a892ca0f26053a7e1c0fea4eb842cb2ccbd132a4c5000d44f7bcfb5765e52ee9c9cb532b","href":"https://static.observableusercontent.com/files/bc7f9d19ae43219f6643e53afdbe0a0839098ed83f62d5bb81143021a892ca0f26053a7e1c0fea4eb842cb2ccbd132a4c5000d44f7bcfb5765e52ee9c9cb532b","name":"twitter-image-to-aws-face-details@1.json","type":"application/json","lastModified":1594013284273.909,"size":4052959},{"id":"11d35efb202027ecfb440c97cd201ed7c3c9f6f7ab006917d93ab6bd4bfb8af0e872fb2948dc03690c8bb66bf3ceb0d03f131773e755a496e7eababfff59fa1e","href":"https://static.observableusercontent.com/files/11d35efb202027ecfb440c97cd201ed7c3c9f6f7ab006917d93ab6bd4bfb8af0e872fb2948dc03690c8bb66bf3ceb0d03f131773e755a496e7eababfff59fa1e","name":"twitter-image-to-aws-labels@2.json","type":"application/json","lastModified":1594018129885.081,"size":1039153}] 31:{"id":"2a301147843e480d","slug":"ratemyskyperoom-room-rating-stats","title":"@ratemyskyperoom Room Rating Stats","thumbnail":"c4a21be344f59d99ef6c6545d082777310114bb005d25a61239d7b21e562a0aa","access_level":"public","create_time":"$D2020-07-02T03:52:00.011Z","update_time":"$D2020-08-07T05:45:47.902Z","view_time":null,"first_public_time":"$D2020-07-09T05:18:49.747Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"58eacf8e202aa99c","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":"starter_2024"},"version":2845,"publish_version":2845,"role":null,"authored":false,"authors":[{"type":"individual","id":"d17a47a44abf3446","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":null}],"members":[{"type":"individual","id":"d17a47a44abf3446","login":"elibryan","name":"Eli Holder","avatar_url":"https://avatars-next.observableusercontent.com/f42ede38e59d5fab5318c3a05de38dc47c2f88ee4bd796d32ced88733e2b8d50","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"@ratemyskyperoom Room Rating Stats","cells":[{"id":0,"value":"html`

@ratemyskyperoom Room Rating Stats

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2767,"value":"{const height= 200;\n const cellHeight = 50\n const cellWidth = 50\n const numColumns = Math.round(width / cellWidth)\n const numRows = Math.round(width / cellHeight)\n \n const tweetsToRender = choose(ratingTweets, numColumns*numRows, false)\n \n \n return html`\n\n\n`}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2792,"value":"html`

${ratingTweets.length} Room Ratings Analyzed, from ${d3.min(ratingTweets.map(t=>t.ts)).slice(0,10)} to ${d3.max(ratingTweets.map(t=>t.ts)).slice(0,10)}

Elaborate and pointless analysis by @elibryan

\n
\nWriteup is here: Analysis: Winning @ratemyskyperoom\n${(isBrowserFirefox())? html`

Sorry this breaks in Firefox, please try Chrome..

`: \"\" }\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2567,"value":"html`

Overall Distribution

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1530,"value":"roomRaterRatingDistribution=tweetRatingHistogramChart(\n ratingTweets, \n {thresholds: [1,2,3,4,5,6,7,8,9,10], domain: [1,10], \n title: \"@ratemyskyperoom Rating Distribution\", \n description: `Percent of Ratings per Score`,\n color: \"#555\",\n width: 600, height: 300})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2571,"value":"html`Note: Click the images in the chart above to see the original tweets.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"html`

Movers & Shakers

\n\n${Object.entries(mentionCounts).filter(([k,v])=>2<=v).length} people were rated more than once.\n${Object.entries(userToTweets)\n .filter(([username,tweets])=>2<=tweets.length)\n .filter(([username,tweets])=>tweets[0].rating2<=tweets.length)\n .filter(([username,tweets])=>tweets[0].rating>tweets[tweets.length-1].rating).length} people scored worse.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2540,"value":"html`

Findings from AWS Image Recognition v.s. Ratings

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2409,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2414,"value":"imageLabelComparisonCharts={\n const compToShow = imageComparisonChoices[imageComparisonIndexToShow]\n return tweetsComparisonViz(\n compToShow.left.tweetIds.map(idStr=>idStrToTweet[idStr]),\n compToShow.right.tweetIds.map(idStr=>idStrToTweet[idStr]),\n\n {leftTitle: compToShow.left.title,\n rightTitle: compToShow.right.title,\n colors: [compToShow.left.color, compToShow.right.color],\n range: compToShow.range})\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2411,"value":"viewof imageComparisonIndexToShow = {\n\n\n\nreturn radio({\n title: 'Choose Comparison',\n description: 'Please choose a comparison set.',\n options: imageComparisonChoices.map((choice,i)=>({label: `${choice.left.title} v.s. ${choice.right.title}`, value: i})),\n value: 0\n})}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2544,"value":"md`## Findings from Tweet Word usage v.s. Ratings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2299,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2292,"value":"writtenFeedbackComparisonCharts={\n const compToShow = textComparisonChoices[textComparisonIndexToShow]\n return tweetsComparisonViz(\n compToShow.left.tweetIds.map(idStr=>idStrToTweet[idStr]),\n compToShow.right.tweetIds.map(idStr=>idStrToTweet[idStr]),\n\n {leftTitle: compToShow.left.title,\n rightTitle: compToShow.right.title,\n colors: [compToShow.left.color, compToShow.right.color],\n range: compToShow.range})\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2281,"value":"viewof textComparisonIndexToShow = {\n\n\n\nreturn radio({\n title: 'Choose Comparison',\n description: 'Please choose a comparison set.',\n options: textComparisonChoices.map((choice,i)=>({label: `${choice.left.title} v.s. ${choice.right.title}`, value: i})),\n value: 0\n})}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1496,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"tweetsRaw = JSON.parse(await FileAttachment(\"room-rate-tweets.json\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"imageUrlToFaceDetails = JSON.parse(await FileAttachment(\"twitter-image-to-aws-face-details@1.json\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1187,"value":"imageUrlToLabels = JSON.parse(await FileAttachment(\"twitter-image-to-aws-labels@2.json\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"ratingTweets = tweets\n.filter(t=>t.rating)\n.filter(t=>t.imageUrl)\n// .filter(t=>t.imageUrl in imageUrlToFaceDetails)\n// .filter(t=>imageUrlToFaceDetails[t.imageUrl].length == 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2160,"value":"ratingTweetsWithFaces = tweets\n.filter(t=>t.imageUrl in imageUrlToFaceDetails)\n.filter(t=>imageUrlToFaceDetails[t.imageUrl].length == 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"md`## Rollups`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"idStrToTweet = d3.nest().key(t=>t.id_str).rollup(ts=>ts[0]).object(tweets)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2228,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2195,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"userToTweets=d3.nest()\n.key(t=>t.mention)\n.object(ratingTweets.filter(t=>t.mention))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"mentionCounts=d3.nest()\n.key(t=>t.mentions[0])\n.rollup(ts=>ts.length)\n.object(ratingTweets.filter(t=>0 {\n let output= Object.keys(mapToIdStrs).reduce((acc,label)=>{\n\n const tweetIdStrs=mapToIdStrs[label]\n\n const stats = {\n mean: d3.mean(tweetIdStrs.map(idStr=>idStrToTweet[idStr].rating)),\n length: tweetIdStrs.length}\n return {...acc, [label]: stats }\n }, {})\n\n return output\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2181,"value":"\"Calculate stats here\"//Word stats\n//Object.entries(getLabelRatingStats(wordToTweetIdStrs)).filter(([k,v])=>1(lV.mean-rV.mean)).map(([label,stats])=>[label,stats.length, stats.mean])\n// Face Label Stats\n//Object.entries(getLabelRatingStats(faceLabelToTweetIds)).filter(([k,v])=>1(lV.mean-rV.mean)).map(([label,stats])=>[label,stats.length, stats.mean])\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1500,"value":"md`## Charts, Etc.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1561,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1044,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"histogramChart = ((dataOrSeries,params) => {\n params = params || {}\n const domain = params['domain'] || d3.extent(dataOrSeries.flat())\n var histogram = d3.histogram()\n .domain(domain)\n .thresholds(params['thresholds']||20); \n \n const dataIsStacked = Array.isArray(dataOrSeries[0])\n let series= (dataIsStacked) ? dataOrSeries : [dataOrSeries]\n\n const dataToPlot = series.map(curData=>{\n return histogram(curData).map(bin=>({x:bin.x0, y:bin.length / curData.length}))\n })\n \n params = { \n yTickFormatFn: d3.format(\".0%\"),\n xTickFormatFn: (n)=>(Number(n).toFixed(0)),\n ...params,\n domain: dataToPlot.flat().map(d=>d.x),\n }\n\n return barChart( dataToPlot, params)\n})//([1,2,3,4,3,5], {nBins: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"md`## Helper Fns`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"/**\n* Choose with replacement\n**/\nchoose=(arr,n=1, replace=true)=>{\n if (replace == false && arr.length < n) {\n throw \"Can't choose more than arr.length items\"\n }\n let output=[]\n for (let i=0; i{\n return Math.floor(Math.random() * Number.MAX_SAFE_INTEGER) + \"\"}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2250,"value":"//Get union of two or more arrays\nsetUnion=((...arr)=>{\n return Array.from(new Set(arr.flat()))\n})//([1,2,3], [3,4,5,6])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2271,"value":"//Get items in `l` that are not in `r`\nsetDifference=((l,r)=>{\n r = new Set(r)\n return [...l].filter(x => !r.has(x))\n})//([1,2,3], [3,4,5,6])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2815,"value":"setIntersection= ((...arr)=>{\n const flatList = Array.from(new Set(arr.flat()))\n const asSets = arr.map(x=>new Set(x))\n\n return flatList.filter((x)=>{\n return asSets.reduce((acc,nextSet)=>(acc && nextSet.has(x)), true)\n })\n})//([1,2,3], [1,2], [1,4])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2837,"value":"isBrowserFirefox= ()=> {\n return navigator.userAgent.indexOf(\"Firefox\") != -1\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1552,"value":"md`## Colors / Styling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1467,"value":"colors= ({\nred: \"#F76062\",\n green: \"#40B643\",\n blue: \"#1184C4\",\n gray: \"#ddd\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"md`## Includes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"\nd3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2277,"value":"import { radio } from \"@meetamit/multiple-choice-inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2618,"value":"gtag = {\n await require(\"https://www.googletagmanager.com/gtag/js?id=UA-19745547-3\").catch(() => {});\n const dataLayer = window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n await gtag('js', new Date());\n await gtag('config', 'UA-19745547-3', {'page_path': \"/@elibryan/ratemyskyperoom-room-rating-stats\"});\n return function() { dataLayer.push(arguments); };\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W41","stdlib":"1","titling":"auto"}} 32:"$31:body"