D3.js - A picture is worth a thousand words
•Download as PPTX, PDF•
0 likes•599 views
This document provides an overview of D3.js, a JavaScript library for data visualization. It discusses why data visualization is useful, some key concepts in D3 like selections, entering and updating data, and creating reusable components. It also covers transitions, scales, axes, SVG, and common layouts. The document encourages exploring more examples on the bl.ocks website and concludes by thanking the audience.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to D3.js - A picture is worth a thousand words
Similar to D3.js - A picture is worth a thousand words (20)
Recently uploaded
Recently uploaded (20)
D3.js - A picture is worth a thousand words
- 1. D3.js A picture is worth a thousand words
- 2. Why data visualization? <- Because of that
- 3. But what do we GET? { “id” : 6, “wall_id” : 55, “resource_id” : 42, “project_id” : 3, “hours” : 3, “intervals” : [ { “start_date” : “2016-05-06” , “end_date” : “2016-05-08” , “booking_id” : 6 } , { “start_date” : “2016-05-19” , “end_date” : “2016-05-19” , } , { “start_date” : “2016-05-21” , “end_date” : “2016-05-24” , “booking_id” : 6 } , { “start_date” : “2016-06-01” , “end_date” : “2016-10-25” , “booking_id” : 6 }
- 5. The imperative one For each of the element do… Change width to 100px and then… Rotate if rotate===true… ... Then debug
- 6. The declarative one I want the elements to be there (I want an animation for the elements that are not there) I don’t give a … how it all happens
- 7. D3 is... Declarative approach Data-oriented Lots of built-in stuff
- 8. Basics of D3 - selection JS var selection = d3.select('#root') .selectAll('span'); HTML <div id="root"> </div> ● Looks a bit empty
- 9. Basics of D3 - enter, update, exit JS var updateSelection = d3.select('#root') .selectAll('span'); .data([ 'Lorem', 'Ipsum' ]); updateSelection.enter().append('span'); updateSelection.text(el => el); updateSelection.exit().remove(); HTML <div id="root"> <span>Lorem</span> <span>Ipsum</span> </div>
- 11. Basics of D3 - complete render function let render = function(data) { let selection = d3.select('#root').selectAll('span'); let updateSelection = selection.data(data); updateSelection.enter().append('span'); updateSelection.text(d => d); updateSelection.exit().remove(); };
- 12. Components (codepen) let spanComponent = function(selection) { let updateSelection = selection.selectAll('span').data(data => data.lorem); updateSelection.enter().append('span'); updateSelection.text(d => d + ' '); updateSelection.exit().remove(); }; let render = function(data) { let selection = d3.select('#root').selectAll('div'); let updateSelection = selection.data(data); updateSelection.enter().append('div'); updateSelection.call(spanComponent); updateSelection.exit().remove(); }; render([{lorem: ['foo', 'bar']}, {lorem: ['ipsum', 'dolor']}]);
- 13. Transitions (codepen) let spanComponent = function(selection) { let updateSelection = selection.selectAll('span').data(data => data.lorem); updateSelection.enter().append('span') .style('opacity', 0) .transition() .delay((d, i) => i * 400) .duration(500) .style('opacity', 1); updateSelection .text(d => d + ' '); updateSelection.exit().remove(); };
- 14. Scales let myLinearScale = d3.scale .linear() .domain([0, 10]) .range([0, 800]); let x = myLinearScale(5); console.log(x); // prints 400
- 15. Scales (2) let myTimeScale = d3.time .scale() .domain([new Date('2016-01-01'), new Date('2017-01-01')]) .range([0, 800]); let anyDate = new Date('2016-05-10'); let x = myTimeScale(anyDate); myTimeScale.invert(x); // equals anyDate
- 16. SVG, Axes (codepen) let svg = d3.select('#root').append('svg') .attr("width", 300) .attr("height", 300); let x = d3.scale.linear() .range([0, 300]); let xAxis = d3.svg.axis() .ticks(4) .scale(x); svg.append("g") .attr("transform", "translate(0,100)") .call(xAxis); let line = d3.svg.line() .x(d => d.x) .y(d => d.y) .interpolate('monotone'); svg.data([[ {x: x(0.1), y: 60}, {x: x(0.3), y: 20}, {x: x(0.5), y: 30}, {x: x(0.7), y: 10}, {x: x(0.9), y: 80} ]]); svg.append("path") .attr('fill', 'none') .attr('stroke', '#000') .attr("d", line);
- 17. Layouts
- 18. And much more A lot of examples here: https://bl.ocks.org/mbostock
- 19. Thank you for your attention! Tymoteusz Bleja Junior Frontend Developer @ Apptension