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 web con D3
Search
Juan Sebastián Vega
April 06, 2018
Programming
0
250
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
70
Introducción a las redes neuronales
sebasvega95
0
59
Introducción a la visualización de datos en Python
sebasvega95
1
120
Other Decks in Programming
See All in Programming
코틀린으로 멀티플랫폼 만들기
pangmoo
0
140
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
try! Swift Tokyo 初参加報告LT
hinakko2
0
210
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
340
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
350
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
670
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
320
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
250
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
810
Featured
See All Featured
RailsConf 2023
tenderlove
2
530
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
658
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
186
16k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Invisible Customer
myddelton
114
12k
Building Applications with DynamoDB
mza
88
5.6k
We Have a Design System, Now What?
morganepeng
42
6.7k
Practical Orchestrator
shlominoach
181
9.7k
Why Our Code Smells
bkeepers
PRO
331
56k
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