![Let’s break it down - Candlesticks
[
{ open: 43.5, close: 23.6, high: 51.7, low: 18.9 },
{ open: 23.6, close: 39.8, high: 41.2, low: 11.2 },
...
]](https://image.slidesharecdn.com/lykaiowang-datavisualizationinweb-190121010433/85/Lykaio-Wang-Data-Visualization-in-Web-9-320.jpg)
![Let’s Break it Down - Trees
http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html
https://d3-wiki.readthedocs.io/zh_CN/master/Tree-Layout/
{
"name": "Top Node",
"children": [
{
"name": "Bob: Child of Top Node",
"parent": "Top Node",
"children": [
{
"name": "Son of Bob",
"parent": "Bob: Child of Top Node"
},
{
"name": "Daughter of Bob",
"parent": "Bob: Child of Top Node"
}
]
},
{
"name": "Sally: Child of Top Node",
"parent": "Top Node"
}
]
}](https://image.slidesharecdn.com/lykaiowang-datavisualizationinweb-190121010433/85/Lykaio-Wang-Data-Visualization-in-Web-11-320.jpg)
Lykaio Wang - Data Visualization in Web
- 2. Co-founder & CTO /in/lykaiowang
- 3. Why does it matter? AccessibilityFreedom Diversity
- 4. Context changes everything. DOM SVG Canvas WebGL https://philogb.github.io/philogl/PhiloGL/examples/worldFlights/https://developer.mozilla.org/kab/docs/Web/API/Canvas_APIhttps://svgontheweb.com/https://en.wikipedia.org/wiki/Document_Object_Model
- 5. Tools of the Trade. Use Case Tools Pros Cons Standard Bar / Pie / Line Charts Chartist.js; Chart.js Ease of Use Limited Customizability; Lack of granular control Highly Interactive, animation heavy non-standard visualizations Pixi.js; Three.js Performant; Powerful; Steep learning curve; Overkill for simple datasets; My hair is on fire!!! Highcharts; Chartio Tight integration with data infrastructure; Point and Click Vendor Lock-in; Close-Sourced; Pricey Simple / Complex Visualizations; Moderate amount of animations; Independent codebase; D3.js Functional; Mathematical; Modular; Flexible; Large active community; 3D
- 6. A few Concepts. 1. D3 Can Manipulate the DOM (Document Object Model) https://medium.freecodecamp.org/learn-d3-js-in-5-minutes-c5ec29fb0725 Today is a beautiful day!! Today is a beautiful day!!
- 7. A few Concepts. 2. D3 Can Bind Data to the DOM
- 8. A few Concepts. 3. D3 Can Create SVGs
- 9. Let’s break it down - Candlesticks [ { open: 43.5, close: 23.6, high: 51.7, low: 18.9 }, { open: 23.6, close: 39.8, high: 41.2, low: 11.2 }, ... ]
- 10. Let’s break it down - Choropleth https://medium.com/@anilnairxyz/choropleth-map-using-d3-a8cfa9c5e209 https://github.com/topojson/topojson/wiki/Introduction
- 11. Let’s Break it Down - Trees http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html https://d3-wiki.readthedocs.io/zh_CN/master/Tree-Layout/ { "name": "Top Node", "children": [ { "name": "Bob: Child of Top Node", "parent": "Top Node", "children": [ { "name": "Son of Bob", "parent": "Bob: Child of Top Node" }, { "name": "Daughter of Bob", "parent": "Bob: Child of Top Node" } ] }, { "name": "Sally: Child of Top Node", "parent": "Top Node" } ] }
- 12. Takeaways D3 is very modular, start messing around with it. Focus on the data, not the syntax. Google is your best friend, don’t reinvent the wheel.