D3 Examples - RainEvents

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; }
    #data{    height: 100%;
    overflow-y: scroll;}
  </style>
</head>
​
<body>
 <input type="file" id="file-input" >
   <button id="savecsv" class="btn btn-default btn-xs" onclick="saveToCSV()">Save Selection to File</button>
<div id="file-content"></div>
  <script>
    function readSingleFile(e) {
      var file = e.target.files[0];
      if (!file) {
        return;
      }
      var reader = new FileReader();
      reader.onload = function(e) {
        var contents = e.target.result;
        // Display file content
        //displayContents(contents);
        
        var data = d3.csvParse(contents);
​
          //originalDataLength = data.length;
​
          if (data !== null) {
            loadData (data)
          };
      };
      reader.readAsText(file);
    }
 
    function displayContents(contents) {
      var element = document.getElementById('file-content');
      element.innerHTML = contents;
    }
 
        document.getElementById('file-input').addEventListener('change', readSingleFile, false);
    
    
        
    
    
    var dataPath = "1107431.csv"
    
    
    var vaildRainData = [];
//     vaildRainData.push({DATE:0, RAIN:0});
​
    function loadData (data){
      for (i=1;i<data.length-1;i++) {
        var parseTime = d3.timeParse("%Y%m%d %H:%M");
        var d0 = data[i-1];
        var d1 = data[i];
        var d2 = data[i+1];
​
        var date0 = parseTime(d0.DATE);
        var date1 = parseTime(d1.DATE);
        var date2 = parseTime(d2.DATE);
​
        var rain0 = parseFloat(d0.HPCP).toFixed(2);
        var rain = parseFloat(d1.HPCP).toFixed(2);
//         if(rain>=998){rain = 0.00;}
        if(rain>=998)continue;
​
        var diffHr0 = parseInt(date1-date0)/3600000; //hours
        var diffHr = parseInt(date2-date1)/3600000; //hours
​
        if((diffHr0 != 1) && diffHr ===1){
          //add new in vaildRainData
          
          dateString = date1.toISOString().slice(0,10);
          hourString = date1.toISOString().slice(11,16);
          addNew(dateString+ " "+hourString,rain);
          
          var newobj = {DATE:dateString, RAIN:rain}
          vaildRainData.push(newobj);
          addSpace ()
          
​
        }else if (diffHr0 == 1){
          
          
          if(vaildRainData.length==0){
            dateString = date0.toISOString().slice(0,10);
            hourString = date0.toISOString().slice(11,16);
            addNew(dateString+ " "+hourString,rain);
            
            var newobj = {DATE:dateString, RAIN:rain0}
            vaildRainData.push(newobj);
          }
          
          
          //add to the last of vaildRainData
          var lastData = vaildRainData[vaildRainData.length-1];
          //               console.log(lastData.RAIN)
          lastData.RAIN = (parseFloat(lastData.RAIN) + parseFloat(rain)).toFixed(2);
          //               vaildRainData.pop()
          //vaildRainData.push(lastVaildRainData);
            //addNew(lastData.DATE,lastData.RAIN);
          dateString = date1.toISOString().slice(0,10);
          hourString = date1.toISOString().slice(11,16);
          addNew(dateString+ " "+hourString,rain);
​
        }else{
          dateString = date1.toISOString().slice(0,10);
          hourString = date1.toISOString().slice(11,16);
          if(rain>=0.1){
                        addNew(dateString+ " "+hourString,rain);
          }else{
            addNonEvent(dateString+ " "+hourString,rain);
          }
        }
​
      }
    }
    
    function addNew (date, data){
      var circles = d3.select('#data')
                .append('p').text(date + ' '+data).style("color",'red')
    }
    
    function addNonEvent (date, data){
      var circles = d3.select('#data')
                .append('p').text(date + ' '+data)
    }
    
    function addSpace (){
      var circles = d3.select('#data')
                .append('p').text(vaildRainData.length + '--------------NEW EVENT--------------')
    }
    function saveToCSV() {
​
            // modified from https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side
                var data = vaildRainData;
            var csvTitle = d3.keys(data[0]);
​
            var csvContent = "data:attachment/csv;charset=utf-8,";
            var scidIndex = csvTitle.indexOf("scid");
            csvTitle.splice(scidIndex, 1);
​
            csvContent += csvTitle.join(",") + "\n"; //add first row
​
            data.forEach(function (infoArray, index) {
                dataString = d3.values(infoArray);
                dataString.splice(scidIndex, 1);
                dataString = dataString.join(",");
                csvContent += index < data.length ? dataString + "\n" : dataString;
​
            });
​
            csvContent = encodeURI(csvContent);
​
            var a = d3.select("body")
                .append("a")
                .attr("href", csvContent)
                .attr("target", '_blank')
                .attr("download", 'DesignExplorer_SelectedResults.csv');
​
            a[0][0].click();
        }
    console.log(vaildRainData);
​
  </script>
  <div id = "data"></div>
</body>
​
    