D3 Examples - finaltest

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html> 
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
 <title>Homework 9</title>
 <head>
  <b><i><h1 align = "center">A beginner's guide to deriving the formula for a successful film.</h1></i></b>
  <p align = "center"><i>a so-called-guide by Yash Kandukuri</i></p>
 </head>
<style>   
  body {font-family: garamond;} 
  .axis {font: 14px garamond;}
  .label {font: 16px garamond;}
​
.tooltip {
  position: absolute;
  width: 150px;
  height: 60px;
  background: #f2f2f2;
  pointer-events: none;
}
</style>
​
<body>
<p><i><u>Disclaimer:</u> I am narrating my observations in the form of a story. I will be using names of people just so that my story progresses. Everything is original and resemblance to any person living or dead is purely coincidental.</i></p><br>
<h3 align = "center">Act 1</h3>
<img src="image for the project.jpeg" alt="ComicStrip" height="600" width="700" align = "center"><br>
<p>As Oliver Silver sat down to write a screenplay, he realized that he couldn't type a word. It was as if the part of his brain that produced ideas had a power breakdown. Suddenly, an 'idea' struck him. Not an idea for a story but for something else. He decided to take some 'inspiration'. He realized that he could analyze existing films and maybe, that could give him ideas. According to him a successful movie is the movie that receives a thumbs up from the audience. However, he also wanted his movie to make money at the box office. He proceeded to check if there is a pattern that would help him write the script for a movie that is going to receive good ratings and be successful.</p><br>
<div><svg id="chart1" width="800" height="400"></svg></div>
 <div><svg id="chart2" width="800" height="400"></svg></div>
  <div><svg id="chart3" width="800" height="400"></svg></div>
  <div><svg id="chart4" width="800" height="400"></svg></div>
  <div><svg id="chart5" width="800" height="400"></svg></div>
  <div><svg id="chart6" width="800" height="400"></svg></div>
  <div><svg id="chart7" width="800" height="400"></svg></div>
  <div><svg id="chart8" width="800" height="400"></svg></div>
<script>
 var svg1 = d3.select("#chart1"), 
    margin = {top: 20, right: 20, bottom: 50, left: 70},
    width = +svg1.attr("width") - margin.left - margin.right,
    height = +svg1.attr("height") - margin.top - margin.bottom;
​
var g1 = svg1.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var colorScale = d3.scaleOrdinal(d3.schemeCategory20);
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
​
// load data
d3.csv("testing.csv", function (d) {
  // change string (from CSV) into number format
  d["popularity"] = +d["popularity"];
  d["log_revenue"] = +d["log_revenue"];
  d["budget"] = +d["budget"];
  return d;
}, function(error, data) {
​
    if (error) throw error;
  
/* 
 * value accessor - returns the value to encode for a given data object.
 * scale - maps value to a visual display encoding, such as a pixel position.
 * map function - maps from data value to display value
 */ 
​
// setup x 
var x1Value = function(d) { return d["popularity"];}, // data -> value
    x1Scale = d3.scaleLinear().range([0, width]),     // value -> display
    x1Map = function(d) { return x1Scale(x1Value(d));}; // data -> display
  
​
// setup y
var y1Value = function(d) { return d["log_revenue"];}, // data -> value
    y1Scale = d3.scaleLinear().range([height, 0]),    // value -> display
    y1Map = function(d) { return y1Scale(y1Value(d));}; // data -> display
  // don't want dots overlapping axis, so add in buffer to data domain
  x1Scale.domain([d3.min(data, x1Value)-1, d3.max(data, x1Value)+1]);
  y1Scale.domain([0, d3.max(data, y1Value)+1]);
​
  // x-axis
  g1.append("g")
        .attr("class", "axis x-axis")
    .attr("transform", "translate(0," + height + ")") // move axis to bottom of chart
    .call(d3.axisBottom(x1Scale));
  
  // x-axis label
  g1.append("text")
    .attr("class", "label")
    .attr("x", width/2)
    .attr("y", height+(margin.bottom*0.75))
    .style("text-anchor", "middle")
    .text("Popularity");
​
  // y-axis
  g1.append("g")
        .attr("class", "axis y-axis")
        .call(d3.axisLeft(y1Scale))
    .selectAll("text")  
     .style("text-anchor", "end")
     .attr("dx", "-.8em")
     .attr("dy", ".15em")
     .attr("transform", "rotate(-45)");
  
  // y-axis label
  g1.append("text") 
    .attr("class", "label")
    .attr("x", 0-(height/2))
    .attr("y", 0-(margin.left*0.55))
    .attr("transform", "rotate(-90)") // rotate text -90 degrees from x, y
    .style("text-anchor", "middle")
    .text("Log of Revenue");
​
  
  // draw dots
  g1.selectAll(".dot")
      .data(data)
      
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", x1Map)
      .attr("cy", y1Map)
      .style("fill", function (d) {
       if (d.revenue > d.budget) {return 'blue';}
              else {return 'red';};})
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)         // ms delay before appearing
               .style("opacity", .8); // tooltip appears on mouseover
          tooltip.html('Name:' + d.title + "<br/> " + 'Year:' + d.release_date + "<br/> " + 'IMDb rating:' + d.vote_average + "<br/>" + 'Revenue:' + d.revenue + "<br/>" + 'Budget:' + d.budget)
               .style("left", (d3.event.pageX + 10) + "px")  // specify x location
               .style("top", (d3.event.pageY - 28) + "px");  // specify y location
            
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0) // disappear on mouseout
               
      });
 });
var svg2 = d3.select("#chart2"), 
    margin = {top: 20, right: 20, bottom: 50, left: 70},
    width = +svg2.attr("width") - margin.left - margin.right,
    height = +svg2.attr("height") - margin.top - margin.bottom;
var g2 = svg2.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var colorScale = d3.scaleOrdinal(d3.schemeCategory20);
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
// load data
d3.csv("runtimevsrating.csv", function (d) {
  // change string (from CSV) into number format
  d["vote_average"] = +d["vote_average"];
  d["runtime"] = +d["runtime"];
  d["revenue"] = +d["revenue"];
  d["budget"]  = +d["budget"];
  return d;
}, function(error, data) {
    if (error) throw error;
  
  
// setup x 
var x2Value = function(d) { return d["vote_average"];}, // data -> value
    x2Scale = d3.scaleLinear().range([0, width]),     // value -> display
    x2Map = function(d) { return x2Scale(x2Value(d));}; // data -> display
  
// setup y
var y2Value = function(d) { return d["runtime"];}, // data -> value
    y2Scale = d3.scaleLinear().range([height, 0]),    // value -> display
    y2Map = function(d) { return y2Scale(y2Value(d));}; // data -> display
  // don't want dots overlapping axis, so add in buffer to data domain
  x2Scale.domain([d3.min(data, x2Value)-1, d3.max(data, x2Value)+1]);
  y2Scale.domain([0, d3.max(data, y2Value)+1]);
  // x-axis
  g2.append("g")
        .attr("class", "axis x-axis")
    .attr("transform", "translate(0," + height + ")") // move axis to bottom of chart
    .call(d3.axisBottom(x2Scale));
  
  // x-axis label
  g2.append("text")
    .attr("class", "label")
    .attr("x", width/2)
    .attr("y", height+(margin.bottom*0.75))
    .style("text-anchor", "middle")
    .text("Rating");
  // y-axis
  g2.append("g")
        .attr("class", "axis y-axis")
        .call(d3.axisLeft(y2Scale));
  
  // y-axis label
  g2.append("text") 
    .attr("class", "label")
    .attr("x", 0-(height/2))
    .attr("y", 0-(margin.left*0.55))
    .attr("transform", "rotate(-90)") // rotate text -90 degrees from x, y
    .style("text-anchor", "middle")
    .text("Runtime");
  
  // draw dots
  g2.selectAll(".dot")
      .data(data)
      
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", x2Map)
      .attr("cy", y2Map)
      .style("fill", function (d) {return colorScale('Blue');})
              
              
      // tooltip
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)         // ms delay before appearing
               .style("opacity", .8); // tooltip appears on mouseover
          tooltip.html('Name of the film:' + d["title"] + "<br/> " + 'Year:' + d.release_date + "<br/> " + 'IMDb rating:' + d.vote_average + "<br/>" + 'Revenue:' + d.revenue + "<br/>" + 'Budget:' + d.budget)
               .style("left", (d3.event.pageX + 10) + "px")  // specify x location
               .style("top", (d3.event.pageY - 28) + "px");  // specify y location
            
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0) // disappear on mouseout
               
      });
 });
  </script>
</body>
</html>
    