Les tutos de Mike [[file:Blocks/index_block.org]] :surBlocks: - d3-tool tips: http://bl.ocks.org/d3noob/a22c42db65eb00d4e369 - heatmap : http://bl.ocks.org/ianyfchang/8119685#data_heatmap.tsv - resize : https://bl.ocks.org/curran/3a68b0c81991e2e94b19 :END: * Resize :PROPERTIES: :header-args:html: :tangle ./Blocks/resize.html :header-args:js: :tangle ./Blocks/js_vis/resize.js :header-args:css: :tangle ./Blocks/css/resize.css :END: <2018-07-21 sam. 05:29> #+BEGIN_SRC css /* Make the chart container fill the page using CSS. */ #main-chart { position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; } #+END_SRC #+BEGIN_SRC html resize

resize

#+END_SRC #+BEGIN_SRC js var chartDiv = d3.select("#main-chart").node() var svg = d3.select(chartDiv).append("svg"); debugger function redraw(){ // Extract the width and height that was computed by CSS. var width = chartDiv.clientWidth; var height = chartDiv.clientHeight; // Use the extracted size to set the size of an SVG element. svg.attr("width", width).attr("height", height); // Draw an X to show that the size is correct. var lines = svg.selectAll("line").data([ {x1: 0, y1: 0, x2: width, y2: height}, {x1: 0, y1: height, x2: width, y2: 0} ]); lines.enter().append("line") .style("stroke-width", 4) .style("stroke-opacity", 0.4) .style('stroke',"black") .merge(lines) // ? .attr("x1", function (d) { return d.x1; }) .attr("y1", function (d) { return d.y1; }) .attr("x2", function (d) { return d.x2; }) .attr("y2", function (d) { return d.y2; }) ; } debugger // Draw for the first time to initialize. redraw(); // Redraw based on the new size whenever the browser window is resized. window.addEventListener("resize", redraw); #+END_SRC * DONE Semantic svg zoom CLOSED: [2018-07-21 sam. 05:24] :PROPERTIES: :header-args:html: :tangle ./sZoom.html :header-args:js: :tangle ./js_vis/sZoom.js :header-args:css: :tangle ./css/sZoom.css :END: [[https://bl.ocks.org/mbostock/3681006][Canvas Semantic Zooming]] #+BEGIN_SRC css rect {background-color : #00aaaa;} #+END_SRC #+BEGIN_SRC html Semantic Zoom #+END_SRC #+BEGIN_SRC js var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); var X = d3.randomNormal(width / 2, 80), Y = d3.randomNormal(height / 2, 80), data = d3.range(2000).map(function() { return [X(), Y()]; }); var circle = svg.append("g").attr("class", "circles").selectAll("circle") .data(data) .enter().append("circle") .attr("r", 2.5) .attr("transform", transform(d3.zoomIdentity)); svg.append("rect") .attr("fill", "rgba(0,200,100, .3)") .attr("pointer-events", "all") .attr("width", width) .attr("height", height) .call(d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoom)); function zoom() { // circle.attr("transform", transform(d3.event.transform)); circle.attr("transform", (d) => "translate(" + d3.event.transform.apply(d) + ")") } #+END_SRC * COMMENT Idéal :PROPERTIES: :header-args:html: :tangle ./Blocks/idéal.html :header-args:js: :tangle ./js_vis/Blocks/idéal.js :header-args:css: :tangle ./css/Blocks/idéal.css :END: #+BEGIN_SRC css #+END_SRC #+BEGIN_SRC html idéal

idéal

#+END_SRC #+BEGIN_SRC js #+END_SRC * COMMENT [[https://bl.ocks.org/mbostock/431a331294d2b5ddd33f947cf4c81319][Zoom to Domain]] working exemple :PROPERTIES: :header-args:html: :tangle ./Blocks/zoomToDomain.html :header-args:js: :tangle ./Blocks/js_vis/zoomToDomain.js :header-args:css: :tangle ./Blocks/css/zoomToDomain.css :END: #+BEGIN_SRC css .area { fill: steelblue; clip-path: url(#clip); } #+END_SRC #+BEGIN_SRC html zoomToDomain

zoomToDomain

#+END_SRC #+BEGIN_SRC js var svg = d3.select(".main").attr("width",900).attr("height", 600) margin = {top: 20, right: 20, bottom: 30, left: 40}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom var parseDate = d3.timeParse("%b %Y") var xScale = d3.scaleTime().range([0, width]), yScale = d3.scaleLinear().range([height, 0]) var xAxis = d3.axisBottom(xScale), yAxis = d3.axisLeft(yScale) //? check all this Défini le zoom var zoom = d3.zoom() .scaleExtent([1, 32]) .translateExtent([[0, 0], [width, height]]) .extent([[0, 0], [width, height]]) .on("zoom", zoomed) var area = d3.area() .curve(d3.curveMonotoneX) .x( d => xScale(d.date) ) .y0(height) .y1(d => yScale(d.price) ) svg.append("defs") //? .append("clipPath") //? .attr("id", "clip") .append("rect") .attr("width", width) .attr("height", height) var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") d3.csv("./data/sp500.csv", setType).then(treat) function treat(data) { xScale.domain(d3.extent(data, d => d.date)) //? what is extent ? yScale.domain([0, d3.max(data, d => d.price)]) g.append("path") .datum(data) //? what's datum ? .attr("class", "area") .attr("d", area) // area a function ? g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(xAxis) g.append("g") .attr("class", "axis axis--y") .call(yAxis) var date0 = new Date(2003, 0, 1), date1 = new Date(2004, 0, 1) // Gratuitous intro zoom! svg.call(zoom).transition() .duration(1500) .call(zoom.transform, d3.zoomIdentity // what are all this, what does call do? .scale(width / (xScale(date1) - xScale(date0))) .translate(-xScale(date0), 0)) } function zoomed() { var t = d3.event.transform, xt = t.rescaleX(xScale) g.select(".area").attr("d", area.x(d => xt(d.date))) g.select(".axis--x").call(xAxis.scale(xt)) } function setType(d) { d.date = parseDate(d.date) d.price = +d.price return d } #+END_SRC * [[https://bl.ocks.org/mbostock/431a331294d2b5ddd33f947cf4c81319][Zoom to Domain]] testing :PROPERTIES: :header-args:html: :tangle ./Blocks/testZoomToDomain.html :header-args:js: :tangle ./Blocks/js_vis/testZoomToDomain.js :header-args:css: :tangle ./Blocks/css/testZoomToDomain.css :END: #+BEGIN_SRC css .area { fill: steelblue; clip-path: url(#clip); } #+END_SRC #+BEGIN_SRC html testZoomToDomain

testZoomToDomain

#+END_SRC #+BEGIN_SRC js var svg = d3.select(".main").attr("width",900).attr("height", 600) margin = {top: 20, right: 20, bottom: 30, left: 40}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height") - margin.top - margin.bottom var parseDate = d3.timeParse("%b %Y") var xScale = d3.scaleTime().range([0, width]), yScale = d3.scaleLinear().range([height, 0]) var xAxis = d3.axisBottom(xScale), yAxis = d3.axisLeft(yScale) #+END_SRC [[file:~/DataViz/Javascript/d3/d3-zoom.org]] //? zoom parametrisation #+BEGIN_SRC js var zoom = d3.zoom() .scaleExtent([1, 32]) // définie la puissance du zoom x1 à x32 // -1 ou 0 zoom out infini .translateExtent([[0, 0], [width, height]]) // si width or height diminuée, réduit la partie qui peut être vue translaté la taille translatable .extent([[0, 0], [width, height]]) // modifier la taille de la vue général .on("zoom", zoomed) #+END_SRC [[file:~/DataViz/Javascript/d3/d3-shape.org]] l'aire est définie par deux lignes (courbe eventuellement) données par (x0,y0)s et (x1, y1)s binded to the data #+BEGIN_SRC js var area = d3.area() // définie une générateur d'aire .curve(d3.curveMonotoneX) // définie la façon dont vont être relié les points des la lignes brisé .x( d => xScale(d.date) ) // par défaut le x et x1 sont confondu. seul y et y1 se distinguent .y0(height) // base line .y1(d => yScale(d.price) ) svg.append("defs") // définie un élement de svg pour cadre ce qui sera visible. à l'intérieur du clip visible, à l'extérieur de se réctangle tout invisible // la zone à cliper (visible) .append("clipPath") //? .attr("id", "clip") .append("rect") .attr("width", width) .attr("height", height) var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")") d3.csv("./data/sp500.csv", setType).then(treat) function treat(data) { xScale.domain(d3.extent(data, d => d.date)) //? what is extent ? d3.array give min & max yScale.domain([0, d3.max(data, d => d.price)]) g.append("path") .datum(data) //see d3-selection pas encore très claire .attr("class", "area") .attr("d", area) // area a function return a string path to draw svg g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(xAxis) g.append("g") .attr("class", "axis axis--y") .call(yAxis) var date0 = new Date(2003, 0, 1), date1 = new Date(2004, 0, 1) // Gratuitous intro zoom!... on place le zoom à l'identité pour le départ svg.call(zoom).transition() .duration(1500) // le temps de reset zoom pour .call(zoom.transform, d3.zoomIdentity // what are all this, what does call do? // call, appelle la fonction zoom.transforme avec la selection et les params qui suivent // défini un zoom "tween" .scale(width / (xScale(date1) - xScale(date0))) // on appelle zoom.transforme avec l'échelle présente .translate(-xScale(date0), 0)) // et cela translate par le facteur x,y } function zoomed() { var t = d3.event.transform, xt = t.rescaleX(xScale) g.select(".area").attr("d", area.x(d => xt(d.date))) g.select(".axis--x").call(xAxis.scale(xt)) } function setType(d) { d.date = parseDate(d.date) d.price = +d.price return d } #+END_SRC * line :PROPERTIES: :header-args:html: :tangle ./Blocks/line.html :header-args:js: :tangle ./Blocks/js_vis/line.js :header-args:css: :tangle ./Blocks/css/line.css :END: #+BEGIN_SRC css .area { fill: lightsteelblue; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } .dot { fill: white; stroke: steelblue; stroke-width: 1.5px; } #+END_SRC #+BEGIN_SRC html Line #+END_SRC #+BEGIN_SRC js // var data = d3.range(40).map(function(i) { // return i % 5 ? {x: i / 39, y: (Math.sin(i / 3) + 2) / 4} : null; // }); var dataset; function convert(d){ return { date: new Date(+d.year, (+d.month -1)), average: parseFloat(d.average) }; } d3.csv('./data/co2_mm_mlo_df.csv', convert).then(function(data){ var dataset = data; // draw_all(dataset); var margin = {top: 40, right: 40, bottom: 40, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scaleLinear() .range([0, width]); var y = d3.scaleLinear() .range([height, 0]); var line = d3.line() .defined(function(d) { return d; }) .x(function(d) { return x(d.x); }) .y(function(d) { return y(d.y); }); var svg = d3.select("body").append("svg") .datum(data) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); svg.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)); svg.append("path") .attr("class", "line") .attr("d", line); svg.selectAll(".dot") .data(data.filter(function(d) { return d; })) .enter().append("circle") .attr("class", "dot") .attr("cx", line.x()) .attr("cy", line.y()) .attr("r", 3.5); #+END_SRC * line2 :PROPERTIES: :header-args:html: :tangle ./Blocks/line2.html :header-args:js: :tangle ./Blocks/js_vis/line2.js :header-args:css: :tangle ./Blocks/css/line2.css :END: #+BEGIN_SRC js // var data = d3.range(40).map(function(i) { // return i % 5 ? {x: i / 39, y: (Math.sin(i / 3) + 2) / 4} : null; // }); var data; function convert(d){ return { date: new Date(+d.year, (+d.month -1)), value: parseFloat(d.average) }; } d3.csv('./data/co2_mm_mlo_df.csv', convert).then(function(dataset){data = dataset;}) var margin = {top: 40, right: 40, bottom: 40, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var x = d3.scaleTime() .range([0, width]); .domain(d3.extent(data, d=>d.date)); var y = d3.scaleLinear() .range([height, 0]); .domain([0, d3.max(data, d=>d.value)]); var line = d3.line() .defined(function(d) { return d; }) .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.value); }); var svg = d3.select("body").append("svg") .datum(data) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); svg.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)); svg.append("path") .attr("class", "line") .attr("d", line); // svg.selectAll(".dot") // .data(data.filter(function(d) { return d; })) // .enter().append("circle") // .attr("class", "dot") // .attr("cx", line.x()) // .attr("cy", line.y()) // .attr("r", 3.5); #+END_SRC #+BEGIN_SRC css .area { fill: lightsteelblue; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } .dot { fill: white; stroke: steelblue; stroke-width: 1.5px; } #+END_SRC #+BEGIN_SRC html Line2 #+END_SRC