D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
AminaSGitHub
Full window
Github gist
Visu_Part3
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> svg { font: 10px sans-serif; } .svg1{ width: 1000; height: 1000; position: relative; left: 30px; } .line { fill: none; stroke: black; stroke-width: 2px; } .legend { font-size: 16px; } h1 { text-align : center; } .province { fill: #000; stroke: #fff; stroke-width: 1px; } .province:hover { opacity: 0.5; } .hidden { display: none; } </style> </head> <body> <div> <form> <label><input type="radio" name="all" id="all" value="Tous"> Tous</label> <label><input type="radio" name="all" id="all" value="Choisir"> Choisir</label> </form> </div> <script> d3.select("input[value=\"Choisir\"]").property("checked", true); var margin = {top: 20, right: 30, bottom: 20, left: 100}, width = 760 ,//- margin.left - margin.right, height = 300;// - margin.top - margin.bottom ; var svg3 = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right+100) .attr("height", height + margin.top + margin.bottom+100) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // var parseDate = d3.timeParse("%y"); var x = d3.scaleTime().range([0, width-100-margin.left]), y = d3.scaleLinear().range([height, 0]), c = d3.scaleOrdinal(d3.schemeCategory20); var line = d3.line() .curve(d3.curveLinear) .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.moy); }); d3.text('dataCSV.csv', function(error, raw) { var dsv = d3.dsvFormat(',') var data = dsv.parse(raw); // Nest stock values by symbol. var symbols = d3.nest() .key(function(d) { return d.region; }) .entries(data); // Parse and caculate some values for each symbols symbols.forEach(function(s) { s.values.forEach(function(d) { d.date = d.date; d.moy = d.moy; }); s.maxMoy = d3.max(s.values, function(d) { return d.moy; }); }); //console.log(symbols); x.domain(d3.extent(data, function(d) { return d.date; })); var maxy; y.domain([0, maxy=d3.max(symbols.map(function(d) { return parseFloat(d.maxMoy); }))]) //console.log("MAXY : "+maxy); // ADDED var legendSpace = height/symbols.length+2; // spacing for the legend symbols.forEach(function(d,i) { svg3.append("path") .attr("class", "line") .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign an ID //.attr("id",function(d,i){ return "id" + i; }) .attr("d", line(d.values)) .style("stroke", c(d.key)) .style("opacity", 0); // Add the Legend class="legendAdded" svg3.append("text") .attr("x",width-150) .attr("y",5+ i*legendSpace) .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }) .attr("class", "legend") // style the legend .attr("id", 'idText'+d.key.replace(/\s+/g, '')) .style("fill", function() { // Add the colours dynamically return d.color = c(d.key); }) .on("click", function(){ // Determine if current line is visible // console.log("d.ACTIVE AVANT : " + d.active); var active = d.active ? false : true, newOpacity = active ? 1 : 0; //console.log("d.ACTIVE APRES : " + d.active); // Hide or show the elements based on the ID d3.select("#tag"+d.key.replace(/\s+/g, '')) .transition().duration(100) .style("opacity", newOpacity); // Update whether or not the elements are active d.active = active; if(active){ //'idText'+d.key.replace(/\s+/g, '') d3.select("#idText"+d.key.replace(/\s+/g, '')) .style("Font-Weight","Bold") .style("font-size", "20px"); }else{ d3.select("#idText"+d.key.replace(/\s+/g, '')) .style("Font-Weight","Normal") .style("font-size", "16px"); } }) .text(d.key) .style("font-size", "16px") .on("mouseover",function() { d3.select("#tag"+d.key.replace(/\s+/g, '')).style("opacity",1); d3.select("#idText"+d.key.replace(/\s+/g, '')) .style("text-decoration","underline") .style("Font-Weight","Bold") .style("font-size", "20px"); }) .on("mouseout", function() { if(d.active != true) { d3.selectAll("#tag"+d.key.replace(/\s+/g, '')) .transition() .style("opacity", 0) d3.select(this) .transition() .duration(1000) }; d3.select("#idText"+d.key.replace(/\s+/g, '')) .style("text-decoration","none"); if(!d.active){ d3.select("#idText"+d.key.replace(/\s+/g, '')) .style("Font-Weight","Normal") .style("font-size", "16px"); } }); //////////////////////////////////// var valCurrentViz = "Choisir"; d3.selectAll("#all") .on("change", selectDataset); function selectDataset() { valCurrentViz = this.value; if (valCurrentViz == "Tous") { d3.selectAll(".legend") .style("Font-Weight","Bold") .style("font-size", "20px"); d3.selectAll(".line") .style("opacity",1); } else { d3.selectAll(".legend") .style("Font-Weight","Normal") .style("font-size", "16px"); d3.selectAll(".line") .style("opacity",0); } } }); // Add axis X svg3.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // text label for the x axis svg3.append("text") .attr("transform", "translate(" + (width/2) + " ," + (height -20) + ")") .style("text-anchor", "middle") .text("Date") .style("font-size", "15px") .style("Font-Weight","Bold"); // Add axis Y svg3.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y).ticks(20)); // text label for the y axis svg3.append("text") .attr("transform", "rotate(-90)") .attr("y", 0 - 50) .attr("x",0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Pourcentage de retard en (%)") .style("font-size", "15px") .style("Font-Weight","Bold"); }); </script> </body>
https://d3js.org/d3.v4.min.js