D3 Examples - random_generator

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  
  <div id="main-wrapper">
    <div id="info">
      <div id="what"></div>
      <div id="whatdesc"></div>
      <div id="who" class="meta"><span id="age"></span> <span id="sex"></span></div>
      <div id="narrative"></div>
      <div id="whenwhere" class="meta">
      <span id="date"></span> <span id="location"></span>
      </div>
      
      <div class="sec"><h3>Fact</h3>True story?</div>
<div class="sec"><h3>Myth</h3>We fooled you?</div>
      
      
    </div>
     <div id="vote">
      <a class="button">Fact</a>
      <a class="button">Myth</a>
    </div>
    
    <div id="nav">
      <a id="next" class="button">Next EU story</a>
    </div>
  </div>
  
  
  <script>
    
// var date_format = d3.time.format("%m/%d/%y");
// var date_in_words = d3.time.format("%B %e, %Y")
    
var articles_by_id = {};
var ids = [];
var weights = [];
var curr_id;
    
    
    var newspapers = {
                "100": { name: "The Sun", img: "Sun.png" },
                "200": { name: "The Daily Express", img: "Daily.png" },
                "300": { name: "The Gardian", img: "Gardian.png" },
                "400": { name: "The BBC", img: "BBC.png" },
                "500": { name: "The Economist", img: "Economist.png" },
                "600": { name: "The LA Times", img: "LA.png" }
          }
 
    
    console.log(newspapers['100'].name)
    
//     import data file 
    d3.tsv("dataEC.tsv", type, function (error, data) {
      if (error) throw error
       console.log(data)
       
       curr_id = getRandomItem(ids, weights)
//        curr_id = 50;
       console.log(articles_by_id[curr_id]);
​
       
       d3.select("#what").on("click", click)
       d3.select("#next").on("click", click)
       
       
       function update() {         
         
         var visit = articles_by_id[curr_id];
        
                  d3.select("#what")
                      .attr("class", "p"+visit.prod1)
                      .style("background-image", function() {
                      if (newspapers[visit.NEWSPAPER].img == "") {
                      return 'url("images/plastic-bag.png")';
                      } else {
                      return 'url("images/'+newspapers[visit.NEWSPAPER].img+'")';
                      }
                      });
                      d3.select("#whatdesc")
                      .text(newspapers[visit.NEWSPAPER].name)
                      .style("background-color", "#cccccc")
                      // .style("color", "#666666")
                      .transition()
                      .duration(1000)
                      .style("background-color", "#ffffff")
                      .style("color", "#000000");
                      d3.select("#age").text(function() {
                      if (visit.age == 216) {
                      return "16-month-old";
                      } else {
                      return "The " + visit.age + " Newspaper said: ";
                      }
                      });
//                       d3.select("#sex").text(visit.sex);
                      d3.select("#narrative").text(visit.narrative);
//                       d3.select("#date").text(date_in_words(visit.trmt_date));
                      // d3.select("#location").text(locations[visit.location]);
     
       } // update //
      
      
      function click () {
                curr_id = getRandomItem(ids, weights);
//               curr_id = 1;
            update();
            console.log("hello")
      }
​
      
    })
    
    function type(d, i) {
      d.weight = +d.weight;
      d.NEWSPAPER = +d.NEWSPAPER;
      
      articles_by_id[d.caseid] = d;
      ids.push(d.caseid);
      weights.push(d.weight);
      
//       console.log(articles_by_id)
      
      
      return d;
    }
    
    function rand(min, max) {
    return Math.random() * (max - min) + min;
    }
    
    function getRandomItem(list, weight) {
        var total_weight = d3.sum(weight);
      
//            console.log(total_weight);
​
        var random_num = rand(0, total_weight);
        var weight_sum = 0;
​
​
        for (var i = 0; i < list.length; i++) {
        weight_sum += weight[i];
        weight_sum = +weight_sum.toFixed(2);
​
        if (random_num <= weight_sum) {
                return list[i];
            }
        }
           
    }
    
    
    
    
    
​
  </script>
</body>
​
    