24:null 25:["$","title",null,{"children":"IMDB Movies ratings | Amal Alabdulkarim | Observable"}] 2a:T10d1,html `

The data we worked with was a comprehensive IMDB dataset, and we modified the data by creating a new database to focus on the specific attributes we wanted to examine (genres, average rating, year). We began our approach by brainstorming ideas on paper, then trying to create each element separately in Observable. We started with a static word cloud, transitioned into a design that included a circle packing graph, sunburst graph, and a zoomable time series. We decided to abandon the word cloud, circle graph, sunburst and chose to use the zoomable time series. We realized area wasn’t the best metric for what we wanted to describe, mainly since we wanted to keep the dimension correlated with the data. When constructing these visualizations, we found it difficult to work with d3 and Observable. We wanted to create a more interactive project by setting up a database on Amazon RDS and a rest API to interactively fetch extra data from the server on user request. Unfortunately, when we tried to call our API from Observable, we were faced with a ‘mixed content error.’ To overcome this issue, we downloaded the JSON response from our API to a Github gist. This issue imposed a content limitation on our project and prevented us from expanding the project with another visualization.

With user testing, the biggest confusion we noticed was the genre legend/selection tool. Since the genre legend/selection tool is placed below the visualization, when the page first loads, the user sees the time series only and has to scroll down to see the tool. This made the visualization confusing without scrolling down, and the selection tool has a double-click that was not very intuitive to the users. If we had another week, we could work to reorient the genre legend/selection tool to be visible without scrolling.

The final visualization is a multi-line time series chart that plots the average rating of all movies in a genre against time. The brush and zoom interaction feature allows the user to view more specific time frames within the data. The genre legend and selection tool will enable the user to display genres on the graph selectively. We also incorporated shortcut buttons to hide all genres, show all genres, and reset the zoom, allowing the user to navigate more quickly and conveniently. Each genre is differentiated by color.

We also created a sunburst diagram (Click to view) to show the genres of all the movies. We chose this diagram because the genre data in the dataset is a hierarchical data where every movie belong to three hierarchical genres. The issue with this graph is it is very slow due to the size of the loaded data. If we had another week, we can try and modify our REST API and add an SSL certificate so we wouldn't need to worry about the size of data. Also, we would be able to link it to the time-series and apply the same filters on it.

Abandoned Designs

Figure 1: Circle Packing Graph

Figure 2: Word Cloud

Figure 3: Sunburst diagram

List of the resources that helped us

`2b:Tfcf,add_data = function(){ //Website used for colors generation:http://phrogz.net/css/distinct-colors.html and https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/ var color = d3.scaleOrdinal(['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080','#ffaa00', '#3aa629', '#40d9ff', '#262b4d', '#290099', '#a486b3', '#ee00ff', '#d9003a' ]); for (var i = 0 ; i < data.length ; i++){ if(data[i][0].genre === 'News' || data[i][0].genre === 'Reality-TV'){ continue; } let defOpactiy = 0; let legendOpacity = 0.2; //let m_opacity = 0; if (data[i][0].genre === 'Action' || data[i][0].genre === 'Horror' || data[i][0].genre === 'Sport'){ defOpactiy = 1; legendOpacity = 1; //m_opacity = 1; //mouse_on.push("#"+data[i][0].genre+"_m") } var d_line = Line_chart.append("path") .datum(data[i]) .attr("class", "line") .attr("id", data[i][0].genre+"_d") .style("stroke", color(i)) .attr("d", line).style("opacity", defOpactiy); var c_line = context.append("path") .datum(data[i]) .attr("class", "line") .attr("id", data[i][0].genre+"_c") .style("stroke", color(i)) .attr("d", line2).style("opacity", defOpactiy); //var mouse_line = mouseG.append("g") // .datum(data[i]) // .attr("class", "mouse-per-line") // .attr("id", data[i][0].genre+"_m"); //mouse_line.append("circle") //.attr("r", 7) //.style("stroke", color(i)) //.style("fill", "none") //.style("stroke-width", "1px") //.style("opacity", "0"); //mouse_line.append("text") //.attr("transform", "translate(10,3)"); //Filter by legend: http://www.d3noob.org/2014/05/show-hide-d3js-element-by-clicking-on.html var series = legend.append('div') .attr('class','legend-clickable') .style("opacity", legendOpacity) .attr('id',data[i][0].genre).on("click", function(){ // Determine if current line is visible var active = d_line.active ? false : true, newOpacity = active ? 0 : 1; legendOpacity = active ? 0.2 : 1; // Hide or show the elements var genre = this.getAttribute("id"); d3.select("#"+genre+"_d").style("opacity", newOpacity); d3.select("#"+genre+"_c").style("opacity", newOpacity); d3.select("#"+genre).style("opacity", legendOpacity); // Update whether or not the elements are active d_line.active = active; //m_opacity = newOpacity; //if(newOpacity == 1){ // mouse_on.push("#"+genre+"_m"); //} //else { // mouse_on.filter(function(value, index, arr){ // return value != "#"+genre+"_m"; // }); //} //console.log(mouse_on); }); series.append('div').attr("class", "series-marker").style("background-color", color(i)); series.append('p').text(data[i][0].genre); } d3.selectAll("#select-all").on("click", select_all); d3.selectAll("#select-none").on("click", select_none); function select_all(){ d3.selectAll(".line").style("opacity", 1); d3.selectAll(".legend-clickable").style("opacity", 1); } function select_none(){ d3.selectAll(".line").style("opacity", 0); d3.selectAll(".legend-clickable").style("opacity", 0.2); } }2c:Td79,brush_and_zoom = function(){ d3.select("#reset-zoom").on("click", reset_zoom); var brush = d3.brushX() .extent([[0, 0], [width, height2]]) .on("brush end", brushed) var zoom_max = (new Date("1918/12/31").getTime()-new Date("2019/1/2").getTime()) / (31536000000), zoom_min = 1; var zoom = d3.zoom() .scaleExtent([zoom_min, zoom_max]) .translateExtent([[0, 0], [width, height]]) .extent([[0, 0], [width, height]]) .on("zoom", zoomed); context.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height2 + ")") .call(xAxis2) context.append("text") .attr("class", "brush-text") .attr("text-anchor", "start") .attr("transform", "translate("+ (0) +","+(height2-(margin2.bottom*1.5))+")") .text('Move the handles to select an interval'); var brush = d3.brushX() .extent([[0, 0], [width, height2]]) .on("brush end", brushed) //sources: https://bl.ocks.org/mbostock/4349545 //https://bl.ocks.org/Fil/2d43867ba1f36a05459c7113c7f6f98a var gBrush = context.append("g") .attr("class", "brush") .call(brush) // style brush resize handle // https://github.com/crossfilter/crossfilter/blob/gh-pages/index.html#L466 var brushResizePath = function(d) { var e = +(d.type == "e"), x = e ? 1 : -1, y = height2/2; return "M" + (.5 * x) + "," + y + "A6,6 0 0 " + e + " " + (6.5 * x) + "," + (y + 6) + "V" + (2 * y - 6) + "A6,6 0 0 " + e + " " + (.5 * x) + "," + (2 * y) + "Z" + "M" + (2.5 * x) + "," + (y + 8) + "V" + (2 * y - 8) + "M" + (4.5 * x) + "," + (y + 8) + "V" + (2 * y - 8); } var handle = gBrush.selectAll(".handle--custom") .data([{type: "w"}, {type: "e"}]) .enter().append("path") .attr("class", "handle--custom") .attr("stroke", "#000") .attr("fill", "#FFF") .attr("cursor", "ew-resize") .attr("d", brushResizePath); gBrush.call(brush.move, [new Date("1/1/2000"), new Date("1/1/2019")].map(x2)); //This interferes with MouseG svg.append("rect") .attr('id','rect-mouse') .attr("class", "zoom") .attr("width", width) .attr("height", height) .attr("transform", "translate(" + margin.left + "," + margin.top + ")") .call(zoom) function zoomed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush var t = d3.event.transform; x.domain(t.rescaleX(x2).domain()); Line_chart.selectAll(".line").attr("d", line); focus.select(".axis--x").call(xAxis); var s = x.range().map(t.invertX, t); context.select(".brush").call(brush.move, s); handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + [ s[i], - height2 / 4] + ")"; }); } function reset_zoom() { d3.select("#rect-mouse").transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } function brushed() { if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom var s = d3.event.selection || x2.range(); x.domain(s.map(x2.invert, x2)); Line_chart.selectAll(".line").attr("d", line); focus.select(".axis--x").call(xAxis); svg.select(".zoom").call(zoom.transform, d3.zoomIdentity .scale(width / (s[1] - s[0])) .translate(-s[0], 0)); handle.attr("display", null).attr("transform", function(d, i) { return "translate(" + [ s[i], - height2 / 4] + ")"; }); } }2d:Ta4e,mouse_movement = function(){ //source: https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91 mouseG.append("path") // this is the black vertical line to follow mouse .attr("class", "mouse-line") .style("stroke", "black") .style("stroke-width", "1px") .style("opacity", "1"); var lines = document.getElementsByClassName('line'); mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas .attr('id','rect-mouse') .attr('width', width) // can't catch mouse events on a g element .attr('height', height) .attr('fill', 'none') .attr('pointer-events', 'all') .on('mouseout', function() { // on mouse out hide line, circles and text d3.select(".mouse-line") .style("opacity", "0"); d3.selectAll(".mouse-per-line circle") .style("opacity", "0"); d3.selectAll(".mouse-per-line text") .style("opacity", "0"); }) .on('mouseover', function() { // on mouse in show line, circles and text d3.select(".mouse-line") .style("opacity", "1"); d3.selectAll(".mouse-per-line circle") .style("opacity", "1"); d3.selectAll(".mouse-per-line text") .style("opacity", "1"); }) .on('mousemove', function() { // mouse moving over canvas var mouse = d3.mouse(this); d3.select(".mouse-line") .attr("d", function() { var d = "M" + mouse[0] + "," + height; d += " " + mouse[0] + "," + 0; return d; }); d3.selectAll(".mouse-per-line") .attr("transform", function(d, i) { console.log(width/mouse[0]) var xDate = x.invert(mouse[0]), bisect = d3.bisector(function(d) { return d.date; }).right, idx = bisect(d.values, xDate); var beginning = 0, end = lines[i].getTotalLength(), target = null; while (true){ target = Math.floor((beginning + end) / 2); var pos = lines[i].getPointAtLength(target); if ((target === end || target === beginning) && pos.x !== mouse[0]) { break; } if (pos.x > mouse[0]) end = target; else if (pos.x < mouse[0]) beginning = target; else break; //position found } d3.select(this).select('text') .text(y.invert(pos.y).toFixed(2)); return "translate(" + mouse[0] + "," + pos.y+")"; }); });}2e:T79c,html ``2f:[] 28:{"id":"fe7b57e21e8b76ca","slug":"movies-ratings-and-runtime-timeseries/2","title":"IMDB Movies ratings","thumbnail":"35011a2e3b0fa912c3e61cc9fc9ddcfc4aafad43336af032f417f7dfcde88990","access_level":"public","create_time":"$D2019-03-23T00:20:53.351Z","update_time":"$D2019-03-26T03:35:05.404Z","view_time":null,"first_public_time":"$D2019-03-23T00:21:44.248Z","fork":{"id":"3f32572aeacf6faf","slug":"movies-ratings-and-runtime-timeseries","title":"Movies ratings and runtime timeseries","owner":{"id":"8955cded1584642b","login":"tanrockstan34","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"745d9f059f19555f","login":"amal994","name":"Amal Alabdulkarim","avatar_url":"https://avatars-next.observableusercontent.com/eb11e3e1d294aecd7b1592d5a8c621e07cc773363b8dc2c9ced732739c69d2bf","tier":"starter_2024"},"version":1340,"publish_version":1340,"role":null,"authored":false,"authors":[{"type":"individual","id":"e615fe64d4444f84","login":"amal994","name":"Amal Alabdulkarim","avatar_url":"https://avatars-next.observableusercontent.com/eb11e3e1d294aecd7b1592d5a8c621e07cc773363b8dc2c9ced732739c69d2bf","tier":null}],"members":[{"type":"individual","id":"e615fe64d4444f84","login":"amal994","name":"Amal Alabdulkarim","avatar_url":"https://avatars-next.observableusercontent.com/eb11e3e1d294aecd7b1592d5a8c621e07cc773363b8dc2c9ced732739c69d2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"IMDB Movies ratings","cells":[{"id":0,"value":"md`# IMDB Movies ratings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1291,"value":"html `Assignment 4 Writeup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1294,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":143,"value":"html `Load Library and Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"//d3 = require('d3')\nd3 = require('d3', 'd3-array@2');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"data = d3.json(\"https://gist.githubusercontent.com/amal994/fc83cc9297a49b866627499f9158c327/raw/05bd136288f77d7e0f87536968d14f73ad064351/gistfile1.txt\").then(function(data) {\n var formatTime = d3.timeParse(\"%a, %d %b %Y %H:%M:%S GMT\");\n data.forEach(function(d) {\n d.year = formatTime(d.year);\n });\n return Array.from(d3.group(data, d => d.genre), ([key, value]) => (value));\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"html `Main GraphData Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"line = d3.line()\n .x(d => x(d.year))\n .y(d => y(d.rating))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":496,"value":"line2 = d3.line()\n .x(function (d) { return x2(d.year) })\n .y(function (d) { return y2(d.rating) })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"clip = svg.append(\"defs\").append(\"svg:clipPath\")\n .attr(\"id\", \"clip\")\n .append(\"svg:rect\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"x\", 0)\n .attr(\"y\", 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":500,"value":"Line_chart = svg.append(\"g\")\n .attr(\"class\", \"focus\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\")\n .attr(\"clip-path\", \"url(#clip)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"focus = svg.append(\"g\")\n .attr(\"class\", \"focus\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"context = svg.append(\"g\")\n .attr(\"class\", \"context\")\n .attr(\"transform\", \"translate(\" + margin2.left + \",\" + margin2.top + \")\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1156,"value":"mouseG = svg.append(\"g\")\n .attr(\"class\", \"mouse-over-effects\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":953,"value":"draw_axes = function(){\n \n focus.append(\"g\")\n .attr(\"class\", \"axis axis--x\")\n .attr(\"transform\", \"translate(0,\" + height + \")\")\n .call(xAxis)\n \n focus.append(\"text\")\n .attr(\"class\", \"x-axis-text\")\n .attr(\"text-anchor\", \"middle\") \n .attr(\"transform\", \"translate(\"+ (width-(margin.right*2)) +\",\"+(height-(margin.bottom/8))+\")\")\n .text('Years (1919-2019)');\n \n \n focus.append(\"g\")\n .attr(\"class\", \"axis axis--y\")\n .call(yAxis)\n \n focus.append(\"text\")\n .attr(\"class\", \"y-axis-text\")\n .attr(\"text-anchor\", \"middle\") \n .attr(\"transform\", \"translate(\"+ (margin.left*1.75) +\",\"+(margin.top)+\")\")\n .text('Average Ratings (0-100)');\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"html ` Brush and Zoom Code: `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":802,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1126,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":816,"value":"render = function(){\n draw_axes();\n add_data();\n brush_and_zoom();\n //mouse_movement();\n \n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":861,"value":"render()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"html `Style`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 29:"$28:body"