Skip to content

Instantly share code, notes, and snippets.

@Umesh-Markande

Umesh-Markande/MultiLineChart.html

Created December 28, 2017 15:06
Show Gist options
  • Save Umesh-Markande/a2dfdda89000cb592b70fb99cda1bd99 to your computer and use it in GitHub Desktop.
Save Umesh-Markande/a2dfdda89000cb592b70fb99cda1bd99 to your computer and use it in GitHub Desktop.
Download ZIP
MultiLine Chart With Interactive Brushable Bar d3.js
Raw
MultiLineChart.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.toolTip {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
width: auto;
height: auto;
background: none repeat scroll 0 0 white;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: black;
font: 12px sans-serif;
padding: 5px;
text-align: center;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.y.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.line {
fill: none;
}
</style>
<body>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {
top : 10,
right : 10,
bottom : 100,
left : 40
}, margin2 = {
top : 430,
right : 10,
bottom : 20,
left : 40
}, width = 470 - margin.left - margin.right, height = 500 - margin.top
- margin.bottom, height2 = 500 - margin2.top - margin2.bottom;
var color = d3.scale.category10();
// var xValues = ['TTT','GGG','EEE','JJJ','BBB','WWW','QQQ'];
// var data = [{"month_year":"OCT-2017","Reinitiating":"29437","New To Market":"121103","Continuing":"11060","Switched":"3786"},{"month_year":"SEP-2017","Continuing":"10193","Reinitiating":"25614","Switched":"3248","New To Market":"101752"},{"month_year":"AUG-2017","New To Market":"104353","Continuing":"10313","Switched":"3124","Reinitiating":"25682"},{"month_year":"JUL-2017","New To Market":"84116","Reinitiating":"22918","Continuing":"9404","Switched":"2610"},{"month_year":"JUN-2017","Reinitiating":"23775","New To Market":"92567","Switched":"2969","Continuing":"9852"},{"month_year":"MAY-2017","New To Market":"96882","Reinitiating":"24707","Continuing":"10536","Switched":"3068"},{"month_year":"APR-2017","Continuing":"10298","Switched":"3043","New To Market":"90954","Reinitiating":"23764"},{"month_year":"MAR-2017","New To Market":"104839","Reinitiating":"26750","Continuing":"11366","Switched":"3544"},{"month_year":"FEB-2017","New To Market":"96118","Switched":"3274","Reinitiating":"24323","Continuing":"10251"},{"month_year":"JAN-2017","Reinitiating":"28061","Continuing":"9582","Switched":"3487","New To Market":"107135"},{"month_year":"DEC-2016","Reinitiating":"30531","Continuing":"11939","Switched":"3683","New To Market":"105693"},{"month_year":"NOV-2016","Reinitiating":"28321","Continuing":"10960","Switched":"3842","New To Market":"108420"},{"month_year":"OCT-2016","Continuing":"10414","Reinitiating":"27228","New To Market":"111294","Switched":"3864"},{"month_year":"SEP-2016","Reinitiating":"25174","Continuing":"9834","New To Market":"101898","Switched":"3512"},{"month_year":"AUG-2016","Switched":"3045","New To Market":"98742","Reinitiating":"24944","Continuing":"9323"},{"month_year":"JUL-2016","Reinitiating":"21549","Switched":"2624","New To Market":"81528","Continuing":"9250"},{"month_year":"JUN-2016","Switched":"2931","Continuing":"9961","New To Market":"89303","Reinitiating":"22736"},{"month_year":"MAY-2016","Continuing":"10277","Switched":"3057","New To Market":"89834","Reinitiating":"22797"},{"month_year":"APR-2016","New To Market":"93088","Reinitiating":"22832","Switched":"3323","Continuing":"10353"},{"month_year":"MAR-2016","New To Market":"100762","Reinitiating":"24937","Continuing":"10910","Switched":"3710"},{"month_year":"FEB-2016","Continuing":"10474","Switched":"3447","New To Market":"97665","Reinitiating":"23936"},{"month_year":"JAN-2016","Reinitiating":"25245","New To Market":"99878","Continuing":"9814","Switched":"3597"},{"month_year":"DEC-2015","Switched":"4129","Continuing":"11598","New To Market":"101975","Reinitiating":"28551"},{"month_year":"NOV-2015","Continuing":"10953","Reinitiating":"24704","Switched":"3606","New To Market":"95798"},{"month_year":"OCT-2015","Continuing":"13432","Reinitiating":"27161","Switched":"4433","New To Market":"109665"},{"month_year":"SEP-2015","Switched":"3777","Continuing":"13083","New To Market":"97362","Reinitiating":"23439"},{"month_year":"AUG-2015","New To Market":"89373","Reinitiating":"22023","Continuing":"12706","Switched":"3247"},{"month_year":"JUL-2015","Reinitiating":"22238","New To Market":"88010","Continuing":"12244","Switched":"3275"},{"month_year":"JUN-2015","Continuing":"12204","Switched":"3288","Reinitiating":"21927","New To Market":"86476"},{"month_year":"MAY-2015","Continuing":"12771","Reinitiating":"21091","New To Market":"83310","Switched":"3254"},{"month_year":"APR-2015","Switched":"3813","New To Market":"90485","Continuing":"12720","Reinitiating":"22696"},{"month_year":"MAR-2015","Continuing":"13251","Reinitiating":"23536","Switched":"3922","New To Market":"90999"},{"month_year":"FEB-2015","Switched":"3908","New To Market":"86914","Continuing":"12217","Reinitiating":"22387"},{"month_year":"JAN-2015","Continuing":"11089","Reinitiating":"25454","New To Market":"98776","Switched":"4481"}]
var data = [{"month_year":"OCT-2017","ABRAXANE":"415","ADRIAMYCIN":"1","ADRUCIL":"124","AFINITOR":"27181","AFINITOR DISPERZ":"837","ANASTROZOLE":"1928006","ARIMIDEX":"5871","AROMASIN":"2915","AVASTIN":"3626","CAPECITABINE":"168241","CARBOPLATIN":"2213","CISPLATIN":"631","CYCLOPHOSPHAMIDE":"24467","DOCETAXEL":"1384","DOXIL":"1","DOXORUBICIN HCL":"1282","DOXORUBICIN HCL LIPOSOME":"64","EPIRUBICIN HCL":"2","EVISTA":"9948","EXEMESTANE":"271727","FARESTON":"3860","FASLODEX":"2001","FEMARA":"4745","FLUOROURACIL":"552091","GEMCITABINE HCL":"1279","HALAVEN":"10","HERCEPTIN":"3741","IBRANCE":"107703","KADCYLA":"202","LETROZOLE":"959488","MEGACE":"50","MEGACE ES":"397","MEGESTROL ACETATE":"445930","METHOTREXATE":"3315897","METHOTREXATE SODIUM":"104655","OTREXUP":"22208","PACLITAXEL":"1381","PERJETA":"587","RALOXIFENE HCL":"1084906","SOLTAMOX":"425","TAMOXIFEN CITRATE":"1090146","TREXALL":"10980","TYKERB":"5852","VINORELBINE TARTRATE":"241","XELODA":"4393","TAXOTERE":"0","RHEUMATREX":"0","IXEMPRA":"0","ELLENCE":"0","GEMZAR":"0"},{"month_year":"SEP-2017","ABRAXANE":"490","ADRUCIL":"202","AFINITOR":"26203","AFINITOR DISPERZ":"669","ANASTROZOLE":"1852442","ARIMIDEX":"5871","AROMASIN":"2903","AVASTIN":"5570","CAPECITABINE":"166921","CARBOPLATIN":"2159","CISPLATIN":"565","CYCLOPHOSPHAMIDE":"24089","DOCETAXEL":"1504","DOXIL":"4","DOXORUBICIN HCL":"1336","DOXORUBICIN HCL LIPOSOME":"104","EPIRUBICIN HCL":"2","EVISTA":"9624","EXEMESTANE":"261077","FARESTON":"3920","FASLODEX":"1911","FEMARA":"4817","FLUOROURACIL":"449851","GEMCITABINE HCL":"1165","HALAVEN":"20","HERCEPTIN":"3801","IBRANCE":"105645","IXEMPRA":"3","KADCYLA":"218","LETROZOLE":"916546","MEGACE":"26","MEGACE ES":"373","MEGESTROL ACETATE":"444298","METHOTREXATE":"3216789","METHOTREXATE SODIUM":"99495","OTREXUP":"22124","PACLITAXEL":"1333","PERJETA":"631","RALOXIFENE HCL":"1043266","RHEUMATREX":"31","SOLTAMOX":"389","TAMOXIFEN CITRATE":"1048728","TREXALL":"10782","TYKERB":"5468","VINORELBINE TARTRATE":"169","XELODA":"3937","TAXOTERE":"0","ADRIAMYCIN":"0","ELLENCE":"0","GEMZAR":"0"},{"month_year":"AUG-2017","ABRAXANE":"490","ADRUCIL":"178","AFINITOR":"28111","AFINITOR DISPERZ":"915","ANASTROZOLE":"1911926","ARIMIDEX":"5949","AROMASIN":"2945","AVASTIN":"6908","CAPECITABINE":"171799","CARBOPLATIN":"2315","CISPLATIN":"655","CYCLOPHOSPHAMIDE":"25715","DOCETAXEL":"1342","DOXIL":"2","DOXORUBICIN HCL":"1462","DOXORUBICIN HCL LIPOSOME":"134","ELLENCE":"2","EPIRUBICIN HCL":"3","EVISTA":"10446","EXEMESTANE":"269339","FARESTON":"4178","FASLODEX":"2049","FEMARA":"5309","FLUOROURACIL":"424897","GEMCITABINE HCL":"1459","HALAVEN":"11","HERCEPTIN":"3957","IBRANCE":"106923","IXEMPRA":"3","KADCYLA":"182","LETROZOLE":"951736","MEGACE":"38","MEGACE ES":"433","MEGESTROL ACETATE":"468640","METHOTREXATE":"3306909","METHOTREXATE SODIUM":"103401","OTREXUP":"21632","PACLITAXEL":"1483","PERJETA":"595","RALOXIFENE HCL":"1068070","SOLTAMOX":"479","TAMOXIFEN CITRATE":"1080168","TREXALL":"10860","TYKERB":"6224","VINORELBINE TARTRATE":"283","XELODA":"4573","TAXOTERE":"0","ADRIAMYCIN":"0","RHEUMATREX":"0","GEMZAR":"0"},{"month_year":"JUL-2017","ABRAXANE":"480","ADRIAMYCIN":"1","ADRUCIL":"160","AFINITOR":"26539","AFINITOR DISPERZ":"891","ANASTROZOLE":"1873208","ARIMIDEX":"6045","AROMASIN":"2813","AVASTIN":"5708","CAPECITABINE":"163051","CARBOPLATIN":"2165","CISPLATIN":"709","CYCLOPHOSPHAMIDE":"24827","DOCETAXEL":"1366","DOXIL":"4","DOXORUBICIN HCL":"1294","DOXORUBICIN HCL LIPOSOME":"104","ELLENCE":"1","EPIRUBICIN HCL":"5","EVISTA":"10830","EXEMESTANE":"264593","FARESTON":"4232","FASLODEX":"1773","FEMARA":"5201","FLUOROURACIL":"338473","GEMCITABINE HCL":"1477","GEMZAR":"1","HALAVEN":"26","HERCEPTIN":"3561","IBRANCE":"102177","KADCYLA":"186","LETROZOLE":"922174","MEGACE":"32","MEGACE ES":"457","MEGESTROL ACETATE":"450928","METHOTREXATE":"3258999","METHOTREXATE SODIUM":"94929","OTREXUP":"20642","PACLITAXEL":"1477","PERJETA":"583","RALOXIFENE HCL":"1084318","RHEUMATREX":"31","SOLTAMOX":"443","TAMOXIFEN CITRATE":"1064010","TREXALL":"10626","TYKERB":"5834","VINORELBINE TARTRATE":"241","XELODA":"3883","TAXOTERE":"0","IXEMPRA":"0"},{"month_year":"JUN-2017","ABRAXANE":"505","ADRUCIL":"88","AFINITOR":"26557","AFINITOR DISPERZ":"849","ANASTROZOLE":"1865630","ARIMIDEX":"6123","AROMASIN":"3005","AVASTIN":"5090","CAPECITABINE":"169495","CARBOPLATIN":"2213","CISPLATIN":"727","CYCLOPHOSPHAMIDE":"25811","DOCETAXEL":"1324","DOXIL":"6","DOXORUBICIN HCL":"1492","DOXORUBICIN HCL LIPOSOME":"144","ELLENCE":"1","EPIRUBICIN HCL":"9","EVISTA":"11010","EXEMESTANE":"262523","FARESTON":"3992","FASLODEX":"2007","FEMARA":"4949","FLUOROURACIL":"373399","GEMCITABINE HCL":"1315","HALAVEN":"10","HERCEPTIN":"3345","IBRANCE":"99801","KADCYLA":"142","LETROZOLE":"925096","MEGACE":"80","MEGACE ES":"337","MEGESTROL ACETATE":"456970","METHOTREXATE":"3281229","METHOTREXATE SODIUM":"95613","OTREXUP":"22232","PACLITAXEL":"1663","PERJETA":"603","RALOXIFENE HCL":"1062670","RHEUMATREX":"51","SOLTAMOX":"383","TAMOXIFEN CITRATE":"1074282","TREXALL":"10464","TYKERB":"5864","VINORELBINE TARTRATE":"199","XELODA":"3943","TAXOTERE":"0","ADRIAMYCIN":"0","IXEMPRA":"0","GEMZAR":"0"},{"month_year":"MAY-2017","ABRAXANE":"560","ADRUCIL":"94","AFINITOR":"26419","AFINITOR DISPERZ":"861","ANASTROZOLE":"1903898","ARIMIDEX":"5877","AROMASIN":"3053","AVASTIN":"8066","CAPECITABINE":"161539","CARBOPLATIN":"2189","CISPLATIN":"709","CYCLOPHOSPHAMIDE":"26243","DOCETAXEL":"1378","DOXIL":"3","DOXORUBICIN HCL":"1498","DOXORUBICIN HCL LIPOSOME":"209","EPIRUBICIN HCL":"12","EVISTA":"11880","EXEMESTANE":"268619","FARESTON":"4232","FASLODEX":"2391","FEMARA":"5351","FLUOROURACIL":"402181","GEMCITABINE HCL":"1225","HALAVEN":"14","HERCEPTIN":"3381","IBRANCE":"97149","IXEMPRA":"1","KADCYLA":"162","LETROZOLE":"937744","MEGACE":"74","MEGACE ES":"361","MEGESTROL ACETATE":"452950","METHOTREXATE":"3327369","METHOTREXATE SODIUM":"91341","OTREXUP":"20810","PACLITAXEL":"1513","PERJETA":"551","RALOXIFENE HCL":"1119490","RHEUMATREX":"87","SOLTAMOX":"377","TAMOXIFEN CITRATE":"1101936","TREXALL":"10866","TYKERB":"5756","VINORELBINE TARTRATE":"151","XELODA":"4381","TAXOTERE":"0","ADRIAMYCIN":"0","ELLENCE":"0","GEMZAR":"0"},{"month_year":"APR-2017","ABRAXANE":"435","ADRUCIL":"88","AFINITOR":"25759","AFINITOR DISPERZ":"861","ANASTROZOLE":"1797734","ARIMIDEX":"5931","AROMASIN":"3059","AVASTIN":"7748","CAPECITABINE":"159799","CARBOPLATIN":"2279","CISPLATIN":"661","CYCLOPHOSPHAMIDE":"25115","DOCETAXEL":"1528","DOXIL":"3","DOXORUBICIN HCL":"1576","DOXORUBICIN HCL LIPOSOME":"204","EPIRUBICIN HCL":"10","EVISTA":"12378","EXEMESTANE":"254831","FARESTON":"3962","FASLODEX":"2217","FEMARA":"4781","FLUOROURACIL":"391597","GEMCITABINE HCL":"1213","HALAVEN":"22","HERCEPTIN":"3495","IBRANCE":"96009","IXEMPRA":"3","KADCYLA":"226","LETROZOLE":"885742","MEGACE":"32","MEGACE ES":"421","MEGESTROL ACETATE":"437104","METHOTREXATE":"3183441","METHOTREXATE SODIUM":"84513","OTREXUP":"20522","PACLITAXEL":"1579","PERJETA":"535","RALOXIFENE HCL":"1088584","RHEUMATREX":"75","SOLTAMOX":"479","TAMOXIFEN CITRATE":"1050966","TAXOTERE":"2","TREXALL":"10650","TYKERB":"5744","VINORELBINE TARTRATE":"139","XELODA":"4021","ADRIAMYCIN":"0","ELLENCE":"0","GEMZAR":"0"}];
var x_axix_label = 'month_year';
xValues = data.map(function (d) { return d[x_axix_label]; })
var x = d3.scale.ordinal().rangeBands([width, 0], 0.2, 0)
.domain(xValues), x2 = d3.scale
.ordinal() .rangeBands([width, 0], 0.2, 0),x3 = d3.scale
.ordinal() .rangeBands([width, 0], 0.2, 0)
.domain(d3.range(data.length)), y = d3.scale
.linear().range([ height, 0 ]), y2 = d3.scale.linear().range(
[ height2, 0 ]);
var xAxis = d3.svg.axis().scale(x).tickSize(1, 0)
.tickValues(xValues).orient("bottom"), xAxis2 = d3.svg.axis()
.scale(x2).orient("bottom"), yAxis = d3.svg.axis().scale(y).ticks(5).tickSize(1, 0).orient(
"left");
var brush = d3.svg.brush().x(x2).extent([0, 100]).on("brush", brushs);
var line = d3.svg.line().defined(function(d) {
return !isNaN(d.temperature);
}).interpolate("cubic").x(function(d) {
return x(d.date);
}).y(function(d) {
return y(d.temperature);
});
var line2 = d3.svg.line().defined(function(d) {
return !isNaN(d.temperature);
}).interpolate("cubic").x(function(d) {
return x2(d.date);
}).y(function(d) {
return y2(d.temperature);
});
var svg = d3.select("body").append("svg").attr("width",
width + margin.left + margin.right).attr("height",
height + margin.top + margin.bottom);
svg.append("defs").append("clipPath").attr("id", "clip").append("rect")
.attr("width", width).attr("height", height);
var focus = svg.append("g").attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g").attr("transform",
"translate(" + margin2.left + "," + margin2.top + ")");
color.domain(d3.keys(data[0]).filter(function(key) {
return key !== x_axix_label;
}));
data.forEach(function(d) {
d.date = d[x_axix_label];
});
var sources = color.domain().map(function(name) {
return {
name : name,
values : data.map(function(d) {
return {
date : d.date,
temperature : +d[name]
};
})
};
});
y.domain([ d3.min(sources, function(c) {
return d3.min(c.values, function(v) {
return v.temperature;
});
}), d3.max(sources, function(c) {
return d3.max(c.values, function(v) {
return v.temperature;
});
}) ]);
x2.domain(x.domain());
y2.domain(y.domain());
var focuslineGroups = focus.selectAll("g").data(sources).enter()
.append("g").attr('class','test');
var circle = focus.selectAll("g.dot").data(sources).enter().append("g")
.attr("class", "dot").selectAll("circle").data(function(d) {
return d.values;
}).enter().append("circle").attr("r", 3).attr("cx", function(d, i) {
return x(d.date);
}).attr("cy", function(d, i) {
return y(d.temperature);
})
var focuslines = focuslineGroups.append("path").attr("class", "line").attr(
"d", function(d) {
return line(d.values);
}).style("stroke", function(d) {
return color(d.name);
}).attr("clip-path", "url(#clip)");
focus.append("g").attr("class", "x axis").attr("transform",
"translate(0," + height + ")").call(xAxis).selectAll("text")
.attr("transform", function(d) {
return "rotate(-65)"
}).attr("x", "-50")
.attr("y", "-10"); ;
focus.append("g").attr("class", "y axis").call(yAxis);
var contextlineGroups = context.selectAll("g").data(sources).enter()
.append("g");
var contextLines = contextlineGroups.append("path").attr("class", "line")
.attr("d", function(d) {
return line2(d.values);
}).style("stroke", function(d) {
return color(d.name);
}).attr("clip-path", "url(#clip)");
// context.append("g").attr("class", "x axis").attr("transform",
// "translate(0," + height2 + ")").call(xAxis2);
context.append("g").attr("class", "x brush").call(brush).selectAll("rect")
.attr("y", -6).attr("height", height2 + 7);
var divTooltip = d3.select("body").append("div").attr("class",
"toolTip lableText");
bindToolTip(circle);
brushs();
function brushs() {
selected = x3.domain().filter(
function(d) {
return (brush.extent()[0] <= x3(d))
&& (x3(d) <= brush.extent()[1]);
});
var selected1 = x2.domain().filter(
function(d) {
return (brush.extent()[0] <= x2(d))
&& (x2(d) <= brush.extent()[1]);
});
var start;
var end;
/* Keep a minimum amount of bars on there to avoid any jank */
if (selected.length > 0) {
start= selected[0];
end = selected[selected.length - 1]+1;
} else {
start = 0;
end = data.length;
}
var updatedData = data.slice(start, end);
sources = color.domain().map(function(name) {
return {
name : name,
values : updatedData.map(function(d) {
return {
date : d.date,
temperature : +d[name]
};
})
};
});
var dfdf = updatedData.map(function (d) { return d[x_axix_label]; })
$('.test .line').remove();
x.domain(dfdf);
var focuslineGroups = focus.selectAll("g.test").data(sources);
focuslines = focuslineGroups.append("path").attr("class", "line").attr(
"d", function(d) {
return line(d.values);
}).style("stroke", function(d) {
return color(d.name);
}).attr("clip-path", "url(#clip)");
$('g.dot').remove();
circle = focus.selectAll("g.dot").data(sources).enter().append("g")
.attr("class", "dot").selectAll("circle").data(function(d) {
return d.values;
}).enter().append("circle").attr("r", 3).attr("cx",
function(d, i) {
return x(d.date);
}).attr("cy", function(d, i) {
return y(d.temperature);
});
bindToolTip(circle)
xAxis = d3.svg.axis().scale(x).tickSize(1, 0)
.tickValues(dfdf)
focus.select(".x.axis").call(xAxis).selectAll("g").attr("transform", function(d) {
return "translate("+x(d)+",0)"
}).selectAll("text")
.attr("transform", function(d) {
return "rotate(-65)"
}).attr("x", "-30")
.attr("y", "-10"); ;
focus.select(".y.axis").call(yAxis);
}
function bindToolTip(circle) {
circle.on("mousemove", function(d) {
divTooltip.style("left", d3.event.pageX + 10 + "px");
divTooltip.style("top", d3.event.pageY - 25 + "px");
divTooltip.style("display", "inline-block");
var x = d3.event.pageX, y = d3.event.pageY
var elements = document.querySelectorAll(':hover');
l = elements.length
l = l - 1
elementData = elements[l].__data__;
divTooltip
.html(elementData.date + "<br>" + elementData.temperature)
});
circle.on("mouseout", function(d) {
divTooltip.style("display", "none");
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment