D3 Examples - STUDY GUIDE

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    
  //AVERAGE USING D3.MEAN()   
    
    var avg = d3.mean(array name, function(d) {
      return d.variableyouwantinarray;
    });
    console.log
    
  //AVG WITHOUT D3.MEAN()
    var average = 0
    
    for (i=0; i< states.length; i++){
      average += states[i].population 
    }
    
    average = average / states.length; 
    console.log(average)
    
    var populations = 0;
    var numberofstates = 0;
        states.forEach(function(d){
        populations += d.population;
        numberofstates++;
    })
      
      var mean = populations/numberofstates;
    console.log(mean)
    
    //USING WHILE LOOP
    //while loop can deliberately make something do something indefinetely and sometimes you want that 
    
    var population = 0; 
    var mean = 0;
    var i = 0;
    
    
    while (i< states.length {
           population = population + states[i].population;
           i++;
           })
    
    mean = population/states.length;
    console.log(mean)
    
    //SEARCHING ARRAY FOR CERTAIN ELEMENT
    
    array1.forEach(function(a){
      if (a.location == "East") {
        console.log(a.name)
      }
    })
    
    
    
    //SEARCHING ARRAY FOR A SUBSTRING
    
    array1.forEach(function(a) {
      if (a.location.includes("South"))
        console.log(a.name)
    })
    
    console.log("Problem 2: Print items that are in both arrays")
   
  array3 = ['a','b','c','d'];
  array4 = ['a','c','e','f','g'];
  
  // console.log("first solution:")
  array3.forEach(function (a3) {
    array4.forEach(function (a4) {
      if (a3 == a4){
          console.log(a3)
         }  
      })
 
     })
  
  
    
    
    //USING ITERATION, WHILE LOOP
    
    array2.forEach (function(a) {
      if (array3.includes(c)) {
        return false
      }
      console.log(c)
    })
    
    // Problem 3: 'states' is an array of objects. Sort the array in ascending order
  // by state name, return 0 is a tie 
    
    console.log
    states.sort(function(a,b){
      if(a.name < b.name) return -1;
      if(a.name > b.name) return 1;
      return 0;
    })
    or 
    states.sort(function(a,b){
      return d3.ascending(a.name,b.name)
    })
    
    //EVEN NUMBER
    
    states.forEach(function(i) {
      if (i.population % 2 == 0) {
        console.log(i.name)
      }
    });
    
    //COMBINING ARRAYS
    
    array1.forEach(function(a){
    array2.forEach(function(b){
      if (a.name == b.name) {a.id = b.id}
      console.log(array1)
    })
    })
    
    or maybe array1.push(array2)
    
    array3.forEach(function (c) {
  array4.forEach(function (d) {
      if (c == d) {
         console.log(c)
      }
    })
  })
    
    or 
    
    array3.forEach(function (c) {
    if (array4.includes(c)) {
         console.log(c);
        }
  })
    //BASED ON ASCENDING NUMBERS (POPULATION)
    
    console.log(states.sort(function(a,b){return (a.population)-(b.population)}))
    
    //console.log("") for a space in the console
    
    //CREATING AN HTML TABLE 
    
    function tooltipHtml(n, d){ /* function to create html content string in tooltip div. */
        return "<h4>"+n+"</h4><table>"+
            "<tr><td>Low</td><td>"+(d.low)+"</td></tr>"+
            "<tr><td>Average</td><td>"+(d.avg)+"</td></tr>"+
            "<tr><td>High</td><td>"+(d.high)+"</td></tr>"+
            "</table>";
    }
    
    
    //LOADING A CSV FILE
    
    
    d3.csv("zika_2016.csv", function (data) {
    data.forEach(function (d) {
      //console.log(d);
        zika_data.push({"state": d.state, "cases": +d.cases});  
      
    })
    //console.log(zika_data);
    
    zika_data.forEach(function(d){
        //console.log("d:", d);
  uStatePaths.forEach(function (s) {
        //console.log("s:", s);
        if (d.state == s.n) { 
          d.n = s.n;
            d.d = s.d;
            d.id = s.id;
        }
      })
console.log(zika_data)
  //console.log(zika_data)    
    cases = d.cases;
      
      
      
  //making an array of objects with different keys (n,state,cases,d,color)
      
      sampleData.push({
   n: d.n,
   state: d.state,
   cases: cases,
   path: d.d,
   color:d3.interpolate("#0affda", "#230000")(Math.round(cases)/100)});
    //console.log(d);
        });
      
 //CREATING AN ARRAY WITH DIFFERENT OBJECTS IN IT
      var four_genes = [{"name":"Gene 1","fill": "aquamarine", "direction":"F", "function":"function 1", "start":50, "end":163}
      
  svgEnter = svg.selectAll("rect") //pulls directions from designated svg file
    .data(four_genes) //data binding
    .enter() // Every time there is no flag data when going through the svg file, it does the command 
                        
 //NOT MULTIPLES OF SOMETHING
                        
 someNumbers.forEach(function(i) {
        if (i % 3 === 0){
        
      } else {
        console.log(i)}
    
  });                       
    
 //MAKING A FLAG 
                        
  var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 960)
​
    svg.append("rect")
      .attr("height", 125)
      .attr("width", 200)
      .attr("x", 100)
      .attr("y", 200)
        .attr("fill","white")
        .attr("stroke","black")
    svg.append("circle")
      .attr("r", 40)
        .attr("cx", 200)
        .attr("cy", 262)
        .attr("fill","red")
    
    svg.append("rect")
      .attr("height", 127)
      .attr("width", 200)
      .attr("x", 400)
      .attr("y", 200)
        .attr("fill","darkturquoise")
        .attr("stroke","black")
    
    svg.append("rect")
      .attr("height", 40)
      .attr("width", 200)
      .attr("x", 400)
      .attr("y", 242)
        .attr("fill","gold")
        .attr("stroke","black")
  svg.append("polygon")
        .attr("points","396,198 397,328 490,264")
                               
    
    
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
    svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
                        
                        
                        
 //USING DATAJOIN                       
                        
                        
// Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500);
    
    var flag_data = [{"fill": "blue",  "x": 100, "y": 200},
                     {"fill": "white", "x": 300, "y": 100},
                     {"fill": "red",   "x": 500, "y": 100},
                     {"fill": "orange", "x": 700, "y": 100}];
    
    console.log(flag_data);
​
    svg.selectAll("rect")
        .data(flag_data)
        .enter()
        .append("rect")
        .attr("y", function (d) { return d.y; })
        .attr("x", function(d) { return d.x;})
            .attr("width", 200)
        .attr("height", 400)
        .attr("stroke-width", 1)
        .attr("stroke", "black")
        .attr("fill", function (d) { return d.fill; });
    /*
    svg.append("rect")
      .attr("y", 100)
      .attr("x", 100)
            .attr("width", 200)
        .attr("height", 400)
        .attr("fill", "blue");
​
    svg.append("rect")
      .attr("y", 100)
      .attr("x", 300)
            .attr("width", 200)
        .attr("height", 400)
        .attr("fill", "white");
​
    svg.append("rect")
      .attr("y", 100)
      .attr("x", 500)
            .attr("width", 200)
        .attr("height", 400)
        .attr("fill", "red");
  */
                        
                        
                        
                        
                        
                        
                        
isWithin = function(a, b) {
      x= a.indexOf(b)
      
      if (x == -1) return false
      else return true 
    }
    
    myArray = [4,6,20];
    console.log(isWithin(myArray,6));
    
    console.log('')                        
                        
https://www.nature.com/articles/nbt0904-1177
                        
https://www.nature.com/articles/nbt0804-1035
                        
https://www.nature.com/articles/nbt1004-1315  
      
https://www.w3schools.com/jsref/jsref_operators.asp
      
//MARK INFO
      
   // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
​
    svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
    
    
    
   //Array.indexOf() example from class
    
    console.log('Array.indexOf() Example:')
    
    isWithin = function(a, b) {
      x= a.indexOf(b)
      
      if (x == -1) return false
      else return true 
    }
    
    myArray = [4,6,20];
    console.log(isWithin(myArray,6));
    
    console.log('')
    // Problem 1: modify array1 so that each object it contains includes the 2 letter state "id"
        console.log("Problem 1: Modifying an Array to include data from another Array")
    
    
  array1 = [
                    {name: "Arizona",  location: "Southwest"},
            {name: "Virginia", location: "East"},
            {name: "Florida",  location: "Southeast"}
           ];
    
  array2 = [
            {name: "Virginia", id: "VA"},
                    {name: "Arizona", id: "AZ"},
            {name: "Florida", id: "FL"}
                 ];
  
  array1.forEach(function(a) {
    array2.forEach(function(b) {
      if (a.name == b.name) {
        a.id = b.id;
      }
    })
  })
   console.log(array1)
   console.log('' )
  
  // Problem 2: print all items that are in both array3 
  // and array4 to the console.
  
   console.log("Problem 2: Print items that are in both arrays")
   
  array3 = ['a','b','c','d'];
  array4 = ['a','c','e','f','g'];
  
  // console.log("first solution:")
  array3.forEach(function (a3) {
    array4.forEach(function (a4) {
      if (a3 == a4){
          console.log(a3)
         }  
      })
 
     })
    
    
   console.log('')
  
  // console.log("second solution:")
  console.log("Problem 2 Second Solution:")
  
  array3.forEach(function (x) {
    if (array4.includes(x)) {
         console.log(x);
        }
  })
  console.log('')
  // Problem 3: 'states' is an array of objects. Sort the array in ascending order by population
  
  console.log("Problem 3: Sorting an Array in Ascending Order")
  
  states = [{name: "Alaska", id: "AK", population: 741894},
            {name: "Virginia", id: "VA", population: 8411808},
                    {name: "Arizona", id: "AZ", population: 6931071},
            {name: "Florida", id: "FL", population: 20984400}]
  states.sort(function(a,b){return(a.population-b.population)}); 
    console.log(states)
            
    console.log('')
  
    
    // Problem 4: using console.log() and the appropriate index on the sorted 'states' array, print the state with the smallest population.
            
    console.log("Problem 4:")
    
                console.log(states[0].name)
                
        console.log('')
          
    console.log("Problem 4 Second Solution:")
          //Does the exact same thing when printed to the console.
          console.log(d3.min(states, function (d) {return d.name}))
          
​
    console.log('')
    
    console.log("Problem 5: Loop, Modulus, and Console.log")
  
          
          
  // someNumbers is an array containing all integers from 1-10 inclusively
  someNumbers = d3.range(1,11)
  
  // Problem 5: using console.log(), a loop,and the modulus operator, print those members of someNumbers that are NOT multiples of 3.
        someNumbers.forEach(function (i) {
        if ( i % 3 === 0 ){
          
       }else{
          console.log(i)
        }
      })
    
    
    console.log('')   
  
// Problem 1: search array1 for those states whose location is "East"
  // using console.log(), print just the state name(s).
console.log("Question 1: Searching through an Array")
  array1 = [
                    {name: "Arizona",  location: "Southwest"},
            {name: "Virginia", location: "East"},
            {name: "Florida",  location: "Southeast"}
           ];
                array1.forEach(function (a){
            if (a.location == 'East')
              console.log(a.name)
          })
                    console.log("")
  // Problem 1 cont.: search array1 (above) for those states whose location contains the substring "South"
  // using console.log(), print just the state name(s) for these states.
            
         console.log('Problem 1 Cont: Searching through an Array using a Substring') 
          array1.forEach(function (a){
            if (a.location.includes('South'))
              console.log(a.name)
              })
          console.log("")
  // Problem 2: using iteration and console.log(), print those items that are in
  // array2 but NOT in array3
 console.log("Question 2: Using Iteration Printing Items That Are In One Array But Not The Other")   
  array2 = ['a','b','c', 65, 'd'];
  array3 = ['a','c','e','f','g', 87];
    
    array2.forEach (function (x){
      if (array3.includes(x) ){
        return false
        
      }
        console.log (x)
    })
  
    
    
    
    
  console.log("")
  // Problem 3: 'states' is an array of objects. Sort the array in ascending order
  // by state name
  console.log("Question 3: Sorting an Array In Ascending Order By Name")
  states = [{name: "Alaska", id: "AK", population: 741894},
            {name: "Virginia", id: "VA", population: 8411808},
                    {name: "Arizona", id: "AZ", population: 6931071},
            {name: "Florida", id: "FL", population: 20984400}]
  states.sort(function (a,b) {
    if (a.name < b.name){
      return -1;
    } if (a.name > b.name){
      return 1;
    } 
  });   console.log(states)
  
  console.log('')
  //Another Way to sort by their names.
    
  console.log("Question 3 Second Solution:")
  states.sort(function(a,b){
            return d3.ascending(a.name, b.name) })
    console.log(states)
  
            console.log("")
  // Problem 4: write code that determines which state(s) have a population value that is an even number. Print out the state(s) to the console
        console.log("Question 4: Determing Which State has an Even Population")
            
     states.forEach(function (i){
      if ( i.population % 2 == 0){
        console.log(i)
      }
    })
    
     console.log('')
     
     console.log('Computing Means with Different Methods:')
     
     console.log('')
     
     states = [{name: "Alaska", id: "AK", population: 741894},
            {name: "Virginia", id: "VA", population: 8411808},
                    {name: "Arizona", id: "AZ", population: 6931071},
            {name: "Florida", id: "FL", population: 20984400}]
            
  // Problem 1: using d3.mean(), compute and print the average (mean) 
  // population of the states in the states array
  
   console.log('Question : 1 "d3.mean" Solution')
    
  var population_mean = d3.mean(states, function(i){
    return i.population;
    
  })
 
  console.log(population_mean)
  
  // Problem 2: WITHOUT using d3.mean(), compute and print the average (mean) 
  // population of the states in the states array
  
  console.log('Question : 2 "for" Solution')
  
  var average = 0;
  for(i = 0; i < states.length; i++){
      average += states[i].population;
  }
  average = average / states.length;
  
  console.log(average)
  
  
  //How to do Question 2 with a forEach loop:
  
  console.log('Question : 2 "forEach" Solution')
  
  var populations = 0;
  
  states.forEach(function (d){
    populations += d.population;    
  })
  
    var mean = populations / states.length;
  console.log(mean)
  
  
  
  // How to do Question 2 with a while loop 
  
  console.log('Question : 2 "while" Solution')
  
  var population = 0;
  var mean2 = 0;
  var i = 0;
  
  while(i < states.length) {
    
    population += states[i].population;
    i++;   
  
  }
   
   mean2 = population / states.length
   console.log(mean2)
     
        
    
    
  </script>
</body>
​
    