Curso de
D3JS
www.devcode.la
v1
www.devcode.la
www.devcode.la
www.devcode.la
Podras..
- Crear visualizaciones propias.
- Entender las bases de D3JS.
- Aprender bases de SVG.
- Un paso para al mundo de Data Science
www.devcode.la
Objetivos
- Comprender los conceptos clave de D3Js.
- Crear visualizaciones de datos.
- Aprender a seleccionar y manipular datos
- Asociar datos
- Usar escalas en las representaciones
www.devcode.la
metodología
- Clases grabadas.
- Sistema de discusiones.
- Código en GitHub.
- Proyecto.
www.devcode.la
requisitos
- Bases en Html
- Bases en Javascript.
- Bases en Css.
www.devcode.la
materiales
- Chrome
- VSCode
- Node (npm)
www.devcode.la
Módulos
- Módulo 1: Introducción a D3Js
- Módulo 2: Trabajando con SVG.
- Módulo 3: Escalas y ejes.
- Módulo 4: Interacciones.
- Módulo 5: Proyecto
www.devcode.la
www.devcode.la
Módulo 1
www.devcode.la
¿DATA VIZ?
es el proceso de búsqueda, interpretación, contrastación y comparación de datos que permite un conocimiento en profundidad y detalle de los mismos de tal forma que se transformen en información comprensible para el usuario
Wikipedia
www.devcode.la
www.devcode.la
Between 10:00pm and midnight, people wind down for the day, shifting from leisure to personal care and eventually going to sleep.
www.devcode.la
http://flowingdata.com/2015/12/15/a-day-in-the-life-of-americans/
www.devcode.la
http://datavizproject.com/
www.devcode.la
www.devcode.la
www.devcode.la
D3 (Documentos controlados por Datos o *D3.js) por sus siglas en Inglés (Data-Driven Documents or D3.js) es una biblioteca de JavaScript para visualizar datos utilizando estándares web.
www.devcode.la
www.devcode.la
www.devcode.la
Proyecto
www.devcode.la
http-server
www.devcode.la
bulma css
www.devcode.la
Selección y manipulación
www.devcode.la
www.devcode.la
const title = d3.select('h1');
title.style('color', 'red')
.attr('class', 'my-class')
.text(title.text() + ' change text');
const body = d3.select('body');
body.append('p').text('text 1');
body.append('p').text('text 2');
body.append('p').text('text 3');
const texts = d3.selectAll('p');
texts.style('color', 'blue');
www.devcode.la
carga y Asociación de datos
www.devcode.la
const dataset = [1, 2, 3, 4, 5];
d3.select('body')
.selectAll('p')
.data(dataset)
.enter()
.append('p')
.text((item) => item * 2);
www.devcode.la
oBTENER DATOS CON FETCH
www.devcode.la
document.addEventListener("DOMContentLoaded", (event) => {
fetch('URL')
.then((response) => response.json())
.then((data) => {
// Tranform data
const values = // code
drawChart(values);
})
.catch((err) => console.log(err));
});
www.devcode.la
MÓDULO 2
www.devcode.la
¿svg?
Gráficos vectoriales escalables, o Gráficos vectoriales redimensionables (del inglés Scalable Vector Graphics) o SVG es un formato de gráficos vectoriales bidimensionales, tanto estáticos como animados, en formato XML, cuya especificación es un estándar abierto desarrollado por el W3C desde el año 1999.
Wikipedia
www.devcode.la
www.devcode.la
- http://snapsvg.io/
- https://ionicons.com/
- https://webkul.github.io/vivid/
www.devcode.la
coordenadas
www.devcode.la
rect
<rect
x="0"
y="0"
width="400"
height="50"/>
www.devcode.la
CIRCLE
<circle
cx="250"
cy="250"
r="25" />
www.devcode.la
ellipse
<ellipse
cx="250"
cy="350"
rx="100"
ry="25"/>
www.devcode.la
TEXT
<text x="250" y="200">
D3JS
</text>
www.devcode.la
LINE
<line
stroke="gray"
stroke-width="10"
x1="250"
y1="50"
x2="5"
y2="500" />
www.devcode.la
PATH
<path
d="M150 50 L75 200 L225 200 Z"/>
www.devcode.la
PATH
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc
- Z = closepath
www.devcode.la
PATH
<path
d="M 100 350 q 150 -300 300 0"
stroke="blue"
stroke-width="5"
fill="none" />
www.devcode.la
STYLES
- fill = color
- stroke = color
- stroke-width = unidad
- opacity = 0 - 1
www.devcode.la
STYLES
<circle
cx="25"
cy="25"
r="22"
fill="yellow"
stroke="orange"
stroke-width="5"/>
www.devcode.la
STYLES
.pumpkin {
fill: yellow;
stroke: orange;
stroke-width: 5;
}
www.devcode.la
LAYERS
<rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>
www.devcode.la
PIE-CHART
www.devcode.la
PIE-CHART
1. GET DATA
2. SIZE
3. PIE, PATH & COLORS
4. DATA BINDING & DRAW
5. LABELS
www.devcode.la
1. get data
const URL = 'http://api.population.io:80/1.0/population/2017/Colombia/';
document.addEventListener("DOMContentLoaded", (event) => {
fetch(URL)
.then((response) => response.json())
.then((data) => {
const dataset = data
.filter(item => item.age >= 10 && item.age <= 15)
.map((item)=> {
return {
name: `${item.age} (${item.total})`,
value: item.total
}
});
drawChart(dataset);
})
.catch((err) => console.log(err));
});
www.devcode.la
2. SIZE
const svgWidth = 400;
const svgHeight = 400;
const radius = Math.min(svgWidth, svgHeight) / 2;
const svg = d3.select('#chart')
.attr('width', svgWidth)
.attr('height', svgHeight);
const g = svg.append('g')
.attr('transform', `translate(${radius}, ${radius})`);
www.devcode.la
3. Pie, path & colors
const pie = d3.pie()
.value((data) => data.value);
const path = d3.arc()
.outerRadius(radius)
.innerRadius(0);
const colors = d3.scaleOrdinal(d3.schemeCategory10);
www.devcode.la
3. Pie, path & colors
www.devcode.la
4. DATA BINDING & DRAW
const chart = g.selectAll('g')
.data(pie(dataset))
.enter()
.append('g');
chart.append('path')
.attr('d', path)
.attr('fill', (data) => colors(data.value));
www.devcode.la
5. LABELS
chart.append('text')
.attr('text-anchor', 'middle')
.attr('transform', (item) => `translate(${path.centroid(item)})`)
.text((item) => item.data.name);
www.devcode.la
5. LABELS
www.devcode.la
MÓDULO 3
www.devcode.la
bar-chart
www.devcode.la
bar-CHART
1. MAKE DATA
2. SIZE
3. DRAW RECTS
www.devcode.la
1. MAKE DATA
const dataset = [
{
name: 'Valor 1',
value: 100
},
{
name: 'Valor 2',
value: 200
},
{
name: 'Valor 3',
value: 300
},
{
name: 'Valor 4',
value: 400
}
];
www.devcode.la
2. sIZE
const svgWidth = 400;
const svgHeight = 400;
const barPadding = 5;
const barWidth = ( svgWidth / dataset.length );
const svg = d3.select('#chart')
.attr('width', svgWidth)
.attr('height', svgHeight);
www.devcode.la
2. DRAW RECTS
const barChart = svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('y', (item) => svgHeight - item.value)
.attr('x', (item, index) => barWidth * index)
.attr('height', (item) => item.value)
.attr('width', barWidth - barPadding);
www.devcode.la
2. DRAW RECTS
www.devcode.la
2. DRAW RECTS
www.devcode.la
escalas
La escala gráfica es la representación dibujada en un plano o mapa de la escala unidad por unidad, donde cada segmento muestra la relación entre la longitud de la representación y el de la realidad.
Wikipedia
www.devcode.la
add yScale
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, svgHeight]);
www.devcode.la
add yScale
const barChart = svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.attr('y', (item) => svgHeight - yScale(item.value))
.attr('x', (item, index) => barWidth * index)
.attr('height', (item) => yScale(item.value))
.attr('width', barWidth - barPadding);
www.devcode.la
add labels and colors
const colors = d3.scaleOrdinal(d3.schemeCategory10);
const labels = svg.selectAll('text')
.data(dataset)
.enter()
.append('text')
.text((item) => `${item.name} (${item.value})`)
.attr('y', (item) => (svgHeight - yScale(item.value)) - 5)
.attr('x', (item, index) => barWidth * index)
.attr('fill', (item) => colors(item.value));
www.devcode.la
GET DATA
www.devcode.la
AXIS
www.devcode.la
AXIS
www.devcode.la
AXIS
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, svgWidth]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([svgHeight, 0]);
www.devcode.la
AXIS
const x_axis = d3.axisBottom()
.scale(xScale);
const y_axis = d3.axisLeft()
.scale(yScale);
www.devcode.la
AXIS
svg.append('g')
.attr('transform', 'translate(50, -20)')
.call(y_axis);
svg.append('g')
.attr('transform', `translate(50, ${svgHeight - 20})`)
.call(x_axis);
www.devcode.la
www.devcode.la
MÓDULO 4 Y 5
www.devcode.la
www.devcode.la
1. fetch DATA
const api = 'https://api.coindesk.com/v1/bpi/historical/close.json?start=2017-12-31&end=2018-06-01';
document.addEventListener("DOMContentLoaded", (event) => {
fetch(api)
.then((response) => response.json())
.then((data) => {
const values = Object.keys(data.bpi)
.map(key => ({
name: new Date(key),
value: data.bpi[key]
}));
drawChart(values);
})
.catch((err) => console.log(err));
});
www.devcode.la
2. DRAW SVG
const svgWidth = 500;
const svgHeight = 500;
const margin = { top: 10, left: 50, right: 10, bottom: 10 };
const width = svgWidth - ( margin.left + margin.right );
const height = svgHeight - ( margin.top + margin.bottom );
const svg = d3.select('svg')
.attr('width', svgWidth)
.attr('height', svgHeight);
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
www.devcode.la
3. sCALES
const xScale = d3.scaleTime()
.domain(d3.extent(dataset, (item) => item.name))
.rangeRound([0, width]);
const yScale = d3.scaleLinear()
.domain(d3.extent(dataset, (item) => item.value))
.rangeRound([height - 10, 0]);
www.devcode.la
4. DRAW LINE
const line = d3.line()
.x(item => xScale(item.name))
.y(item => yScale(item.value));
www.devcode.la
5. DRAW LINE
g.append('g')
.attr('transform', `translate(0, ${height - margin.top})`)
.call(d3.axisBottom(xScale));
g.append('g')
.call(d3.axisLeft(yScale));
g.append('path')
.datum(dataset)
.attr('fill', 'none')
.attr('stroke', 'steelblue')
.attr('stroke-linejoin', 'miter')
.attr('stroke-linecap', 'miter')
.attr('stroke-width', 1.5)
.attr('d', line);
www.devcode.la
www.devcode.la
DRAW points
g.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
.attr('class', 'dot')
.attr('fill', 'steelblue')
.attr('cy', (item) => yScale(item.value) )
.attr('cx', (item) => xScale(item.name) )
.attr('r', 4);
www.devcode.la
.on('mouseover', function (item) {
// code
})
.on('mouseout', function (item) {
// code
});
www.devcode.la
www.devcode.la
d3.csv(URL, (item) => item)
.then((data) => {
console.log(data);
});
www.devcode.la
Curso de D3.js
By devcodela
Curso de D3.js
- 1,791