SlideShare a Scribd company logo
Internet Week supports New York’s vibrant tech-based
economy and celebrates the entrepreneurial spirit and
global impact of technology on business, entertainment
and culture. The festival highlights the innovators
building the new economy and creating opportunity,
while educating and empowering attendees to
succeed.
•
•
•
•
•
•
•
•
•
•
Data visualization is a general term that describes any
effort to help people understand the significance
of data by placing it in a visual context.
This is just an infographic
Bind data with graphic elements in a context
• The traditional Bar Charts and Pie Chars are boring.
• There is too much data. The user needs a easy and
engaging way to interact with it.
• Open source in github
• It needs to be dynamic and fast.
• It is a tool for the web
D3 vs Jquery
Jquery: Easy to use. Less code. More Stable.
Compatible. Uses lots of plug-ins.
D3: Learning curve. Data binding. Physics engine. Works
in modern browsers. Uses SVGs a lot. Lots of code.
SVG are scalable vector graphics. They are an HTML element. You
cannot embed a HTML element inside another SVG.
It supports interactivity and animation
SVG images can be searched, indexed, scripted, and compressed.
SVG images can be printed with high quality at any resolution.
Modified through script and CSS
SVG images can contain hyperlinks to other documents
Enjoys of pretty good support in desktop and mobile browsers. It
does not work in IE9and below.
Its browser dependent. Always define your heights and widths.
SVG vs CANVAS
https://www.sitepoint.com/canvas-vs-svg-how-to-choose/
<svg width="400" height="110">
<rect width="300" height="100“
style="fill:rgb(0,0,255);strokewidth:3;stroke:rgb(0,0,0)">
</svg>
http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-
the-facebook-offering-compares.html
http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-
graphic.html
D3 Application Document Structure
<!DOCTYPE HTML>
<html>
<style>
<body>
[CONTENT]
<script src="d3.js"></script>
<script src="myscripts.js"></script>
</body>
</html>
D3 Selectors
var word = $('div p');
var word =
d3.select('div').selectAll('p');
transitions()
var svg = d3.select("svg")
var mySquare=svg.append("rect")
.attr("x",60)
.attr("y",60)
.attr("width",200)
.attr("height",200);
mySquare.transition()
.duration(2000)
.attrTween("x", d3.interpolate(60,400))
D3 Update Pattern
data()
enter()
exit()
remove()
DATA()
d3.selectAll('p')
.data([0, 1, 2, 3, 4, 5]);
ENTER()
d3.selectAll('p')
.data([0, 1, 2, 3, 4, 5])
.enter();
EXIT() & REMOVE()
var points = d3('body').selectAll('div')
.data(newData);
points.enter().append('p');
points.exit().remove();
SCALES
var points = d3.scale.linear();
https://github.com/d3/d3/wiki/Quantitative-Scales
Samples
http://bl.ocks.org/mbostock/1096355
Samples
http://bl.ocks.org/mbostock/4062045
http://bl.ocks.org/mbostock/b07f8ae91c5e9e45719c
Samples
Can I use D3 in mobile applications?
Projects with D3
http://pykih.github.io/PykCharts.js/
https://github.com/densitydesign/raw/
https://plot.ly/
NYC Open Data
https://nycopendata.socrata.com/
Links and Tutorials
TEDTalk about DV
https://www.youtube.com/watch?v=5Zg-C8AAIGg
D3.js youtube playlist
https://www.youtube.com/watch?v=n5NcCoa9dDU&list=PL6il2r9i3Bq
H9PmbOf5wA5E1wOG3FT22p
Lynda.com
FreecodeBootcamp.com
Best Practices for DV
https://www.youtube.com/watch?v=pD_OvRtH0aY

More Related Content

Similar to Data visualization with d3 may19

Learn svg
Learn svgLearn svg
Learn svg
FitBlar Mit
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
Gjokica Zafirovski
 
Shivaji PPT.pptx
Shivaji PPT.pptxShivaji PPT.pptx
Shivaji PPT.pptx
BONUSAIVENKATADEEPAK
 
RENUGA VEERARAGAVAN Resume HADOOP
RENUGA VEERARAGAVAN Resume HADOOPRENUGA VEERARAGAVAN Resume HADOOP
RENUGA VEERARAGAVAN Resume HADOOP
renuga V
 
Social data visualization
Social data visualizationSocial data visualization
Social data visualization
Cristina Serban
 
A brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layoutsA brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layouts
Tim Wray
 
Intel AppUp Day Bologna
Intel AppUp Day BolognaIntel AppUp Day Bologna
Intel AppUp Day Bologna
Andrea Balducci
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
Daryll Chu
 
Practical html5
Practical html5Practical html5
Practical html5
Maurice De Beijer [MVP]
 
SummerTerm_PPT.pptx
SummerTerm_PPT.pptxSummerTerm_PPT.pptx
SummerTerm_PPT.pptx
Uday742276
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
Cool Sky
 
Crafting the Digital Tapestry: Unveiling the Artistry of Web Development
Crafting the Digital Tapestry: Unveiling the Artistry of Web DevelopmentCrafting the Digital Tapestry: Unveiling the Artistry of Web Development
Crafting the Digital Tapestry: Unveiling the Artistry of Web Development
AppDevelopmentCompan1
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
Ivano Malavolta
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
Mediacurrent
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
 
Azmone Presentation : Light Color Version
Azmone Presentation : Light Color VersionAzmone Presentation : Light Color Version
Azmone Presentation : Light Color Version
Madlis
 
Azmone Presentation : Dark Color Version
Azmone Presentation : Dark Color VersionAzmone Presentation : Dark Color Version
Azmone Presentation : Dark Color Version
Madlis
 
KarthikeyanRamalingam_New
KarthikeyanRamalingam_NewKarthikeyanRamalingam_New
KarthikeyanRamalingam_New
Karthikeyan Ramalingam
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
brucelawson
 

Similar to Data visualization with d3 may19 (20)

Learn svg
Learn svgLearn svg
Learn svg
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
 
Shivaji PPT.pptx
Shivaji PPT.pptxShivaji PPT.pptx
Shivaji PPT.pptx
 
RENUGA VEERARAGAVAN Resume HADOOP
RENUGA VEERARAGAVAN Resume HADOOPRENUGA VEERARAGAVAN Resume HADOOP
RENUGA VEERARAGAVAN Resume HADOOP
 
Social data visualization
Social data visualizationSocial data visualization
Social data visualization
 
A brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layoutsA brief introduction on HTML5 and responsive layouts
A brief introduction on HTML5 and responsive layouts
 
Intel AppUp Day Bologna
Intel AppUp Day BolognaIntel AppUp Day Bologna
Intel AppUp Day Bologna
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
 
Practical html5
Practical html5Practical html5
Practical html5
 
SummerTerm_PPT.pptx
SummerTerm_PPT.pptxSummerTerm_PPT.pptx
SummerTerm_PPT.pptx
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
 
Crafting the Digital Tapestry: Unveiling the Artistry of Web Development
Crafting the Digital Tapestry: Unveiling the Artistry of Web DevelopmentCrafting the Digital Tapestry: Unveiling the Artistry of Web Development
Crafting the Digital Tapestry: Unveiling the Artistry of Web Development
 
[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher[2015/2016] HTML5 and CSS3 Refresher
[2015/2016] HTML5 and CSS3 Refresher
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
Azmone Presentation : Light Color Version
Azmone Presentation : Light Color VersionAzmone Presentation : Light Color Version
Azmone Presentation : Light Color Version
 
Azmone Presentation : Dark Color Version
Azmone Presentation : Dark Color VersionAzmone Presentation : Dark Color Version
Azmone Presentation : Dark Color Version
 
KarthikeyanRamalingam_New
KarthikeyanRamalingam_NewKarthikeyanRamalingam_New
KarthikeyanRamalingam_New
 
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 

Recently uploaded

一比一原版莱斯大学毕业证(rice毕业证)如何办理
一比一原版莱斯大学毕业证(rice毕业证)如何办理一比一原版莱斯大学毕业证(rice毕业证)如何办理
一比一原版莱斯大学毕业证(rice毕业证)如何办理
zsafxbf
 
A gentle exploration of Retrieval Augmented Generation
A gentle exploration of Retrieval Augmented GenerationA gentle exploration of Retrieval Augmented Generation
A gentle exploration of Retrieval Augmented Generation
dataschool1
 
Namma-Kalvi-11th-Physics-Study-Material-Unit-1-EM-221086.pdf
Namma-Kalvi-11th-Physics-Study-Material-Unit-1-EM-221086.pdfNamma-Kalvi-11th-Physics-Study-Material-Unit-1-EM-221086.pdf
Namma-Kalvi-11th-Physics-Study-Material-Unit-1-EM-221086.pdf
22ad0301
 
Data Scientist Machine Learning Profiles .pdf
Data Scientist Machine Learning  Profiles .pdfData Scientist Machine Learning  Profiles .pdf
Data Scientist Machine Learning Profiles .pdf
Vineet
 
一比一原版马来西亚博特拉大学毕业证(upm毕业证)如何办理
一比一原版马来西亚博特拉大学毕业证(upm毕业证)如何办理一比一原版马来西亚博特拉大学毕业证(upm毕业证)如何办理
一比一原版马来西亚博特拉大学毕业证(upm毕业证)如何办理
eudsoh
 
Discovering Digital Process Twins for What-if Analysis: a Process Mining Appr...
Discovering Digital Process Twins for What-if Analysis: a Process Mining Appr...Discovering Digital Process Twins for What-if Analysis: a Process Mining Appr...
Discovering Digital Process Twins for What-if Analysis: a Process Mining Appr...
Marlon Dumas
 
一比一原版多伦多大学毕业证(UofT毕业证书)学历如何办理
一比一原版多伦多大学毕业证(UofT毕业证书)学历如何办理一比一原版多伦多大学毕业证(UofT毕业证书)学历如何办理
一比一原版多伦多大学毕业证(UofT毕业证书)学历如何办理
eoxhsaa
 
一比一原版(uob毕业证书)伯明翰大学毕业证如何办理
一比一原版(uob毕业证书)伯明翰大学毕业证如何办理一比一原版(uob毕业证书)伯明翰大学毕业证如何办理
一比一原版(uob毕业证书)伯明翰大学毕业证如何办理
9gr6pty
 
reading_sample_sap_press_operational_data_provisioning_with_sap_bw4hana (1).pdf
reading_sample_sap_press_operational_data_provisioning_with_sap_bw4hana (1).pdfreading_sample_sap_press_operational_data_provisioning_with_sap_bw4hana (1).pdf
reading_sample_sap_press_operational_data_provisioning_with_sap_bw4hana (1).pdf
perranet1
 
一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理
ugydym
 
Senior Software Profiles Backend Sample - Sheet1.pdf
Senior Software Profiles  Backend Sample - Sheet1.pdfSenior Software Profiles  Backend Sample - Sheet1.pdf
Senior Software Profiles Backend Sample - Sheet1.pdf
Vineet
 
一比一原版兰加拉学院毕业证(Langara毕业证书)学历如何办理
一比一原版兰加拉学院毕业证(Langara毕业证书)学历如何办理一比一原版兰加拉学院毕业证(Langara毕业证书)学历如何办理
一比一原版兰加拉学院毕业证(Langara毕业证书)学历如何办理
hyfjgavov
 
一比一原版(曼大毕业证书)曼尼托巴大学毕业证如何办理
一比一原版(曼大毕业证书)曼尼托巴大学毕业证如何办理一比一原版(曼大毕业证书)曼尼托巴大学毕业证如何办理
一比一原版(曼大毕业证书)曼尼托巴大学毕业证如何办理
ytypuem
 
一比一原版(UO毕业证)渥太华大学毕业证如何办理
一比一原版(UO毕业证)渥太华大学毕业证如何办理一比一原版(UO毕业证)渥太华大学毕业证如何办理
一比一原版(UO毕业证)渥太华大学毕业证如何办理
bmucuha
 
Econ3060_Screen Time and Success_ final_GroupProject.pdf
Econ3060_Screen Time and Success_ final_GroupProject.pdfEcon3060_Screen Time and Success_ final_GroupProject.pdf
Econ3060_Screen Time and Success_ final_GroupProject.pdf
blueshagoo1
 
Salesforce AI + Data Community Tour Slides - Canarias
Salesforce AI + Data Community Tour Slides - CanariasSalesforce AI + Data Community Tour Slides - Canarias
Salesforce AI + Data Community Tour Slides - Canarias
davidpietrzykowski1
 
Template xxxxxxxx ssssssssssss Sertifikat.pptx
Template xxxxxxxx ssssssssssss Sertifikat.pptxTemplate xxxxxxxx ssssssssssss Sertifikat.pptx
Template xxxxxxxx ssssssssssss Sertifikat.pptx
TeukuEriSyahputra
 
How To Control IO Usage using Resource Manager
How To Control IO Usage using Resource ManagerHow To Control IO Usage using Resource Manager
How To Control IO Usage using Resource Manager
Alireza Kamrani
 
06-18-2024-Princeton Meetup-Introduction to Milvus
06-18-2024-Princeton Meetup-Introduction to Milvus06-18-2024-Princeton Meetup-Introduction to Milvus
06-18-2024-Princeton Meetup-Introduction to Milvus
Timothy Spann
 
Senior Engineering Sample EM DOE - Sheet1.pdf
Senior Engineering Sample EM DOE  - Sheet1.pdfSenior Engineering Sample EM DOE  - Sheet1.pdf
Senior Engineering Sample EM DOE - Sheet1.pdf
Vineet
 

Recently uploaded (20)

一比一原版莱斯大学毕业证(rice毕业证)如何办理
一比一原版莱斯大学毕业证(rice毕业证)如何办理一比一原版莱斯大学毕业证(rice毕业证)如何办理
一比一原版莱斯大学毕业证(rice毕业证)如何办理
 
A gentle exploration of Retrieval Augmented Generation
A gentle exploration of Retrieval Augmented GenerationA gentle exploration of Retrieval Augmented Generation
A gentle exploration of Retrieval Augmented Generation
 
Namma-Kalvi-11th-Physics-Study-Material-Unit-1-EM-221086.pdf
Namma-Kalvi-11th-Physics-Study-Material-Unit-1-EM-221086.pdfNamma-Kalvi-11th-Physics-Study-Material-Unit-1-EM-221086.pdf
Namma-Kalvi-11th-Physics-Study-Material-Unit-1-EM-221086.pdf
 
Data Scientist Machine Learning Profiles .pdf
Data Scientist Machine Learning  Profiles .pdfData Scientist Machine Learning  Profiles .pdf
Data Scientist Machine Learning Profiles .pdf
 
一比一原版马来西亚博特拉大学毕业证(upm毕业证)如何办理
一比一原版马来西亚博特拉大学毕业证(upm毕业证)如何办理一比一原版马来西亚博特拉大学毕业证(upm毕业证)如何办理
一比一原版马来西亚博特拉大学毕业证(upm毕业证)如何办理
 
Discovering Digital Process Twins for What-if Analysis: a Process Mining Appr...
Discovering Digital Process Twins for What-if Analysis: a Process Mining Appr...Discovering Digital Process Twins for What-if Analysis: a Process Mining Appr...
Discovering Digital Process Twins for What-if Analysis: a Process Mining Appr...
 
一比一原版多伦多大学毕业证(UofT毕业证书)学历如何办理
一比一原版多伦多大学毕业证(UofT毕业证书)学历如何办理一比一原版多伦多大学毕业证(UofT毕业证书)学历如何办理
一比一原版多伦多大学毕业证(UofT毕业证书)学历如何办理
 
一比一原版(uob毕业证书)伯明翰大学毕业证如何办理
一比一原版(uob毕业证书)伯明翰大学毕业证如何办理一比一原版(uob毕业证书)伯明翰大学毕业证如何办理
一比一原版(uob毕业证书)伯明翰大学毕业证如何办理
 
reading_sample_sap_press_operational_data_provisioning_with_sap_bw4hana (1).pdf
reading_sample_sap_press_operational_data_provisioning_with_sap_bw4hana (1).pdfreading_sample_sap_press_operational_data_provisioning_with_sap_bw4hana (1).pdf
reading_sample_sap_press_operational_data_provisioning_with_sap_bw4hana (1).pdf
 
一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理一比一原版南昆士兰大学毕业证如何办理
一比一原版南昆士兰大学毕业证如何办理
 
Senior Software Profiles Backend Sample - Sheet1.pdf
Senior Software Profiles  Backend Sample - Sheet1.pdfSenior Software Profiles  Backend Sample - Sheet1.pdf
Senior Software Profiles Backend Sample - Sheet1.pdf
 
一比一原版兰加拉学院毕业证(Langara毕业证书)学历如何办理
一比一原版兰加拉学院毕业证(Langara毕业证书)学历如何办理一比一原版兰加拉学院毕业证(Langara毕业证书)学历如何办理
一比一原版兰加拉学院毕业证(Langara毕业证书)学历如何办理
 
一比一原版(曼大毕业证书)曼尼托巴大学毕业证如何办理
一比一原版(曼大毕业证书)曼尼托巴大学毕业证如何办理一比一原版(曼大毕业证书)曼尼托巴大学毕业证如何办理
一比一原版(曼大毕业证书)曼尼托巴大学毕业证如何办理
 
一比一原版(UO毕业证)渥太华大学毕业证如何办理
一比一原版(UO毕业证)渥太华大学毕业证如何办理一比一原版(UO毕业证)渥太华大学毕业证如何办理
一比一原版(UO毕业证)渥太华大学毕业证如何办理
 
Econ3060_Screen Time and Success_ final_GroupProject.pdf
Econ3060_Screen Time and Success_ final_GroupProject.pdfEcon3060_Screen Time and Success_ final_GroupProject.pdf
Econ3060_Screen Time and Success_ final_GroupProject.pdf
 
Salesforce AI + Data Community Tour Slides - Canarias
Salesforce AI + Data Community Tour Slides - CanariasSalesforce AI + Data Community Tour Slides - Canarias
Salesforce AI + Data Community Tour Slides - Canarias
 
Template xxxxxxxx ssssssssssss Sertifikat.pptx
Template xxxxxxxx ssssssssssss Sertifikat.pptxTemplate xxxxxxxx ssssssssssss Sertifikat.pptx
Template xxxxxxxx ssssssssssss Sertifikat.pptx
 
How To Control IO Usage using Resource Manager
How To Control IO Usage using Resource ManagerHow To Control IO Usage using Resource Manager
How To Control IO Usage using Resource Manager
 
06-18-2024-Princeton Meetup-Introduction to Milvus
06-18-2024-Princeton Meetup-Introduction to Milvus06-18-2024-Princeton Meetup-Introduction to Milvus
06-18-2024-Princeton Meetup-Introduction to Milvus
 
Senior Engineering Sample EM DOE - Sheet1.pdf
Senior Engineering Sample EM DOE  - Sheet1.pdfSenior Engineering Sample EM DOE  - Sheet1.pdf
Senior Engineering Sample EM DOE - Sheet1.pdf
 

Data visualization with d3 may19