Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introducción a la visualización de datos en la ...
Search
Juan Sebastián Vega
April 06, 2018
Programming
0
310
Introducción a la visualización de datos en la web con D3
Juan Sebastián Vega
April 06, 2018
Tweet
Share
More Decks by Juan Sebastián Vega
See All by Juan Sebastián Vega
Transferencia de estilo
sebasvega95
0
81
Introducción a las redes neuronales
sebasvega95
0
78
Introducción a la visualización de datos en Python
sebasvega95
1
140
Other Decks in Programming
See All in Programming
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
910
Software Architecture
hschwentner
6
2.3k
CSC509 Lecture 03
javiergs
PRO
0
340
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.7k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
940
CSC509 Lecture 04
javiergs
PRO
0
300
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
850
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
0
270
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
32k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
250
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.3k
Mobile First: as difficult as doing things right
swwweet
224
10k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Balancing Empowerment & Direction
lara
4
690
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
GitHub's CSS Performance
jonrohan
1032
470k
Optimizing for Happiness
mojombo
379
70k
We Have a Design System, Now What?
morganepeng
53
7.8k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
The Cult of Friendly URLs
andyhume
79
6.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Visualization
eitanlees
149
16k
Transcript
Visualización de datos en la web D3.js Juan Sebastián Vega
Patiño
• Prefacio • Selecciones • Data joins • Transiciones •
Escalas • Módulos • Demos
Prefacio
Web standards Transformaciones, no representaciones
Web standards Transformaciones, no representaciones
Introducción a D3 DOM Datos Las visualizaciones requieren mapeo de
datos a elementos
Introducción a D3 DOM Datos Las visualizaciones requieren mapeo de
datos a elementos
Introducción a D3 DOM Datos Las visualizaciones requieren mapeo de
datos a elementos
Características de D3
Características de D3 • No es monolítica
Características de D3 • No es monolítica • Manipulación eficiente
del DOM
Características de D3 • No es monolítica • Manipulación eficiente
del DOM • Data driven
Características de D3 • No es monolítica • Manipulación eficiente
del DOM • Data driven • No usa representaciones propias ⚖
Selecciones
Selectores CSS
Selectores CSS someTag <someTag> Selector Elemento
Selectores CSS someTag <someTag> .someClass <any class=“someClass”> Selector Elemento
Selectores CSS #someId <any id=“someId”> someTag <someTag> .someClass <any class=“someClass”>
Selector Elemento
Selectores CSS #someId <any id=“someId”> someTag <someTag> .someClass <any class=“someClass”>
[attr=someAttr] <any attr=“someAttr”> Selector Elemento
W3C DOM API • Tedioso • Enfoque imperativo ☹ •
Estados temporales
W3C DOM API
Selecciones en D3 • Enfoque declarativo • Operan con la
API de W3C (e.g. ‘#id’, ‘.class’) • Mutación, registro de eventos, ordenamiento
Selecciones D3
Data joins
2 4 8 16 32 font-size
2 4 8 16 32 Update font-size
None
None
Enter { } { } { } { } {
}
Enter { } { } { } { } {
} Update
Enter { } { } { } { } {
} Update Enter
Data joins Enter
Exit { } { } { }
Exit { } { } { } Update
Exit { } { } { } Update Exit
Exit
Transiciones
Exit
Escalas
Datos DOM
Números Fechas Categorías Coordenadas Colores Radios Tamaños Datos DOM
Números Fechas Categorías Coordenadas Colores Radios Tamaños Datos DOM Dominio
Números Fechas Categorías Coordenadas Colores Radios Tamaños Datos DOM Dominio
Rango
Números Fechas Categorías Coordenadas Colores Radios Tamaños Datos DOM Dominio
Rango d3.scaleLinear d3.scaleSqrt d3.scaleTime
None
Módulos
d3-time d3-axis d3-collection d3-color d3-dsv d3-fetch d3-force d3-geo d3-hierarchy
Demos
d3js.org bl.ocks.org observablehq.com @DataToViz @sxywu @mbostock @NadiehBremer @sebasvega95
Gracias!! d3js.org bl.ocks.org observablehq.com @DataToViz @sxywu @mbostock @NadiehBremer @sebasvega95