fresh block

.block

license: mit

README.md

Built with blockbuilder.org

forked from mhaneef50673's block: fresh block

data.json

[{
	"key": "Line 1",
	"date": "1-May-12",
	"value": "68.13"
}, {
	"key": "Line 1",
	"date": "30-Apr-12",
	"value": "63.98"
}, {
	"key": "Line 1",
	"date": "27-Apr-12",
	"value": "67.00"
}, {
	"key": "Line 1",
	"date": "26-Apr-12",
	"value": "89.70"
}, {
	"key": "Line 1",
	"date": "25-Apr-12",
	"value": "99.00"
}, {
	"key": "Line 1",
	"date": "24-Apr-12",
	"value": "130.28"
}, {
	"key": "Line 1",
	"date": "23-Apr-12",
	"value": "166.70"
}, {
	"key": "Line 1",
	"date": "20-Apr-12",
	"value": "234.98"
}, {
	"key": "Line 1",
	"date": "19-Apr-12",
	"value": "345.44"
}, {
	"key": "Line 1",
	"date": "18-Apr-12",
	"value": "443.34"
}, {
	"key": "Line 1",
	"date": "17-Apr-12",
	"value": "543.70"
}, {
	"key": "Line 1",
	"date": "16-Apr-12",
	"value": "580.13"
}, {
	"key": "Line 1",
	"date": "13-Apr-12",
	"value": "605.23"
}, {
	"key": "Line 1",
	"date": "12-Apr-12",
	"value": "622.77"
}, {
	"key": "Line 1",
	"date": "11-Apr-12",
	"value": "626.20"
}, {
	"key": "Line 1",
	"date": "10-Apr-12",
	"value": "628.44"
}, {
	"key": "Line 1",
	"date": "9-Apr-12",
	"value": "636.23"
}, {
	"key": "Line 1",
	"date": "5-Apr-12",
	"value": "633.68"
}, {
	"key": "Line 1",
	"date": "4-Apr-12",
	"value": "629.32"
}, {
	"key": "Line 1",
	"date": "3-Apr-12",
	"value": "618.63"
}, {
	"key": "Line 1",
	"date": "2-Apr-12",
	"value": "599.55"
}, {
	"key": "Line 1",
	"date": "30-Mar-12",
	"value": "609.86"
}, {
	"key": "Line 1",
	"date": "29-Mar-12",
	"value": "617.62"
}, {
	"key": "Line 1",
	"date": "28-Mar-12",
	"value": "614.48"
}, {
	"key": "Line 1",
	"date": "27-Mar-12",
	"value": "606.98"
}, {
	"key": "Line 1",
	"date": "26-Mar-12",
	"value": "616.98"
}, {
	"key": "Line 2",
	"date": "1-May-12",
	"value": "34.12"
}, {
	"key": "Line 2",
	"date": "30-Apr-12",
	"value": "45.56"
}, {
	"key": "Line 2",
	"date": "27-Apr-12",
	"value": "67.89"
}, {
	"key": "Line 2",
	"date": "26-Apr-12",
	"value": "78.54"
}, {
	"key": "Line 2",
	"date": "25-Apr-12",
	"value": "89.23"
}, {
	"key": "Line 2",
	"date": "24-Apr-12",
	"value": "99.23"
}, {
	"key": "Line 2",
	"date": "23-Apr-12",
	"value": "101.34"
}, {
	"key": "Line 2",
	"date": "20-Apr-12",
	"value": "122.34"
}, {
	"key": "Line 2",
	"date": "19-Apr-12",
	"value": "134.56"
}, {
	"key": "Line 2",
	"date": "18-Apr-12",
	"value": "160.45"
}, {
	"key": "Line 2",
	"date": "17-Apr-12",
	"value": "180.34"
}, {
	"key": "Line 2",
	"date": "16-Apr-12",
	"value": "210.23"
}, {
	"key": "Line 2",
	"date": "13-Apr-12",
	"value": "223.45"
}, {
	"key": "Line 2",
	"date": "12-Apr-12",
	"value": "201.56"
}, {
	"key": "Line 2",
	"date": "11-Apr-12",
	"value": "212.67"
}, {
	"key": "Line 2",
	"date": "10-Apr-12",
	"value": "310.45"
}, {
	"key": "Line 2",
	"date": "9-Apr-12",
	"value": "350.45"
}, {
	"key": "Line 2",
	"date": "5-Apr-12",
	"value": "410.23"
}, {
	"key": "Line 2",
	"date": "4-Apr-12",
	"value": "430.56"
}, {
	"key": "Line 2",
	"date": "3-Apr-12",
	"value": "460.34"
}, {
	"key": "Line 2",
	"date": "2-Apr-12",
	"value": "510.34"
}, {
	"key": "Line 2",
	"date": "30-Mar-12",
	"value": "534.23"
}, {
	"key": "Line 2",
	"date": "29-Mar-12",
	"value": "578.23"
}, {
	"key": "Line 2",
	"date": "28-Mar-12",
	"value": "590.12"
}, {
	"key": "Line 2",
	"date": "27-Mar-12",
	"value": "560.34"
}, {
	"key": "Line 2",
	"date": "26-Mar-12",
	"value": "580.12"
}, {
	"key": "Line 3",
	"date": "1-May-12",
	"value": "50.13"
}, {
	"key": "Line 3",
	"date": "30-Apr-12",
	"value": "40.13"
}, {
	"key": "Line 3",
	"date": "27-Apr-12",
	"value": "72.00"
}, {
	"key": "Line 3",
	"date": "26-Apr-12",
	"value": "71.00"
}, {
	"key": "Line 3",
	"date": "25-Apr-12",
	"value": "95.00"
}, {
	"key": "Line 3",
	"date": "24-Apr-12",
	"value": "37.00"
}, {
	"key": "Line 3",
	"date": "23-Apr-12",
	"value": "120.00"
}, {
	"key": "Line 3",
	"date": "20-Apr-12",
	"value": "112.00"
}, {
	"key": "Line 3",
	"date": "19-Apr-12",
	"value": "114.87"
}, {
	"key": "Line 3",
	"date": "18-Apr-12",
	"value": "175.00"
}, {
	"key": "Line 3",
	"date": "17-Apr-12",
	"value": "250.00"
}, {
	"key": "Line 3",
	"date": "16-Apr-12",
	"value": "300.00"
}, {
	"key": "Line 3",
	"date": "13-Apr-12",
	"value": "750.00"
}, {
	"key": "Line 3",
	"date": "12-Apr-12",
	"value": "275.00"
}, {
	"key": "Line 3",
	"date": "11-Apr-12",
	"value": "150.00"
}, {
	"key": "Line 3",
	"date": "10-Apr-12",
	"value": "240.00"
}, {
	"key": "Line 3",
	"date": "9-Apr-12",
	"value": "400.00"
}, {
	"key": "Line 3",
	"date": "5-Apr-12",
	"value": "395.00"
}, {
	"key": "Line 3",
	"date": "4-Apr-12",
	"value": "375.00"
}, {
	"key": "Line 3",
	"date": "3-Apr-12",
	"value": "500.00"
}, {
	"key": "Line 3",
	"date": "2-Apr-12",
	"value": "550.00"
}, {
	"key": "Line 3",
	"date": "30-Mar-12",
	"value": "600.00"
}, {
	"key": "Line 3",
	"date": "29-Mar-12",
	"value": "500.00"
}, {
	"key": "Line 3",
	"date": "28-Mar-12",
	"value": "600.00"
}, {
	"key": "Line 3",
	"date": "27-Mar-12",
	"value": "650.00"
}, {
	"key": "Line 3",
	"date": "26-Mar-12",
	"value": "610.00"
}]

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    /* Styles go here */

svg {
  font: 10px sans-serif;
}

path { 
    stroke-width: 1;
    fill: none;
}

#Line1, #Nebo1D {
    stroke: #009390;
}

#Line1Legend, #Nebo1DLegend {
    fill: #009390;
}

#Line2, #Nebo2D {
    stroke: #8dc63f;
}

#Line2Legend, #Nebo2DLegend {
    fill: #8dc63f;
}

#Line3, #Nebo1S {
    stroke: #132d46;
}

#Line3Legend, #Nebo1SLegend {
    fill: #132d46;
}

#Line4, #Nebo2S {
    stroke: #aaa813;
}

#Line4Legend, #Nebo2SLegend {
    fill: #aaa813;
}

#Stream5, #Nebo3 {
    stroke: #619dd4;
}

#Stream5Legend, #Nebo3Legend {
    fill: #619dd4;
}

.pn1d, .pn2d {
  fill: none;
  clip-path: url(#clip);
}

.pn1d {
  stroke: #009390;
}

.pn2d {
  stroke: #1b4164;
}

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

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}
  </style>
</head>

<body>
  <script>
    // Code goes here

var marginFocus = {top: 10, right: 10, bottom: 250, left: 40},
    marginContext = {top: 430, right: 10, bottom: 170, left: 40},
    width = 960 - marginFocus.left - marginFocus.right,
    heightFocus = 650 - marginFocus.top - marginFocus.bottom,
    heightContext = 650 - marginContext.top - marginContext.bottom;
    legendOffset = 550;

let parseTime = d3.timeParse("%d-%b-%y");

var xFocus = d3.scaleTime().range([0, width]),
    xContext = d3.scaleTime().range([0, width]),
    yFocus = d3.scaleLinear().range([heightFocus, 0]),
    yContext = d3.scaleLinear().range([heightContext, 0]);

        var xAxisFocus = d3.axisBottom(xFocus);
        var xAxisContext = d3.axisBottom(xContext); 
        var yAxisFocus = d3.axisLeft(yFocus); 
 
var levelFocus = d3.line()
    .x(function(d) { console.log("level");
                    console.log(d.date); 
                    console.log(xFocus(d.date));
                    return xFocus(d.date); })
    .y(function(d) { return yFocus(d.value); });


var levelContext = d3.line()
    .x(function(d) {
 
      return xContext(d.date); })
    .y(function(d) { return yContext(d.value); });

var svg = d3.select("body").append("svg")
    .attr("width", width + marginFocus.left + marginFocus.right)
    .attr("height", heightFocus + marginFocus.top + marginFocus.bottom);

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", heightFocus);

var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + marginFocus.left + "," + marginFocus.top + ")");

var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + marginContext.left + "," + marginContext.top + ")");

d3.json("data.json", function(error, data) {
    data.forEach(function(d) {
    d.date = parseTime(d.date);
    d.value = +d.value;
    });
    
   //  console.log(data);
 
  xFocus.domain(d3.extent(data.map(function(d) {console.log("domain");
                                                console.log(d); 
                                                return d.date; })));
  yFocus.domain([d3.min(data.map(function(d) { return d.value; })),d3.max(data.map(function(d) { return d.value; }))]);
  xContext.domain(xFocus.domain()); 
  yContext.domain(yFocus.domain());

    // Nest the entries by piezo
    var dataNest = d3.nest()
        .key(function(d) {return d.key;})
        .entries(data);
  
  console.log(dataNest);
  
  var tempArr = [];
    data.map(function(d){
    console.log(d);
    var tempObj = {};
      tempObj.key = d.key;
      
  })
 
    legendSpace = width/dataNest.length; // spacing for legend // ******


  var brush = d3.brushX(xContext)
  //.extent([0, 1])
    .on("brush", brushed);


focus.selectAll("g").data(dataNest)
    .enter()
    .append("g")
    .attr("id", function(d) { return d.key.replace(/\s+/g, '') })  //the replace stuff is getting rid of spaces
    .append("path")
    .attr("class", "line")
    .attr("d", function(d) {console.log(d);  return levelFocus(d.values); });    

context.selectAll("g").data(dataNest)
    .enter()
    .append("g")
    .attr("class", "line")
    .attr("id", function(d) { return d.key.replace(/\s+/g, '') })  //the replace stuff is getting rid of spaces
    .append("path")
    .attr("d", function(d) { return levelContext(d.values); });    

  focus.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + heightFocus + ")")
      .call(xAxisFocus);

  focus.append("g")
      .attr("class", "y axis")
      .call(yAxisFocus);

  context.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + heightContext + ")")
      .call(xAxisContext);

  context.append("g")
      .attr("class", "x brush")
      .call(brush)
    .selectAll("rect")
      .attr("y", -6) 
      .attr("height", heightContext + 7);
  
function brushed() {
  /*console.log(d3.event.selection);  
  console.log(levelFocus);
  console.log(xAxisFocus);
  console.log(xContext); */
  xFocus.domain(d3.event.selection === null ? xContext.domain() : d3.event.selection.map(xContext.invert, xContext));
  focus.selectAll("path.line").attr("d", function(d) { 
  return levelFocus(d.values); }); 
  //focus.select(".x.axis").call(xAxisFocus);
//console.log("brushed");   
  //console.log(d3.event.sourceEvent.type);
  //console.log(d3.event.selection);
}


});



  </script>
</body>