www.devcode.la
v1
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
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
www.devcode.la
www.devcode.la
www.devcode.la
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
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
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
www.devcode.la
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
www.devcode.la
www.devcode.la
<rect
x="0"
y="0"
width="400"
height="50"/>
www.devcode.la
<circle
cx="250"
cy="250"
r="25" />
www.devcode.la
<ellipse
cx="250"
cy="350"
rx="100"
ry="25"/>
www.devcode.la
<text x="250" y="200">
D3JS
</text>
www.devcode.la
<line
stroke="gray"
stroke-width="10"
x1="250"
y1="50"
x2="5"
y2="500" />
www.devcode.la
<path
d="M150 50 L75 200 L225 200 Z"/>
www.devcode.la
www.devcode.la
<path
d="M 100 350 q 150 -300 300 0"
stroke="blue"
stroke-width="5"
fill="none" />
www.devcode.la
www.devcode.la
<circle
cx="25"
cy="25"
r="22"
fill="yellow"
stroke="orange"
stroke-width="5"/>
www.devcode.la
.pumpkin {
fill: yellow;
stroke: orange;
stroke-width: 5;
}
www.devcode.la
<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
www.devcode.la
1. GET DATA
2. SIZE
3. PIE, PATH & COLORS
4. DATA BINDING & DRAW
5. LABELS
www.devcode.la
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
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
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
www.devcode.la
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
chart.append('text')
.attr('text-anchor', 'middle')
.attr('transform', (item) => `translate(${path.centroid(item)})`)
.text((item) => item.data.name);
www.devcode.la
www.devcode.la
www.devcode.la
www.devcode.la
1. MAKE DATA
2. SIZE
3. DRAW RECTS
www.devcode.la
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
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
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
www.devcode.la
www.devcode.la
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
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, svgHeight]);
www.devcode.la
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
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
www.devcode.la
www.devcode.la
www.devcode.la
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
const x_axis = d3.axisBottom()
.scale(xScale);
const y_axis = d3.axisLeft()
.scale(yScale);
www.devcode.la
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
www.devcode.la
www.devcode.la
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
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
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
const line = d3.line()
.x(item => xScale(item.name))
.y(item => yScale(item.value));
www.devcode.la
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
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