28:null 29:["$","title",null,{"children":"A4 Final Version | Mengchao Hao | Observable"}] 2e:T1bed,{ // 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, 200]) .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 a scale for bubble size var z = d3.scaleLinear() .domain([0, 10]) .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.popularity); } ) .attr("cy", function (d) { return y(d.budget); } ) .attr("r", function (d) { return z(d.vote_average); } ) .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]); var maxpopu = d3.max(newData,function(d){return parseInt(d.popularity);}); x.domain([0, maxpopu]) .range([ 0, width -200 ]); svg.select(".y_axis") .transition() .duration(1000) .call(y_axis); svg.select(".x_axis") .transition() .duration(1000) .call(x_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); }); }); }2f:[] 2c:{"id":"f8783b188d3514a1","slug":"a4-final-version","title":"A4 Final Version","thumbnail":"15c6102fda5d3d2faa09e2c231f8a83d6fd2417d4694e2f266b3cb5e1e11946f","access_level":"public","create_time":"$D2019-03-26T00:04:19.290Z","update_time":"$D2019-04-23T23:50:24.996Z","view_time":null,"first_public_time":"$D2019-03-26T00:43:49.927Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"10a87aa6643742b7","login":"mengchao","name":"Mengchao Hao","avatar_url":"https://avatars-next.observableusercontent.com/75f5900e07162a37139f771e1ffdf1c3f16312e0498184b5e1144d5bb1b93057","tier":"starter_2024"},"version":345,"publish_version":345,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca0cf8b2ba1e9b49","login":"mengchao","name":"Mengchao Hao","avatar_url":"https://avatars-next.observableusercontent.com/75f5900e07162a37139f771e1ffdf1c3f16312e0498184b5e1144d5bb1b93057","tier":null}],"members":[{"type":"individual","id":"ca0cf8b2ba1e9b49","login":"mengchao","name":"Mengchao Hao","avatar_url":"https://avatars-next.observableusercontent.com/75f5900e07162a37139f771e1ffdf1c3f16312e0498184b5e1144d5bb1b93057","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"