2c:null 2d:["$","title",null,{"children":"A4 Final Version | Claire Xueqi Ren | Observable"}] 32:T1d44,{ // set the dimensions and margins of the graph var margin = {top: 20, right: 20, bottom: 30, left: 80}, width = 1000 - margin.left - margin.right, height = 600 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#my_dataviz") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // append a tooltip object var tooltip = d3.select("#my_dataviz").append("div") .attr("class", "tooltip") .style("display", "none") .style("position", "absolute") .style("text-align", "center") .style("width", "200px") .style("height", "85px") .style("padding", "2px") .style("font", "12px sans-serif") .style("background-color", "white") .style("border", "solid") .style("border-radius", "8px") .style("stroke", "black") .style("opacity", 1) .style("pointer-events", "none"); //Read the data d3.csv("https://raw.githubusercontent.com/haomengchao/haomengchao.github.io/master/movies_modified_2%202.csv").then( function(data) { // Add X axis var x = d3.scaleLinear() .domain([0, 10]) .range([ 0, width -200 ]); var x_axis = d3.axisBottom() .scale(x); svg.append("g") .attr("transform", "translate(0, " + height + ")") .call(x_axis); // Add Y axis var y = d3.scaleLinear() .domain([25000, 115000000]) .range([ height , 2*margin.top]); var y_axis = d3.axisLeft() .scale(y); svg.append("g") .attr("class", "y_axis") .call(y_axis); //add a title svg.append("text") .attr("x", (width / 2)) .attr("y", margin.top) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Budget VS Rating Of IMDB Movies In History"); //add a x-axis title svg.append("text") .attr("x", width-margin.right-200) .attr("y", height-margin.bottom/2) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Rating"); //add a y-axis title svg.append("text") .attr("x", 0) .attr("y", margin.top) .attr("text-anchor", "middle") .style("font-size", "16px") .text("Budget"); // svg.append("text") // .attr("x", 750) // .attr("y", 250) // .attr("text-anchor", "middle") // .style("font-size", "9px") // .text(" * Click on the genre legend to see the only the selected genre"); // //add circle size description // svg.append("text") // .attr("x", 750) // .attr("y", 250) // .attr("text-anchor", "middle") // .style("font-size", "9px") // .text(" * Circle size corresponds to movie populairty relative to eachother"); // Add a scale for bubble size var z = d3.scaleLinear() .domain([0, 230]) .range([5, 40]); // Add a scale for bubble color var myColor = d3.scaleOrdinal() .domain(['Drama', 'Horror', 'Thriller', 'Action', 'Comedy', 'Adventure', 'Romance', 'Crime', 'Animation', 'Fantasy', 'Science Fiction', 'All']) .range(d3.schemePaired); d3.selection.prototype.moveToBack = function() { return this.each(function() { var firstChild = this.parentNode.firstChild; if (firstChild) { this.parentNode.insertBefore(this, firstChild); } }); }; function addCircles(new_data){ var circles = svg.append("g") .selectAll("dot") .data(new_data) .enter() .append("circle") // .filter(function(d) { return d.title_year == year; } ) .attr("cx", function (d) { return x(d.vote_average); } ) .attr("cy", function (d) { return y(d.budget); } ) .attr("r", function (d) { return z(d.popularity); } ) .style("fill", function (d) { return myColor(d.genres); } ) .style("opacity", "0.7") .attr("stroke", "white") .style("stroke-width", "0.5px") .on("click", function(){ d3.select(this).moveToBack(); }) .on("mouseover", function(){ tooltip.style("display", "inline"); }) .on("mousemove", function(d) { tooltip.html("MOVIE INFORMATION:"+"
" + "Movie Title: "+d.movie_title + "
" + "Language: "+d.language + "
" + "Country: "+d.country + "
" + "Duration: "+d.duration) .style("left", 750 + "px") .style("top", 360 + "px"); }) .on("mouseout", function() { tooltip.style("display", "none"); }); return circles; }; function drawplot(new_data) { svg.selectAll("circle").remove(); var circles = addCircles(new_data); circles.exit() .remove(); }; function updateChart(currentyear){ var newData = data.filter(function(d) { return d.title_year == currentyear; }); // recompute density estimation var maxRange = d3.max(newData, function (d) {return parseInt(d.budget);}); y.domain([1000, maxRange]) .range([ height , 2*margin.top]); svg.select(".y_axis") .transition() .duration(1000) .call(y_axis); drawplot(newData); }; function filterChart(selectedGenres) { var currentyear = document.getElementById("show_year").innerText; if (selectedGenres == "All") { updateChart(currentyear); return; } var newData = data.filter(function(d){ return d.genres == selectedGenres && d.title_year == currentyear; }); drawplot(newData); }; updateChart("1994"); var legend_keys = ['Drama', 'Horror', 'Thriller', 'Action', 'Comedy', 'Adventure', 'Romance', 'Crime', 'Animation', 'Fantasy', 'Science Fiction', 'All']; var lineLegend = svg.selectAll(".lineLegend") .data(legend_keys) .enter().append("g") .attr("class","lineLegend") .attr("transform", function (d,i) { return "translate(" +width*0.8 + "," + (i*20)+")"; }); lineLegend.append("text").text(function (d) {return d;}) .attr("transform", "translate(20,10)") //align texts with boxes .on("click", function(d){ return filterChart(d); }); lineLegend.append("rect") .attr("fill", function (d, i) {return myColor(d); }) .attr("width", 10) .attr("height", 10) .on("click", function(d){ return filterChart(d); }); d3.select("#add").on("click",function(){ var currentyear = document.getElementById("show_year").innerText; if (parseInt(currentyear) == 2016) { return; } var newyear = "" + (parseInt(currentyear)+1); updateChart(newyear); d3.select('#show_year').text(newyear); document.getElementById("range1").value = newyear; }); d3.select("#minus").on("click",function(){ var currentyear = document.getElementById("show_year").innerText; if (parseInt(currentyear) == 1927) { return; } var newyear = "" + (parseInt(currentyear)-1); updateChart(newyear); d3.select('#show_year').text(newyear); document.getElementById("range1").value = newyear; }); // Add an event listener to the button created in the html part d3.select("#range1").on("change", function(d){ var currentyear = this.value; updateChart(currentyear); d3.select('#show_year').text(currentyear); }); }); }33:[] 30:{"id":"ff490b6cf77cacc3","slug":"a4-final-version/2","title":"A4 Final Version","thumbnail":"2c8d6d74d11472e92d0eac357d799a8612bd2cdcf9f11e19200caeb20a58349d","access_level":"public","create_time":"$D2019-03-26T01:10:49.242Z","update_time":"$D2019-03-26T02:02:30.365Z","view_time":null,"first_public_time":"$D2019-03-26T01:51:08.839Z","has_unpublished_edits":null,"fork":{"id":"bcb502e21aeab895","slug":"a4/2","title":"A4","owner":{"id":"5f34e526407a80ba","login":"janilllema","name":"Janill Lema "}},"stars":0,"starred":false,"owner":{"type":"team","id":"6b579d71a5a94066","login":"clairexueqi","name":"Claire Xueqi Ren","avatar_url":"https://avatars-next.observableusercontent.com/1b2b1d49293ec83911e9e4f58fa3361b981e7fbd601b6198d3c986ad1f4a3807","tier":"starter_2024"},"version":416,"publish_version":416,"role":null,"authored":false,"authors":[{"type":"individual","id":"8367bce09bb979be","login":"clairexueqi","name":"Claire Xueqi Ren","avatar_url":"https://avatars-next.observableusercontent.com/1b2b1d49293ec83911e9e4f58fa3361b981e7fbd601b6198d3c986ad1f4a3807","tier":null}],"members":[{"type":"individual","id":"8367bce09bb979be","login":"clairexueqi","name":"Claire Xueqi Ren","avatar_url":"https://avatars-next.observableusercontent.com/1b2b1d49293ec83911e9e4f58fa3361b981e7fbd601b6198d3c986ad1f4a3807","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"A4 Final Version","cells":[{"id":161,"value":"md`# A4 Final Version`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"d3 = require(\"d3@5\",\"d3-array@1\", \"d3-color@1\", \"d3-scale-chromatic@1\");\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"html`\n

Year:1994

\n\n\n\n

* Click on the genre legend to see only the selected genre

* Circle size corresponds to movie populairty relative to each other

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"md `## Abandoned Alternative Designs \\n\nThe design we abandoned is another style in choosing the x_axis and y_axis. In the abandoned one, we chose popularities of the movie as x_axis and ratings as the radius of the circle, assuming that since ratings are always between 0 and 10, the size of circles would be stable. However, in the dataset, the movies’ ratings do not vary obviously, and most movies’ ratings are from 5 to 7. Thus it would result in all circles showing in the same size. This display would make it harder to distinguish the differences between movies in ratings, and so we finally choose ratings as x_axis and popularities as radius to solve the problem. \\n\nAlso, initially we wanted each data point to be represented by a star instead of a circle since this ratings are normally represented by stars and this would add to the aesthetic of the visualization. \\n\n $\"1\"$ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md `## Work Split\\n\nAfter deciding what we wanted our final visualization to look like, we came up with different tasks needed to complete it. Tasks included: using pandas to filter the data, recreating the csv based on chosen data, creating the bubble chart, adding the slider in order to filter through different years, creating the legend and its clicking property as well as adding the tooltip to provide movie information. Members then chose a task, researched how to complete it and added it to the visualization. \\n\nMengchao Hao: using pandas to filter the data, recreating the csv based on chosen data\\n\nXueqi Ren: creating the legend and its clicking property, adding the slider\\n\nJanill Lema: creating the bubble chart, adding the tooltip \\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"md `## Technical and Design Challenges \\n\nThe first technical challenge we met was how to import data from csv and how to run the corresponding function, the method we used didn’t work at the beginning. After we read the change log of D3 we found that the version of methods was inconsistent. Then we modified the syntax and it worked. \\n\nThe next challenge was how to change the attribute ‘year’ using a slider. We added a HTML input element and used JavaScript method to read the value. And when updating the dots corresponding to year, we encountered the problem that the old version data won't disappear, and the new dots would be added to the last version of visualization result. So we checked the tutorial of D3.js and figured out the usage of enter() and exit(). After then we could plot new dots instead of overlapping them with old dots.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"md`## Learning from User Testing \\n\nAt first, users were attracted to the colorful circles however they were overwhelmed by the amount of overlaps among the circles. This made it hard for them to make comparisons among the categories. The users did not utilize the legend as it was intended. They did not realize that the text could be clicked on in order to show data points corresponding to the clicked category. Once they were told the genres were clickable, they felt that this feature resolved the issue of “too many overlaps” and made it easier for them to compare movies within each genre. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"md `## Possible Improvements in the Future \\n\nIf we had another week, we would want to create checkboxes instead of simply clicking on the genre legend to display the selected genre. Also, we could use checkboxes to enable selecting multiple genres. \\n\nOn the other hand, since we are displaying four dimensions (budget, rating, popularity, genre) in the visualization, some users might think there are too many dimensions so that it is hard to understand the graph. In our implementation, the genre attribute can be reduced by selecting a specific genre, and we can further reduce dimensionality by adding another checkbox to eliminate the popularity attribute if we could have more time. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"md `## Resources \\n\nBubble plot: \\n\nhttps://www.d3-graph-gallery.com/graph/bubble_color.html \\n\nTooltip: \\n\nhttps://www.d3-graph-gallery.com/graph/interactivity_tooltip.html?fbclid=IwAR044wM5KnJx60_XO8sS8MErtrfM5EcTX0_390SliTviqOOxFeiFabPSvhQ#template \\n\nSlider: \\n\nhttps://www.d3-graph-gallery.com/graph/interactivity_button.html?fbclid=IwAR3ktV3OE3zU6ltVl3JjCakYtpzqaprbE6rdzTB9C_NgYM-qXqzB3ab0jYg#text \\n\nLegend: \\n\nhttps://stackoverflow.com/questions/38954316/adding-legends-to-d3-js-line-charts\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"