SlideShare a Scribd company logo

d3jsではじめるデータビジュアライゼーション入門

•
•
Kohei Kadowaki
Kohei Kadowaki

The document discusses visualizing Wikipedia data using force-directed graphs and Voronoi diagrams with the JavaScript library d3.js. It provides examples of basic charts created with d3.js by selecting DOM elements and binding data to append child elements. The examples demonstrate how to update the chart by rebinding new data and removing old data elements.

1 of 50
Downloaded 88 times
1
2
3
4
5
6
7
Chris Harrison - WikiViz: Visualizing Wikipedia http://www.chrisharrison.net/projects/wikiviz/index.html Wow! The foursquare community has over 10,000,000 members! | Foursquare Blog http://blog.foursquare.com/2011/06/20/holysmokes10millionpeople/ 8
9
10
d3.js - http://mbostock.github.com/d3/ 11
12
d3.js ~ Force-Directed Graph d3.js ~ Voronoi Diagram http://mbostock.github.com/d3/ex/force.html http://mbostock.github.com/d3/ex/voronoi.html 13
14
15
16
17
18
19
20
21
[ {year: 2007, account: 200}, {year: 2008, account: 250}, {year: 2009, account: 300} ] 22
23
24
25
26
27
div.chart div div div 28
29
30
31
// CSS Selection var chart = d3.selectAll('.chart'); // chart.append('div').style('width','200px').text('200'); d3.selectAll(‘.chart’) $(‘.chart’) 32
33
[ {year: 2007, account: 200}, {year: 2008, account: 250}, {year: 2009, account: 300} ] 34
35
// '.chart div' chart.selectAll('div').data(data) .style('width', function(d) { return d.account + "px"; }) 36
37
[ {year: 2010, account: 250}, {year: 2011, account: 20} ] 38
39
chart.selectAll('div').data(data) .enter().append('div') 250 40
41
42
43
44
selection.exit().remove(); 45
46
47
48
49
50

More Related Content

d3jsではじめるデータビジュアライゼーション入門