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")
data.forEach(function(d,i){
d.date = parseDate(d.date)
d.google = +d.google
d.facebook = +d.facebook
})
return data
})
facts = crossfilter(dataset)
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)
fbDim = facts.dimension(d => d.facebook)
fbByDayGroup = dateDim.group().reduceSum(d => d.facebook)
fbPercFirstDay = dateDim.group().reduceSum(d => 100*(d.facebook/fbByDayGroup.all(1)[0].value-1))
googlePercFirstDay = dateDim.group().reduceSum(d => 100*(d.google/googleByDayGroup.all(1)[0].value-1))
datasetMovies = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json').then(function(data){
// formatando nossos dados
data.forEach(function(d,i){
d.film = d['Film']
d.year = +d.Year
d.genre = d['Genre']
d.worldwideGross = +d.Worldwide_Gross_M
d.budget = +d.Budget_M
})
return data
})
facts2 = crossfilter(datasetMovies)
filmDim = facts2.dimension( d => d.film)
yearDim = facts2.dimension( d => d.year)
genreDim = facts2.dimension( d => d.genre)
worldwideGrossDim = facts2.dimension( d => d.worldwideGross)
budgetDim = facts2.dimension( d => d.budget)
worldwideGrossByYearGroup = yearDim.group().reduceSum(d => d.worldwideGross)
worldwideGrossByGenreGroup = genreDim.group().reduceSum(d => d.worldwideGross)
by_year = {
let view = md`${container('barchart1','Bilheteria/ano')}`
let barChart = dc.barChart(view.querySelector("#barchart1"))
barChart.width(500)
.height(400)
.dimension(yearDim)
.margins({top: 40, right: 40, bottom: 40, left: 40})
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.brushOn(true)
.gap(30)
.group(worldwideGrossByYearGroup, 'Bilheteria/Ano')
dc.barChart
barChart.render()
return view
}
by_genre = {
let view = md`${container('barchart2','Bilheteria/gênero')}`
let barChart = dc.barChart(view.querySelector("#barchart2"))
barChart.width(500)
.height(400)
.margins({top: 40, right: 40, bottom: 40, left: 40})
.dimension(genreDim)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.brushOn(true)
.gap(10)
.group(worldwideGrossByGenreGroup)
barChart.render()
return view
}
dc = require("dc")
crossfilter = require("crossfilter2")
d3 = require("d3")
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.
