playing with d3.js
DESCRIPTION
TRANSCRIPT
Agenda• What is d3.js?• Why d3?– (example show)
• Environment– (Getting started)
• Reference
What is d3.js?• Data-Driven Documents (by Michael Bostock)– It is a library for manipulating HTML based on data.– Free, lightweight JavaScript library, it’s like jQuery and
others javascript framework– D3 allows you to bind arbitrary data to a Document Object
Model (DOM), and then apply data-driven transformations to the document.
– It’s a new visualization library to build visualizations in SVG.
– It can be used to visualise data using HTML or SVG, and supports interactivity and animations.
Three Little Circles.
Once upon a time, there were three little circles…
Why d3?
• The community is very responsive.• Source code is very clean.• API is well written.• they are very good introductions and you can
find plenty of examples packaged with the source code or hidden in forums.
• Visualization of data non Flash.• Funny!
DEMO
Environment
• d3.js libraries• Your favorite Browser – (supports CSS3 & HTML5)
• Your favorite editor.• Full of
Getting started.
example 1<html>
<head><script src="../d3.js"></script>
</head><body>
<div class="chart" id="chart"></div><script>
var data = [2, 16, 28, 25, 29]; // set raw datavar chart = d3.select("#chart");
chart.style("width", 300) // set object range style.style("text-align","right").style("border", "3px").style("border-style", "solid").style("border-color", "pink");
chart.selectAll("div") // set all items bind data and style
.data(data)
.enter()
.append("div")
.text(function(item) { return item;
}).style("width", function(item) {
return item * 10 + "px";}).style("background-color", "steelblue").style("color", "white").style("margin", "1.5px");
</script></body>
</html>
example 2<html>
<head><script type="text/javascript" src="../d3.js"></script>
</head><body>
<div id='viz'></div><div id='haha'></div><script>
var sampleSVG = d3.select("#viz").append("svg:svg").style("width", "200px").style("height", "200px").style("border-style","solid").style("border-color","steelblue");
sampleSVG.append("svg:circle")
.style("stroke", "deeppink")
.style("stroke-width", "3px")
.style("fill", "steelblue")
.attr("r", 40) // r : circle's radius.
.attr("cx", 50) // cx: x-axis center of the circle
.attr("cy", 50) // cy: y-axis center of the circle
.transition() // start to change #viz’s style
.delay(200) // wait (1/1000 second)
.duration(1000) // duration to change the style (1/1000sec)
.attr("r", 10) // r : circle's radius.
.attr("cx", 185) // cx: x-axis center of the circle
.attr("cy",185) // cy: y-axis center of the circle
.style("fill", "pink")
.transition()
.delay(1000)
.duration(1000);</script>
</body></html>
Reference• Overview - http://mbostock.github.com/d3/• library - https://github.com/mbostock/d3/archives/master• API Reference1 - http://mbostock.github.com/d3/api/• API Reference2 - https://github.com/mbostock/d3/wiki/• protovis - http://mbostock.github.com/protovis/• community - https://groups.google.com/forum/#!forum/d3-js• What is Method_chaining? - http://en.wikipedia.org/wiki/Method_chaining• What is DOM? (W3C) - Document Object Model (DOM) Technical Reports• What is SVG? - http://www.w3schools.com/svg/svg_intro.asp• others funny implement
http://www.dotblogs.com.tw/ajun/archive/2011/11/07/53832.aspxLots of Tutorial about D3 - http://www.janwillemtulp.com/category/d3/Interview on Fell In Love With Data - http://fellinlovewithdata.com/guides/tftp-jan-willem-d3-protovisd3.js, log.io, Buzz - http://dailyjs.com/2011/07/08/d3-logio/D3.js is Not a Graphing Library, Let's Design a Line Graph - http://dealloc.me/2011/06/24/d3-is-not-a-graphing-library.htmlBuilding a Tree Diagram in D3.js - http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/Try D3 Now - http://christopheviau.com/d3_tutorial/Useful JavaScript and jQuery Tools, Libraries, Plugins - http://coding.smashingmagazine.com/2011/04/07/useful-javascript-and-jquery-tools-libraries-plugins/ What's a good real-time data visualization framework? - http://www.quora.com/What-s-a-good-real-time-data-visualization-framework
• 20 Fresh JavaScript Data Visualization Libraries – http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
• Ida’s practice- http://omg3q9527.appspot.com/test01.jsp
Thank you