28:null 29:["$","title",null,{"children":"True Assignment4 | Mengchao Hao | Observable"}] 2e:T1cf2,{ // 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; 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", "70px") .style("padding", "2px") .style("font", "12px sans-serif") .style("visibility", "visiable") .style("border", "0px") .style("border-radius", "8px") .style("pointer-events", "none"); // 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 + ")"); //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 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,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 Firction' ]) .range(d3.schemePaired); var legend_keys = ['Drama', 'Horror', 'Thriller', 'Action', 'Comedy', 'Adventure', 'Romance', 'Crime', 'Animation', 'Fantasy', 'Science Firction' ] 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 lineLegend.append("rect") .attr("fill", function (d, i) {return myColor(d); }) .attr("width", 10) .attr("height", 10); d3.selection.prototype.moveToBack = function() { return this.each(function() { var firstChild = this.parentNode.firstChild; if (firstChild) { this.parentNode.insertBefore(this, firstChild); } }); }; // Add dots svg.append('g') .selectAll("dot") .data(data) .enter() .append("circle") .filter(function(d) { return d.title_year ==1994 }) .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 title:"+d.movie_title + "
" + "Language:"+d.language + "
" + "Country:"+d.country + "
" + "Duration:"+d.duration) .style("left", (d3.event.pageX-115) + "px") .style("top", (d3.event.pageY-184) + "px"); }) .on("mouseout", function() { tooltip.style("display", "none"); }); function drawplot(new_data) { // recompute density estimation var maxRange = d3.max(new_data, function (d) {return parseInt(d.budget);}); // console.log(maxRange); y.domain([1000, maxRange]) .range([ height , 2*margin.top]); svg.select(".y_axis") .transition() .duration(1000) .call(y_axis); svg.selectAll("circle").remove(); // update the chart var circles = svg .selectAll("dot") .data(new_data); circles.enter() .append("circle") // .transition() // .duration(1000) .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 title:"+d.movie_title + "
" + "Language:"+d.language + "
" + "Country:"+d.country + "
" + "Duration:"+d.duration) .style("left", (d3.event.pageX-115) + "px") .style("top", (d3.event.pageY-200) + "px"); }) .on("mouseout", function() { tooltip.style("display", "none"); }); circles.exit() .remove(); }; function updateChart(currentyear){ var newData = data.filter(function(d) { return d.title_year == currentyear; }); drawplot(newData); }; 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":"bb76c8a7437dce60","slug":"true-assignment4","title":"True Assignment4","thumbnail":"7203a06efb590ada96e448604cd3f04d7678b086d25e97d108e852a3a2cf5b9d","access_level":"public","create_time":"$D2019-03-05T22:33:06.620Z","update_time":"$D2019-03-07T00:36:28.977Z","view_time":null,"first_public_time":"$D2019-03-05T22:33:08.452Z","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":"10a87aa6643742b7","login":"mengchao","name":"Mengchao Hao","avatar_url":"https://avatars-next.observableusercontent.com/75f5900e07162a37139f771e1ffdf1c3f16312e0498184b5e1144d5bb1b93057","tier":"starter_2024"},"version":302,"publish_version":302,"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":2,"collection":null,"type":"notebook","body":{"title":"True Assignment4","cells":[{"id":161,"value":"md`# True Assignment4`","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"