Published
Edited
Sep 30, 2019
Insert cell
Insert cell
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
})
Insert cell
facts = crossfilter(dataset)
Insert cell
dateDim = facts.dimension( d => d.date)
Insert cell
googleDim = facts.dimension( d => d.google)
Insert cell
topTenGoogle = googleDim.top(10)
Insert cell
bottomTenGoogle = googleDim.bottom(10)
Insert cell
googleByDayGroup = dateDim.group().reduceSum(d => d.google)
Insert cell
fbByDayGroup = dateDim.group().reduceSum(d => d.facebook)
Insert cell
googleByPercentage = dateDim.group().reduceSum(d => 100*(d.google/dataset[0]['google']-1))
Insert cell
fbByPercentage = dateDim.group().reduceSum(d => 100*(d.facebook/dataset[0]['facebook']-1))
Insert cell
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>`
}
Insert cell
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
}
Insert cell
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
}
Insert cell
Insert cell
dc = require("dc")
Insert cell
crossfilter = require("crossfilter2")
Insert cell
d3 = require("d3")
Insert cell
//transformar em %
acoes = {
let view = md`${container('chart3', 'Valores das ações do Google e do Facebook em % em relação ao primeiro valor')}`
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(googleByPercentage, 'Google')
.ordinalColors(['steelblue']),
dc.lineChart(compositeChart)
.group(fbByPercentage, 'Facebook')
.ordinalColors(['darkorange'])])
dc.renderAll()
return view
}

Insert cell
datasetMovies = d3.json("https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json")
Insert cell
factsMovie = crossfilter(datasetMovies)
Insert cell
year_Dim = factsMovie.dimension(d => d.Year)
Insert cell
genre_Dim = factsMovie.dimension(d => d.Genre)
Insert cell
GroupGenreGross = genre_Dim.group().reduceSum(d => d.Worldwide_Gross_M);
Insert cell
GroupYearGross = year_Dim.group().reduceSum(d => d.Worldwide_Gross_M);
Insert cell
by_year = {
let view = md`${container('chartByYear','Bilheteria total de milhões por Ano')}`
let barChart = dc.barChart(view.querySelector("#chartByYear"));

barChart.width(800)
.height(400)
.dimension(year_Dim)
.group(GroupYearGross)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.barPadding(0.5)
.outerPadding(0.2)
.alwaysUseRounding(true)
.margins({top: 30, right: 50, bottom: 25, left: 40})
barChart.xAxis().tickFormat(d3.format("d"));
barChart.render();
return view
}
Insert cell
by_genre = {
let view = md`${container('chartByGenre','Bilheteria total em milhões de dolares por Gênero')}`
let barChart = dc.barChart(view.querySelector("#chartByGenre"));

barChart.width(1000)
.height(400)
.dimension(genre_Dim)
.group(GroupGenreGross)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.barPadding(0.5)
.outerPadding(0.2)
.alwaysUseRounding(true)
.margins({top: 30, right: 50, bottom: 25, left: 40})

barChart.render();
return view
}
Insert cell

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.
Learn more