Skip to content

Instantly share code, notes, and snippets.

@GerardoFurtado

GerardoFurtado/.block

Created April 4, 2018 04:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GerardoFurtado/cb7048512af17ed3683e79637eee40d7 to your computer and use it in GitHub Desktop.
Save GerardoFurtado/cb7048512af17ed3683e79637eee40d7 to your computer and use it in GitHub Desktop.
Download ZIP
fresh block
Raw
.block
license: mit
Raw
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"
}]
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment