D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.axis--x path {
  display: none;
}
​
.lineS {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
  
  .lineS1 {
  fill: none;
  stroke: red;
  stroke-width: 1.5px;
}
  .lineS2 {
  fill: none;
  stroke: Green;
  stroke-width: 1.5px;
}
   .lineS3 {
  fill: none;
  stroke: Green;
  stroke-width: 1.5px;
}
​
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<script>
​
var svg = d3.select("svg"),
    margin = {top: 160, right: 54, bottom: 70, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append ("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  
​
  ///feed in time formatt
var format = d3.timeParse("%Y-%m-%dT%H:%M:%SZ");
​
  /////axis Scale
var x = d3.scaleTime()
    .rangeRound([0, width]);
​
var y0 = d3.scaleLinear()
    .rangeRound([height, 0]);
​
var y1 = d3.scaleLinear()
    .rangeRound([height, 0]);  
  
  var y2 = d3.scaleLinear()
    .rangeRound([height, 0]);  
  var y3 = d3.scaleLinear()
    .rangeRound([height, 0]);
  var y4 = d3.scaleLinear()
    .rangeRound([height, 0]);
  var y5 = d3.scaleLinear()
    .rangeRound([height, 0]);
  var y6 = d3.scaleLinear()
    .rangeRound([height, 0]);
​
  ////create lines
var line = d3.line()
    .x(function(d,i) { return x(d.date); })
    .y(function(d,i) { return y0(d.air); });
  
  var linee = d3.line()
    .x(function(d,i) { return x(d.date); })
    .y(function(d,i) { return y1(d.wind); });
  
  var lineee = d3.line()
    .x(function(d,i) { return x(d.date); })
    .y(function(d,i) { return y2(d.windg); });
var lineeee = d3.line()
    .x(function(d,i) { return x(d.date); })
    .y(function(d,i) { return y3(d.windd); });
  var lineeeee = d3.line()
    .x(function(d,i) { return x(d.date); })
    .y(function(d,i) { return y4(d.humid); });
  var lineeeeee = d3.line()
    .x(function(d,i) { return x(d.date); })
    .y(function(d,i) { return y5(d.solar); });
  var lineeeeeee = d3.line()
    .x(function(d,i) { return x(d.date); })
    .y(function(d,i) { return y6(d.precip); });
  
  ///Zooom???
​
​
​
​
// load the data
d3.json("data2.json", function(error, data) {
​
 var obs = data[0].STATION[0].OBSERVATIONS;
var dates = obs.date_time.map(format);
var wind = obs.wind_speed_set_1 
var windg = obs.wind_gust_set_1 
var windd = obs.wind_direction_set_1 
var humid = obs.relative_humidity_set_1 
var solar = obs.solar_radiation_set_1 
var precip = obs.precip_accum_set_1 
var air = obs.air_temp_set_1.map(function(d){ return +d; });
    
        data.date = dates;
data.air = air;
data.wind=wind;  
  data.windg=windg;
data.windd=windd;
  data.humid=humid;
  data.solar=solar;
  data.precip=precip;
  
​
  // scale the range of the data
 
  x.domain(d3.extent(data.date));
  y0.domain(d3.extent(data.air));
  y1.domain(d3.extent(data.wind));
  y2.domain(d3.extent(data.wind));
  y3.domain(d3.extent(data.windd));
  y4.domain(d3.extent(data.humid));
  y5.domain(d3.extent(data.solar));
  y6.domain(d3.extent(data.precip));
  
  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
​
  g.append("g")
  .attr("id", "blueLine1")
  .attr("class", "lines")
  .call(d3.axisLeft(y0));
  
  g.append("g")
      .attr("class", "lines1")
  .attr("id", "redLine1")
      .attr("transform", "translate( " + width + ", 0 )")
      .call(d3.axisLeft(y1));
  
  g.append("g")
      .attr("class", "lines1")
  .attr("id", "greenLine1")
      .attr("transform", "translate( " + width + ", 0 )")
      .call(d3.axisLeft(y2));
  
  g.append("g")
      .attr("class", "axisRed")
  .attr("id", "redLine2")
  .call(d3.axisRight(y3));
   
  g.append("g")
      .attr("class", "axisRed")
  .attr("id", "redLine2")
      .attr("transform", "translate( " + width + ", 0 )")
      .call(d3.axisRight(y4));
  
   g.append("g")
      .attr("class", "axisRed")
  .attr("id", "redLine2")
      .call(d3.axisRight(y5));
  
   g.append("g")
      .attr("class", "axisRed")
  .attr("id", "Or")
      .attr("transform", "translate( " + width + ", 0 )")
      .call(d3.axisLeft(y6));
  
  data.airTempByDate = data.date.map(function(d, i){
    return {
        date: d,
        air: air[i],
    };
  })
  
  data.airWindByDate = data.date.map(function(d, i){
    return {
        date: d,
        wind: wind[i],
    };
  })
  
  data.airWindgByDate = data.date.map(function(d, i){
    return {
        date: d,
        windg: windg[i],
    };
  })
  
  data.airWinddByDate = data.date.map(function(d, i){
    return {
        date: d,
        windd: windd[i],
    };
  })
  data.airhumidByDate = data.date.map(function(d, i){
    return {
        date: d,
        humid: humid[i],
    };
  })
  data.airsolarByDate = data.date.map(function(d, i){
    return {
        date: d,
        solar: solar[i],
    };
  })
  data.airprecipByDate = data.date.map(function(d, i){
    return {
        date: d,
        precip: precip[i],
    };
  })
​
  g.append("path")
      .datum(data.airTempByDate)
      .attr("class", "lineS")
      .attr("id", "blueLine")
    .attr("d", line);
​
  g.append("path")
      .datum(data.airWindByDate)
      .attr("class", "lineS1")
      .attr("id", "redLine")
      .style("stroke", "red")
      .attr("d", linee);
  g.append("path")
      .datum(data.airWindgByDate)
      .attr("class", "lineS2")
      .attr("id", "greenLine")
      .style("stroke", "green")
      .attr("d", lineee);
  g.append("path")
      .datum(data.airWinddByDate)
      .attr("class", "lineS2")
      .attr("id", "redLine")
      .style("stroke", "pink")
      .attr("d", lineeee);
  g.append("path")
      .datum(data.airhumidByDate)
      .attr("class", "lineS2")
      .attr("id", "redLine")
      .style("stroke", "black")
      .attr("d", lineeeee);
  g.append("path")
      .datum(data.airsolarByDate)
      .attr("class", "lineS2")
      .attr("id", "redLine")
      .style("stroke", "yellow")
      .attr("d", lineeeeee);
  g.append("path")
      .datum(data.airprecipByDate)
      .attr("class", "lineS3")
      .attr("id", "Or")
      .style("stroke", "orange")
      .attr("d", lineeeeeee);
​
  ////off and onn
  
  svg.append("text")
     .attr("x", 0)             
     .attr("y", height + margin.top + 15)    
     .attr("class", "legend")
     .style("fill", "steelblue")         
     .on("click", function(){
       // determine if current line is visible
       var active   = blueLine.active ? false : true,
       newOpacity = active ? 0 : 1;
       // hide or show the elements
       d3.select("#blueLine").style("opacity", newOpacity);
     d3.select("#blueLine1").style("opacity", newOpacity);
       // update whether or not the elements are active
       blueLine.active = active;
     })
     .text("Temp");
​
  // add the red line legend
  svg.append("text")
     .attr("x", 0)             
     .attr("y", height + margin.top + 35)    
     .attr("class", "legend")
     .style("fill", "red")         
     .on("click", function(){
       // determine if current line is visible
       var active   = redLine.active ? false : true,
       newOpacity = active ? 0 : 1;
       // hide or show the elements
       d3.select("#redLine").style("opacity", newOpacity);
     d3.select("#redLine1").style("opacity", newOpacity);
       // update whether or not the elements are active
       redLine.active = active;
     })
     .text("Wind Speed");
svg.append("text")
     .attr("x", 0)             
     .attr("y", height + margin.top + 55)    
     .attr("class", "legend")
     .style("fill", "green")         
     .on("click", function(){
       // determine if current line is visible
       var active   = greenLine.active ? false : true,
       newOpacity = active ? 0 : 1;
       // hide or show the elements
       d3.select("#greenLine").style("opacity", newOpacity);
     d3.select("#greenLine1").style("opacity", newOpacity);
       // update whether or not the elements are active
       greenLine.active = active;
     })
     .text("Wind Gust");
    
    
 
  
});
​
</script>
​
</body>
    