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
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.7k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
510
VS Code Update for GitHub Copilot
74th
2
640
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
XP, Testing and ninja testing
m_seki
3
240
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Music & Morning Musume
bryan
46
6.6k
Why Our Code Smells
bkeepers
PRO
336
57k
GraphQLとの向き合い方2022年版
quramy
49
14k
Bash Introduction
62gerente
613
210k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Being A Developer After 40
akosma
90
590k
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