Corrida Hoje, Vitória Amanhã
// carregando os dados com o d3
dataset = d3.csv("https://gist.githubusercontent.com/emanueles/d8df8d875edda71aa2e2365fae2ce225/raw/1e949d3da02ed6caa21fe3a7a12a4e5a611a4bab/stocks.csv").then(function(data){
// formatando nossos dados
let parseDate = d3.timeParse("%Y/%m/%d")
let firstDate = d3.min(data) // recuperando os dados da data inicial
console.log(firstDate)
data.forEach(function(d,i){
d.date = parseDate(d.date)
d.google = +d.google // + é um atalho pra converter pra numérico
d.facebook = +d.facebook
d.p_facebook = (d.facebook - firstDate.facebook) / firstDate.facebook * 100
d.p_google = (d.google - firstDate.google) / firstDate.google * 100
})
return data
})
facts = crossfilter(dataset) // instância do objeto crossfilter
dateDim = facts.dimension( d => d.date)
googleDim = facts.dimension( d => d.google)
topTenGoogle = googleDim.top(10)
bottomTenGoogle = googleDim.bottom(10)
googleByDayGroup = dateDim.group().reduceSum(d => d.google)
fbByDayGroup = dateDim.group().reduceSum(d => d.facebook)
function container(id, title) {
return `
<div class='container'>
<div class='content'>
<div class='container'>
<div class='row'>
<div class='span12' id='${id}'>
<h4>${title}</h4>
</div>
</div>
</div>
</div>
</div>`
}
buildvis = {
let view = md`${container('chart','Valores das ações do Google')}`
let lineChart = dc.lineChart(view.querySelector("#chart"))
let xScale = d3.scaleTime()
.domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
lineChart.width(800)
.height(400)
.dimension(dateDim)
.margins({top: 30, right: 50, bottom: 25, left: 40})
.renderArea(false)
.x(xScale)
.xUnits(d3.timeDays)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(680).y(10).itemHeight(13).gap(5))
.brushOn(false)
.group(googleByDayGroup, 'Google')
dc.renderAll()
return view
}
buildcomposite = {
let view = md`${container('chart2', 'Valores das ações do Google e do Facebook')}`
let compositeChart = dc.compositeChart(view.querySelector("#chart2"))
let xScale = d3.scaleTime()
.domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
compositeChart.width(800)
.height(400)
.margins({top: 50, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
.x(xScale)
.xUnits(d3.timeDays)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(700).y(5).itemHeight(13).gap(5))
.brushOn(false)
.compose([
dc.lineChart(compositeChart)
.group(googleByDayGroup, 'Google')
.ordinalColors(['steelblue']),
dc.lineChart(compositeChart)
.group(fbByDayGroup, 'Facebook')
.ordinalColors(['darkorange'])])
dc.renderAll()
return view
}
dc = require("dc")
crossfilter = require("crossfilter2")
d3 = require("d3")
per_googleByDayGroup = dateDim.group().reduceSum(d => d.p_google)
per_fbByDayGroup = dateDim.group().reduceSum(d => d.p_facebook)
acoes = {
let view = md`${container('chart3', 'Variação dos Valores das ações do Google e do Facebook (%)')}`
let compositeChart = dc.compositeChart(view.querySelector("#chart3"))
let xScale = d3.scaleTime()
.domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
compositeChart.width(800)
.height(400)
.margins({top: 50, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
.x(xScale)
.xUnits(d3.timeDays)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(700).y(5).itemHeight(13).gap(5))
.brushOn(false)
.compose([
dc.lineChart(compositeChart)
.group(per_googleByDayGroup, 'Google')
.ordinalColors(['steelblue']),
dc.lineChart(compositeChart)
.group(per_fbByDayGroup, 'Facebook')
.ordinalColors(['darkorange'])])
dc.renderAll()
return view
}
movies = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json').then(function(data){
data.forEach(function(d,i){
d.Year = +d.Year
})
return data
})
facts2 = crossfilter(movies)
yearDim = facts2.dimension(d => d.Year)
genreDim = facts2.dimension(d => d.Genre)
genreDim.top(3)
groupBilheteria = yearDim.group().reduceSum(d => d.Worldwide_Gross_M)
groupGenre = genreDim.group().reduceSum(d => d.Worldwide_Gross_M)
by_year = {
let view = md`${container('chart4', 'Total Arrecadado nas Bilheterias por ano em Milhões de Dólares')}`
let barChart1 = dc.barChart(view.querySelector("#chart4"))
let xScale = d3.scaleTime()
.domain([yearDim.bottom(1)[0].Year - 0.5, yearDim.top(1)[0].Year + 1])
barChart1.xAxis().ticks(5)
barChart1.width(800)
.height(400)
.margins({top: 10, right: 50, bottom: 30, left: 40})
.dimension(yearDim)
.group(groupBilheteria, 'Total de Bilheteria')
.legend(dc.legend().x(650).y(10).itemHeight(13).gap(5))
.brushOn(false)
.x(xScale)
.gap(25)
.centerBar(true)
.renderHorizontalGridLines(true)
barChart1.xAxis().tickFormat(d3.format("d"))
dc.renderAll()
return view
}
by_genre = {
let view = md`${container('chart5', 'Total Arrecadado nas Bilheterias por ano em Milhões de Dólares')}`
let barChart1 = dc.barChart(view.querySelector("#chart5"))
let xScale = d3.scaleOrdinal()
.domain(genreDim)
barChart1.width(800)
.height(400)
.dimension(genreDim)
.margins({top: 10, right: 50, bottom: 30, left: 40})
.x(xScale)
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(650).y(10).itemHeight(13).gap(5))
.gap(25)
.brushOn(false)
.group(groupGenre, 'Total Bilheteria')
dc.renderAll()
return view
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
