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
79
Introducción a las redes neuronales
sebasvega95
0
75
Introducción a la visualización de datos en Python
sebasvega95
1
140
Other Decks in Programming
See All in Programming
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Is Xcode slowly dying out in 2025?
uetyo
1
270
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
XP, Testing and ninja testing
m_seki
3
240
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
技術同人誌をMCP Serverにしてみた
74th
1
640
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
210
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
250
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
13
3.9k
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Six Lessons from altMBA
skipperchong
28
3.9k
A designer walks into a library…
pauljervisheath
207
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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