Built with blockbuilder.org
Last active
April 4, 2018 04:27
-
-
Save mhaneef50673/0b7304759ccbc1e3ba8cf4aa58e56695 to your computer and use it in GitHub Desktop.
Multi line chart d3 v4 with brush
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[{ | |
"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" | |
}] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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); | |
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() : brush.extent()); | |
focus.selectAll("path.line").attr("d", function(d) { | |
console.log(d); | |
return levelFocus(d); }); | |
//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