28:null 29:["$","title",null,{"children":"True Assignment4 | Mengchao Hao | Observable"}] 2e:T19d3,{ // set the dimensions and margins of the graph var margin = {top: 20, right: 20, bottom: 30, left: 80}, width = 800 - 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("background", "lightsteelblue") .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 ]); 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) .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(["Action","Animation", "Family", "Drama", "Fiction","Foreign","Music","Romance", "Documentary", "Thriller","War"]) .range(d3.schemePaired); var legend_keys = ["Action","Animation", "Family", "Drama", "Fiction","Foreign","Music","Romance", "Documentary", "Thriller","War"] 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.category); } ) .style("opacity", "0.7") .attr("stroke", "white") .style("stroke-width", "2px") .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 y.domain([1000, d3.max(new_data, function (d) { return d.budget;})]).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.category); } ) .style("opacity", "0.7") .attr("stroke", "white") .style("stroke-width", "2px") .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); } // 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":"a4945b9d458fac74","slug":"untitled","title":"True Assignment4","thumbnail":"b43fe622ea8b5134f272d9c72a29541f7a7b75e41c4e46c62c67eb76f7c12a14","access_level":"public","create_time":"$D2019-02-25T03:38:47.415Z","update_time":"$D2019-03-05T22:18:51.445Z","view_time":null,"first_public_time":"$D2019-02-25T21:19:08.117Z","has_unpublished_edits":null,"fork":false,"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":259,"publish_version":259,"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`","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"