Data Visualization
“Data visualization is both an art and a science”
Presenter：Chi-Hsuan, Huang @ Netdb.NCKU
What is data visualization?
[McCormick et al. 1987]
Why Data Visualization?
About 70% of all the sensory receptors in the body are in the eyes.
（JSON、CSV、XML）
Besides, visualization is more...
The Goal of Data Visualization
A primary goal of data visualization is to communicate information clearly and efficiently to users.
Effective visualization also helps
users in analyzing and reasoning about data.
and makes complex data more
accessible, understandable and usable.
Turn data into information, and information into insight.
--Carly Fiorina, Former CEO of HP
How to Creating a Visualization?
Which Chart?
Why Web？
After creating visualizations,
should be notice that does it convey the data
honestly?
D3.js
Data-Driven DocumentsQuora：How do I learn D3.js?
HTML
<html>
<head>
</head>
<body>
Hello, world!
</body>
</html>
CSS
<style>
body {
background-color: black;
}
</style>
Javascript
<script>
// Array
var arr = [1, 2, 3, 4, 5];
// Object
var obj = {
key: 'value'
};
// Also have if control, for loop...
for (var i = 0; i < 10; ++i) {}
// Print
console.log(arr);
</script>
SVG - Three Little Circles
Data ←→ DOM
Selection
var svg = d3.select("body").append("svg");
d3.selectAll("circle")
.attr("cx", 20)
.attr("cy", 12)
.attr("r", 24)
.style("fill", "red");
Binding Data
Data are Arrays
var data = [1, 1, 2, 3, 5, 8];
Concept of Data Join
var circle = svg.selectAll("circle")
data([32, 57, 293], function(d) { return d; });
circle.enter().append("circle");
Enter
Key Function
var data = [
{name: "Alice", x: 10.0, y: 9.14},
{name: "Bob", x: 8.0, y: 8.14},
{name: "Carol", x: 13.0, y: 8.74},
{name: "Dave", x: 9.0, y: 8.77},
{name: "Edith", x: 11.0, y: 9.26}
];
function key(d) { return d.name; }
var circle = svg.selectAll("circle")
.data(data, key)
.attr("cx", x)
.attr("cy", y)
.attr("r", 2.5);
Loading Data
- csv -> d3.csv
- json -> d3.json
d3.csv("stocks.csv", function(stocks) {
// your code
});
Scale
Scale
var x = d3.scale.linear()
.domain([12, 24])
.range([0, 720]);
Axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
Transition (animation)
Transition
svg.on("click", function(){
path
.transition()
.duration(2000)
.ease("linear")
.attr("stroke-dashoffset", totalLength);
})
HTML5 Canvas
Dynamic rendering of 2D shapes and bitmap imagesSVG vs Canvas
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
Leaflet
A JavaScript library for interactive maps
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.
Easily customizable.')
.openPopup();
Summary
- Data visualization is a process of mapping information to visuals.
- The power of data visualization as a way to influence and persuade their audience.
- D3：A powerful tool for custom, web-based visualization.
- Canvus：A javascript graph visualization toolkit with high performance.
- leafletjs：An open-source JavaScript library for mobile-friendly interactive maps.
Have fun, learning by doing