530作业
利用D3的散点图画出球队的收入和胜率分布：
1）bootstrap col-md-5分割网页；
2）D3、JS、Javascript
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.dot {
  stroke: #000;
}

div.tooltip {    
    position: absolute;            
    text-align: left;            
    width: 60px;                    
    height: 60px;                
    padding: 5px;
    padding-left: 8px;                
    font: 14px sans-serif;        
    background: lightsteelblue;    
    border: 0px;        
    border-radius: 8px;            
    pointer-events: none;            
}

</style>
<body>

<div class="container">



    <div class="row" style="height:60px; padding-top:20px; z-index:999">
        <select style="width:80px;" class="form-control" id="sel1">
        <option href="javascript:drawTables(2016);" selected>2016</option>
        <option href="javascript:drawTables(2015);">2015</option>
        <option href="javascript:drawTables(2014);">2014</option>
        <option href="javascript:drawTables(2014);">2013</option>
        <option href="javascript:drawTables(2014);">2012</option>
      </select>
    <!--
        <div class="dropdown" style="margin-left:0px;">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">2015
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:drawTables(2014);">2014</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:drawTables(2015);">2015</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:drawTables(2016);">2016</a></li>
    </ul>
  </div>-->
    </div>

    <div class="row" style="height:340px; margin-left:-100px;">
        <div id="rvt" class="col-md-5">

        </div>
        <div class="col-md-1"></div>
        <div id="att" class="col-md-5">

        </div>
    </div>
    <div class="row" style="height:340px; margin-left:-100px;">
        <div id="xxt1" class="col-md-5">

        </div>
        <div class="col-md-1"></div>
        <div id="xxt2" class="col-md-5">

        </div>
    </div>
</div>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

function drawRevenueTable(place, file, year)
{
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 600 - margin.left - margin.right,
    height = 320 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var div = d3.select("body").append("div")    
    .attr("class", "tooltip")                
    .style("opacity", 0);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(d3.range(0, 350, 40));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select(place).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 + ")");

d3.csv(file, function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {
    d.revenue = +d.revenue;
    d.rate = +d.rate;
  });

  //x.domain(d3.extent(data, function(d) { return d.revenue; })).nice();
  //y.domain(d3.extent(data, function(d) { return d.rate; })).nice();
  x.domain([0,350,40]);
  y.domain([0,1]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Annual Revenue");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Winning Rate")

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
    .filter(function(d) {return d.year == year})
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.revenue); })
      .attr("cy", function(d) { return y(d.rate); })
      .style("fill", function(d) { return color(d.species); })
      .on("mouseover", function(d) {        
            div.transition()        
                .duration(200)        
                .style("opacity", .9);        
            div    .html(d.species + "<br/>"  + d.revenue + "<br/>"  + d.rate)    
                .style("left", (d3.event.pageX) + "px")        
                .style("top", (d3.event.pageY - 28) + "px");    
            })                    
        .on("mouseout", function(d) {        
            div.transition()        
                .duration(500)        
                .style("opacity", 0);    
        });
});

}

function drawAttendenceTable(place, file, year)
{
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 600 - margin.left - margin.right,
    height = 320 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var div = d3.select("body").append("div")    
    .attr("class", "tooltip")                
    .style("opacity", 0);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(d3.range(0, 350, 20));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select(place).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 + ")");

d3.csv(file, function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {
    d.attendence = +d.attendence;
    d.rate = +d.rate;
  });

  //x.domain(d3.extent(data, function(d) { return d.revenue; })).nice();
  //y.domain(d3.extent(data, function(d) { return d.rate; })).nice();
  x.domain([0,150,20]);
  y.domain([0,1]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Attendence");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Winning Rate")

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
    .filter(function(d) {return d.year == year})
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.attendence); })
      .attr("cy", function(d) { return y(d.rate); })
      .style("fill", function(d) { return color(d.species); })
      .on("mouseover", function(d) {        
            div.transition()        
                .duration(200)        
                .style("opacity", .9);        
            div    .html(d.species + "<br/>"  + d.attendence + "<br/>"  + d.rate)    
                .style("left", (d3.event.pageX) + "px")        
                .style("top", (d3.event.pageY - 28) + "px");    
            })                    
        .on("mouseout", function(d) {        
            div.transition()        
                .duration(500)        
                .style("opacity", 0);    
        });
});
}

function drawSalaryTable(place, file, year)
{
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 600 - margin.left - margin.right,
    height = 320 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var div = d3.select("body").append("div")    
    .attr("class", "tooltip")                
    .style("opacity", 0);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickValues(d3.range(0, 140, 20));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var svg = d3.select(place).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 + ")");

d3.csv(file, function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {
    d.salary = +d.salary;
    d.rate = +d.rate;
  });

  //x.domain(d3.extent(data, function(d) { return d.revenue; })).nice();
  //y.domain(d3.extent(data, function(d) { return d.rate; })).nice();
  x.domain([0,140,20]);
  y.domain([0,1]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Salary(Million)");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Winning Rate")

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
    .filter(function(d) {return d.year == year})
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.salary); })
      .attr("cy", function(d) { return y(d.rate); })
      .style("fill", function(d) { return color(d.species); })
      .on("mouseover", function(d) {        
            div.transition()        
                .duration(200)        
                .style("opacity", .9);        
            div    .html(d.species + "<br/>"  + d.salary + "<br/>"  + d.rate)    
                .style("left", (d3.event.pageX) + "px")        
                .style("top", (d3.event.pageY - 28) + "px");    
            })                    
        .on("mouseout", function(d) {        
            div.transition()        
                .duration(500)        
                .style("opacity", 0);    
        });
});
}

function drawTables(year)
{
    document.getElementById("rvt").innerHTML = "";
    document.getElementById("att").innerHTML = "";
    document.getElementById("xxt1").innerHTML = "";
    drawRevenueTable("#rvt", "revenue_winning_rate.csv", year);
    drawAttendenceTable("#att", "attendance_winning_rate.csv", year);
    drawSalaryTable("#xxt1", "winning_rate_salary.csv", year);
}
$(function() {

  $('#sel1').on('change', function(){
    var selected = $(this).find("option:selected").val();
    drawTables(selected);
  });

});

drawTables(2016);

</script>


</body>
D3 NBA

results matching ""

No results matching ""
