29:null 2a:["$","title",null,{"children":"MOVIE BUDGET AND RATINGS ACROSS THE YEARS | Janill Lema | Observable"}] 2f:T19d9,{ // 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", "visible") .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(["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); }); }); }30:[] 2d:{"id":"5d04beedbade9f62","slug":"movie-budget-and-ratings-across-the-years","title":"MOVIE BUDGET AND RATINGS ACROSS THE YEARS","thumbnail":"d36f812f622f92a4166d6556ec9ce5ed4bd14a9bcc50a559b9325db053ddc83a","access_level":"public","create_time":"$D2019-03-05T16:54:57.481Z","update_time":"$D2019-03-05T22:26:00.298Z","view_time":null,"first_public_time":"$D2019-03-05T16:59:51.057Z","has_unpublished_edits":null,"fork":false,"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":43,"publish_version":43,"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":0,"collection":null,"type":"notebook","body":{"title":"MOVIE BUDGET AND RATINGS ACROSS THE YEARS","cells":[{"id":0,"value":"md`# MOVIE BUDGET AND RATINGS ACROSS THE YEARS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@5\",\"d3-array@1\", \"d3-color@1\", \"d3-scale-chromatic@1\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n

year:1994

\n\n

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