D3 BASIC TUTORIALIntroduction, installation and simple examples.

2016.10@hijiangtao

https://hijiangtao.github.io/

MENUD3 Introduction and demoInstalling, IDE, etcCoding: visualize your rstchartMore

D3 INTRODUCTION AND DEMO

D3 INTRODUCTIOND3 (or D3.js) is a JavaScript library for visualizing datausing web standards.D3 helps you bring data to life using SVG, Canvas andHTML.D3 combines powerful visualization and interactiontechniques with a data-driven approach to DOMmanipulation, giving you the full capabilities of modernbrowsers and the freedom to design the right visualinterface for your data.

D3JS.ORG

https://d3js.org/

ONLINE GALLERYCharts: Tree, Chord, and Sankey: Networks: Maps: Trending:

Population PyramidSankey Diagrams

Collapsible Force LayoutTokyo Wind Map

World Bank Global DevelopmentSprint

http://bl.ocks.org/mbostock/4062085https://bost.ocks.org/mike/sankey/http://mbostock.github.io/d3/talk/20111116/force-collapsible.htmlhttp://air.nullschool.net/http://d3.artzub.com/wbca/

HTML, SVG AND CANVASHTML: Hyper Text Markup Language, is a markup languagefor describing web documents (web pages)SVG: Scalable Vector Graphics. SVG denes vector-basedgraphics in XML formatCanvas: The element is only a container forgraphics. You must use a JavaScript to actually draw thegraphics. Canvas has several methods for drawing paths,boxes, circles, text, and adding images

INSTALLING, IDE, ETC

INSTALLING//Useascripttagtoincludelibrary//d34.0standardversion

//d34.0minifiedversion

//d33.xversion

//ImportD3intoanapplicationnpminstalld3//installingcommandimport*asd3from"d3"//useinapplication

//includestandaloneD3microlibraries

//orimport{scaleLinear}from"d3scale"

INSTALLINGAPI: ( , , ,

), , , , ( ,...

After include the library into your workspace, you can usenamespace d3 to visualize your data, such as:

Arrays Statistics Search TransformationsHistograms Axes Brushes Chords Collections ObjectsMaps

d3.select("body").append("p").text("Newparagraph!")

https://github.com/d3/d3/blob/master/API.md#arrays-d3-arrayhttps://github.com/d3/d3/blob/master/API.md#statisticshttps://github.com/d3/d3/blob/master/API.md#searchhttps://github.com/d3/d3/blob/master/API.md#transformationshttps://github.com/d3/d3/blob/master/API.md#histogramshttps://github.com/d3/d3/blob/master/API.md#axes-d3-axishttps://github.com/d3/d3/blob/master/API.md#brushes-d3-brushhttps://github.com/d3/d3/blob/master/API.md#chords-d3-chordhttps://github.com/d3/d3/blob/master/API.md#collections-d3-collectionhttps://github.com/d3/d3/blob/master/API.md#objectshttps://github.com/d3/d3/blob/master/API.md#maps

IDEMicrosoft Notepad

: A sophisticated text editor for code, markupand prose

: The smartest JavaScript IDE: Capable and Ergonomic Java * IDE

: Eclipse IDE for JavaScript Web Developers: A hackable text editor

: A free source code editor

Sublime Text

WebstormIntelliJ IDEAEclipseAtomNotepad++

https://www.sublimetext.com/https://www.jetbrains.com/webstorm/https://www.jetbrains.com/idea/?fromMenuhttps://eclipse.org/https://atom.io/https://notepad-plus-plus.org/

SERVER CONFIGURATION: WAMP, LAMP, MAMP and XAMPP: A JavaScript runtime built on Chrome's V8

JavaScript engine: A platform-independent, Java-centric environment

: SimpleHTTPServer, Simple HTTP request handlerin python 2Others

ApacheNode.js

J2EEPython

https://httpd.apache.org/https://nodejs.org/en/http://www.oracle.com/technetwork/java/javaee/overview/index.htmlhttps://docs.python.org/2/library/simplehttpserver.html

4 STEPS TO VISUALIZE YOUR FIRST CHARTConstruct a simple bar chart from TSV le

0. DATA

1. A HTML TEMPLATE

D3Tutorial

.bar{ fill:steelblue } .bar:hover{ fill:brown } .axisxpath{ display:none }

2. INITIAL SVG AND SCALE//appendasvgelementanddefinemarginsvarsvg=d3.select("#barchart") .append("svg") .attr("width",960) .attr("height",500),margin={top:20,right:20,bottom:30,left:40},width=+svg.attr("width")margin.leftmargin.right,height=+svg.attr("height")margin.topmargin.bottom

//Constructsanewbandscale(x)andanewcontinuousscale(y)varx=d3.scaleBand().rangeRound([0,width]).padding(0.1),y=d3.scaleLinear().rangeRound([height,0])

//appendgelementvartransStr="translate("+margin.left+","+margin.top+")"varg=svg.append("g").attr("transform",transStr)

3. LOAD AND FORMAT DATA//d3tsvFunction//CreatesarequestfortheTSVfileatthespecifiedurl//withthedefaultmimetypetext/tabseparatedvaluesd3.tsv(url,row,callback)

d3.tsv("d3tutorialtsvdata.tsv",function(d){d.frequency=+d.frequencyreturnd},barchartCallback)

Requests (d3-request)

- get a comma-separated values (CSV) le. - get an HTML le.

- get a JSON le. - get a plain text le.

- get a tab-separated values (TSV) le. - get an XML le.

d3.csvd3.htmld3.jsond3.textd3.tsvd3.xml

https://github.com/d3/d3-request/blob/master/README.md#csvhttps://github.com/d3/d3-request/blob/master/README.md#htmlhttps://github.com/d3/d3-request/blob/master/README.md#jsonhttps://github.com/d3/d3-request/blob/master/README.md#texthttps://github.com/d3/d3-request/blob/master/README.md#tsvhttps://github.com/d3/d3-request/blob/master/README.md#xml

4. BIND DATA AND UPDATE ELEMENTfunctionbarchartCallback(error,data){if(error)throwerror

//Givenavaluefromthedomain//returnsthecorrespondingvaluefromtherange.x.domain(data.map(function(d){ returnd.letter}))y.domain([0,d3.max(data,function(d){ returnd.frequency})])

//xaxisg.append("g").attr("class","axisaxisx").attr("transform","translate(0,"+height+")").call(d3.axisBottom(x))

5. COMPLETE CODES

D3Tutorial

.bar{fill:steelblue}.bar:hover{fill:brown}.axisxpath{display:none}

https://github.com/ISCAS-VIS/infovis-ucas/blob/master/views/TA/d3-tutorial-bar-chart.html

6. RESULT

https://iscas-vis.github.io/infovis-ucas/views/TA/d3-tutorial-bar-chart.html

MOREBe careful about the API's differences between 4.0 and 3.x

Be careful about async loading in JavaScript

Make good use of Google, Stack Overow, etc.

MORE

, Mike Dewar, O'Reilly Media, June2012

, ,

/ English Version

D3 WIKID3 API ReferenceD3 GalleryMike's BlogTutorialsGetting Started with D3

D3.js

JavaScript3Professional JavaScript for Web Developers 3rd Edition

https://github.com/d3/d3/wikihttps://github.com/d3/d3/blob/master/API.mdhttps://github.com/d3/d3/wiki/Galleryhttp://bost.ocks.org/mike/https://github.com/d3/d3/wiki/Tutorialshttps://book.douban.com/subject/10877588/https://book.douban.com/subject/26599680/https://book.douban.com/subject/25760272/https://book.douban.com/subject/10546125/https://book.douban.com/subject/7157249/

THE END@hijiangtao

- - -

d3js.orgVIS Course (2016 Fall) WikiJoe's Blog

https://d3js.org/http://vis.ios.ac.cn/UCAS_16_Fall/https://hijiangtao.github.io/