2b:null 2c:["$","title",null,{"children":"A4 | Janill Lema | Observable"}] 31:T1c23,{ // 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"); //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", 350 + "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); }); }); }32:[] 2f:{"id":"bcb502e21aeab895","slug":"a4/2","title":"A4","thumbnail":"fc7cf9db5a5ddaea6cbc9cf6d9f1e4a442f81b5f7a44233768d0c0bacddc65cf","access_level":"public","create_time":"$D2019-03-25T22:26:12.249Z","update_time":"$D2019-03-26T01:31:09.090Z","view_time":null,"first_public_time":"$D2019-03-25T22:27:34.195Z","has_unpublished_edits":null,"fork":{"id":"b42ea66d4cf1b9eb","slug":"true-assignment4","title":"A4","owner":{"id":"6b579d71a5a94066","login":"clairexueqi","name":"Claire Xueqi Ren"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5f34e526407a80ba","login":"janilllema","name":"Janill Lema ","avatar_url":"https://avatars-next.observableusercontent.com/719c4a889d970fb7b7eeef894be17b9e145fb77892a9568741ac46d01bf3c56d","tier":"starter_2024"},"version":349,"publish_version":349,"role":null,"authored":false,"authors":[{"type":"individual","id":"4911a68622a760aa","login":"janilllema","name":"Janill Lema ","avatar_url":"https://avatars-next.observableusercontent.com/719c4a889d970fb7b7eeef894be17b9e145fb77892a9568741ac46d01bf3c56d","tier":null}],"members":[{"type":"individual","id":"4911a68622a760aa","login":"janilllema","name":"Janill Lema ","avatar_url":"https://avatars-next.observableusercontent.com/719c4a889d970fb7b7eeef894be17b9e145fb77892a9568741ac46d01bf3c56d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"A4","cells":[{"id":161,"value":"md`# A4`","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

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"