D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jalapic
Full window
Github gist
small multiple lines
Built with
blockbuilder.org
<!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 14px sans-serif; } .axis path, .axis line { fill: none; stroke: #e5e5e5; shape-rendering: crispEdges; } .axis path { display: none; } .line { fill: none; stroke-width: 1px; opacity: 1; } </style> <body> <p> Work in Progress !!!!!</p> <div style="width: 1800px; padding-left: 0.75cm"> <div class="container" id="chart-a" style="float: left; width: 360px; height: 500px;margin-top: 25px;"><h2 style="text-align: center;padding-left: 70px;">Cohort A</h2></div> <div class="container" id="chart-b" style="float: left; width: 360px; height: 500px;margin-top: 25px;"><h2 style="text-align: center;padding-left: 70px;">Cohort B</h2></div> <div class="container" id="chart-c" style="float: left; width: 360px; height: 500px;margin-top: 25px;"><h2 style="text-align: center;padding-left: 70px;">Cohort C</h2></div> <div class="container" id="chart-d" style="float: left; width: 360px; height: 500px;margin-top: 25px;"><h2 style="text-align: center;padding-left: 70px;">Cohort D</h2></div> <div class="container" id="chart-e" style="float: left; width: 360px; height: 500px;margin-top: 25px;"><h2 style="text-align: center;padding-left: 70px;">Cohort E</h2></div> </div> <script src="//d3js.org/d3.v3.min.js"></script> <script> var margin1 = {top: 60, right: 80, bottom: 60, left: 80}, width1 = 360, height1 = 410 - margin1.top - margin1.bottom; var y = d3.scale.linear() .range([height1, 0]) .domain([1500,3000]); var color = d3.scale.ordinal() .range(["#910727","#CF1D1D", "#D93B2A", "#E35938", "#ED7746", "#F4AA64", "#F1C075", "#EED585","#EBEB96", "#E6E7A9","#E1E3BC", "#DDE0D0"]) .domain(["A","B","C","D","E","F","G","H","I","J","K","L"]); var idsnos = [1,2,3,4,5,6,7,8,9,10,11,12]; var x = d3.scale.linear() .range([0, width1-margin1.right*1.3]) .domain([0, 100]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(2) .tickFormat(function(d) { return parseInt(d, 10) + "%"; }); var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickSize(-width1, 0, 0); var yAxisnotext = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickSize(-width1, 0, 0) .tickFormat(""); var line = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.eventtime); }) .y(function(d) { return y(d.code); }); var svga = d3.select("body").select("div#chart-a").append("svg") .attr("width", width1) .attr("height", height1 + margin1.top + margin1.bottom) .append("g") .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")"); var svgb = d3.select("body").select("div#chart-b").append("svg") .attr("width", width1) .attr("height", height1 + margin1.top + margin1.bottom) .append("g") .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")"); var svgc = d3.select("body").select("div#chart-c").append("svg") .attr("width", width1) .attr("height", height1 + margin1.top + margin1.bottom) .append("g") .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")"); var svgd = d3.select("body").select("div#chart-d").append("svg") .attr("width", width1) .attr("height", height1 + margin1.top + margin1.bottom) .append("g") .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")"); var svge = d3.select("body").select("div#chart-e").append("svg") .attr("width", width1) .attr("height", height1 + margin1.top + margin1.bottom) .append("g") .attr("transform", "translate(" + margin1.left + "," + margin1.top + ")"); // Cohort A d3.csv("ratesA2.txt", function(error, data) { if (error) throw error; data.forEach(function (d,i) { d.eventtime = +d.eventtime; d.A = +d.A; d.B = +d.B; d.C = +d.C; d.D = +d.D; d.E = +d.E; d.F = +d.F; d.G = +d.G; d.H = +d.H; d.I = +d.I; d.J = +d.J; d.K = +d.K; d.L = +d.L; }) var keys = d3.keys(data[0]).filter(function(key) { return key !== "eventtime"; }); var cohortLines = keys.map(function(name) { return { name: name, values: data.map(function(d) { return { eventtime: d.eventtime, code: d[name]}; }) }; }); //Append axes svga.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height1 + ")") .call(xAxis); svga.append("g") .attr("class", "y axis") .call(yAxis); var linethis = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.eventtime); }) .y(function(d) { return y(d.code); }); //Append the lines var lines = svga.selectAll(".lines") .data(cohortLines) .enter().append("g") ; //Actual full opacity thin line lines.append("path") .attr("class", "line") .classed("mainline", true) .attr("d", function(d) { return linethis(d.values); }) .style("stroke", function(d) { return color(d.name); }) .style("stroke-width", 1.5); // Fading and Selecting Lines doHover(); // Y-axis label d3.select("body").select("div#chart-a").select("svg").append("text") .attr("text-anchor", "middle") .attr("font-size", "18px") .attr("transform", "translate(" + (margin1.left/3) +"," +((height1 + margin1.top + margin1.bottom)/2)+")rotate(-90)") .text("Glicko Rating"); }); // Cohort B d3.csv("ratesB2.txt", function(error, data) { if (error) throw error; data.forEach(function (d,i) { d.eventtime = +d.eventtime; d.A = +d.A; d.B = +d.B; d.C = +d.C; d.D = +d.D; d.E = +d.E; d.F = +d.F; d.G = +d.G; d.H = +d.H; d.I = +d.I; d.J = +d.J; d.K = +d.K; d.L = +d.L; }) var keys = d3.keys(data[0]).filter(function(key) { return key !== "eventtime"; }); var cohortLines = keys.map(function(name) { return { name: name, values: data.map(function(d) { return { eventtime: d.eventtime, code: d[name]}; }) }; }); svgb.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height1 + ")") .call(xAxis); svgb.append("g") .attr("class", "y axis") .call(yAxisnotext); var linethis = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.eventtime); }) .y(function(d) { return y(d.code); }); //Append the lines var lines = svgb.selectAll(".lines") .data(cohortLines) .enter().append("g") ; //Actual full opacity thin line lines.append("path") .attr("class", "line") .classed("mainline", true) .attr("d", function(d) { return linethis(d.values); }) .style("stroke", function(d) { return color(d.name); }) .style("stroke-width", 1.5); // Fading and Selecting Lines doHover(); }); // Cohort C d3.csv("ratesC2.txt", function(error, data) { if (error) throw error; data.forEach(function (d,i) { d.eventtime = +d.eventtime; d.A = +d.A; d.B = +d.B; d.C = +d.C; d.D = +d.D; d.E = +d.E; d.F = +d.F; d.G = +d.G; d.H = +d.H; d.I = +d.I; d.J = +d.J; d.K = +d.K; d.L = +d.L; }) var keys = d3.keys(data[0]).filter(function(key) { return key !== "eventtime"; }); var cohortLines = keys.map(function(name) { return { name: name, values: data.map(function(d) { return { eventtime: d.eventtime, code: d[name]}; }) }; }); //Append axes svgc.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height1 + ")") .call(xAxis); svgc.append("g") .attr("class", "y axis") .call(yAxisnotext); var linethis = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.eventtime); }) .y(function(d) { return y(d.code); }); //Append the lines var lines = svgc.selectAll(".lines") .data(cohortLines) .enter().append("g") ; //Actual full opacity thin line lines.append("path") .attr("class", "line") .classed("mainline", true) .attr("d", function(d) { return linethis(d.values); }) .style("stroke", function(d) { return color(d.name); }) .style("stroke-width", 1.5); // Fading and Selecting Lines doHover(); }); // Cohort D d3.csv("ratesD2.txt", function(error, data) { if (error) throw error; data.forEach(function (d,i) { d.eventtime = +d.eventtime; d.A = +d.A; d.B = +d.B; d.C = +d.C; d.D = +d.D; d.E = +d.E; d.F = +d.F; d.G = +d.G; d.H = +d.H; d.I = +d.I; d.J = +d.J; d.K = +d.K; d.L = +d.L; }) var keys = d3.keys(data[0]).filter(function(key) { return key !== "eventtime"; }); var cohortLines = keys.map(function(name) { return { name: name, values: data.map(function(d) { return { eventtime: d.eventtime, code: d[name]}; }) }; }); //Append axes svgd.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height1 + ")") .call(xAxis); svgd.append("g") .attr("class", "y axis") .call(yAxisnotext); var linethis = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.eventtime); }) .y(function(d) { return y(d.code); }); //Append the lines var lines = svgd.selectAll(".lines") .data(cohortLines) .enter().append("g") ; //Actual full opacity thin line lines.append("path") .attr("class", "line") .classed("mainline", true) .attr("d", function(d) { return linethis(d.values); }) .style("stroke", function(d) { return color(d.name); }) .style("stroke-width", 1.5); // Fading and Selecting Lines doHover(); }); // Cohort E d3.csv("ratesE2.txt", function(error, data) { if (error) throw error; data.forEach(function (d,i) { d.eventtime = +d.eventtime; d.A = +d.A; d.B = +d.B; d.C = +d.C; d.D = +d.D; d.E = +d.E; d.F = +d.F; d.G = +d.G; d.H = +d.H; d.I = +d.I; d.J = +d.J; d.K = +d.K; d.L = +d.L; }) var keys = d3.keys(data[0]).filter(function(key) { return key !== "eventtime"; }); var cohortLines = keys.map(function(name) { return { name: name, values: data.map(function(d) { return { eventtime: d.eventtime, code: d[name]}; }) }; }); //Append axes svge.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height1 + ")") .call(xAxis); svge.append("g") .attr("class", "y axis") .call(yAxisnotext); var linethis = d3.svg.line() .interpolate("basis") .x(function(d) { return x(d.eventtime); }) .y(function(d) { return y(d.code); }); //Append the lines var lines = svge.selectAll(".lines") .data(cohortLines) .enter().append("g") ; //Actual full opacity thin line lines.append("path") .attr("class", "line") .classed("mainline", true) .attr("d", function(d) { return linethis(d.values); }) .style("stroke", function(d) { return color(d.name); }) .style("stroke-width", 1.5); // Fading and Selecting Lines doHover(); }); // Function function doHover() { d3.selectAll('path.line')//register this to all paths .on("mouseover", function(d,i) { //first make all lines vanish d3.selectAll('path.line') .style("opacity", 0.2) .style("stroke-width", 1) //only show lines which have same name. d3.selectAll('path.line').filter(function(d1) { return d.name == d1.name }) .style("opacity", 1) .style("stroke-width", 2.5); d3.select("div#chart-a.container svg") .append("text") .attr("id", "cohorttext") .text("" + d.name +"-" + idsnos[i%idsnos.length]) .attr("x", (width1-margin1.right/2)) .attr("y", margin1.top/2) .style("fill", color(d.name)) .style("font-weight", "bold") .style("font-size", "18px"); d3.select("div#chart-b.container svg") .append("text") .attr("id", "cohorttext") .text("" + d.name +"-" + idsnos[i%idsnos.length]) .attr("x", (width1-margin1.right/2)) .attr("y", margin1.top/2) .style("fill", color(d.name)) .style("font-weight", "bold") .style("font-size", "18px"); d3.select("div#chart-c.container svg") .append("text") .attr("id", "cohorttext") .text("" + d.name +"-" + idsnos[i%idsnos.length]) .attr("x", (width1-margin1.right/2)) .attr("y", margin1.top/2) .style("fill", color(d.name)) .style("font-weight", "bold") .style("font-size", "18px"); d3.select("div#chart-d.container svg") .append("text") .attr("id", "cohorttext") .text("" + d.name +"-" + idsnos[i%idsnos.length]) .attr("x", (width1-margin1.right/2)) .attr("y", margin1.top/2) .style("fill", color(d.name)) .style("font-weight", "bold") .style("font-size", "18px"); d3.select("div#chart-e.container svg") .append("text") .attr("id", "cohorttext") .text("" + d.name +"-" + idsnos[i%idsnos.length]) .attr("x", (width1-margin1.right/2)) .attr("y", margin1.top/2) .style("fill", color(d.name)) .style("font-weight", "bold") .style("font-size", "18px"); }) .on("mouseout", function() { d3.selectAll('path.line') .style("opacity", 1) .style("stroke-width", 1.5); d3.selectAll("#cohorttext").remove() // d3.selectAll("#cohorttextx").remove() }) } </script>
https://d3js.org/d3.v3.min.js