Lykaio Wang (https://www.linkedin.com/in/lykaiowang/) discusses visualizing data in a web browser environment by initially discussing a few popular data visualizatoin libraries, and then dive further into the pros and cons of D3. Lykaio will show you why D3 is so powerful and how you can leverage it to visualize tabular, graph, geospatial or any other type of data.

1. Data
Visualization
in Web
Lykaio Wang

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.

13. Thank You.
Questions?