dataset = d3.json("https://gist.githubusercontent.com/emanueles/c628da6486ccb5059c091d9a13285cff/raw/8136ef5bc833ce6266e22ab0a8487c71bdb67bc2/nyc_weather_data.json").then(function(data) {
let parseDate = d3.timeParse("%Y-%m-%d")
data.forEach(function(d) {
d.date = parseDate(d.date);
})
return data;
})
facts = crossfilter(dataset)
dateDim = facts.dimension(d => d.date)
maxtempByDayGroup = dateDim.group().reduceSum(d=>d.temperatureMax)
mintempByDayGroup = dateDim.group().reduceSum(d=>d.temperatureMin)
vartempByDayGroup = dateDim.group().reduceSum(d=>d.temperatureMax - d.temperatureMin)
maxTempDim = facts.dimension(d => d.temperatureMax)
xScale = d3.scaleTime()
.domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
topTenMaxTemp = maxTempDim.top(10)
bottomTenMaxTemp = maxTempDim.bottom(10)
buildvis = {
let view = md`${container('chart1','Temperatura Máxima em NYC em 2018')}`
let lineChart = dc.lineChart(view.querySelector("#chart1"))
lineChart.width(width)
.height(500)
.dimension(dateDim)
.margins({top: 30, right: 50, bottom: 25, left: 40})
.renderArea(false)
.x(xScale)
.xUnits(d3.timeDays)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(width-200).y(10).itemHeight(13).gap(5))
.brushOn(false)
.group(maxtempByDayGroup, 'Temperatura Máxima')
.ordinalColors(['darkorange'])
dc.renderAll()
return view
}
buildcomposite = {
let view = md`${container('chart2', 'Temperatura Máxima e Mínima em NYC em 2018')}`
let compositeChart = dc.compositeChart(view.querySelector("#chart2"))
compositeChart.width(width)
.height(400)
.margins({top: 50, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
.x(xScale)
.xUnits(d3.timeDays)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(width-200).y(5).itemHeight(13).gap(5))
.brushOn(false)
.compose([
dc.lineChart(compositeChart)
.group(maxtempByDayGroup, 'Temperatura Máxima')
.ordinalColors(['darkorange']),
dc.lineChart(compositeChart)
.group(mintempByDayGroup, 'Temperatura Mínima')
.ordinalColors(['steelblue'])])
dc.renderAll()
return view
}
buildbar = {
let view = md `${container('chart3','Variação Térmica por dia em NYC em 2018')}`
let barChart = dc.barChart(view.querySelector("#chart3"))
barChart.width(width)
.height(400)
.dimension(dateDim)
.gap(1)
.centerBar(true)
.margins({top: 30, right: 50, bottom: 25, left: 40})
.x(xScale)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(width-200).y(10).itemHeight(13).gap(5))
.brushOn(false)
.group(vartempByDayGroup, 'Variação Térmica')
dc.renderAll()
return view
}
datasetMovies = d3.json("https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json")
by_year = {
let view = md `${container('chart4','Filmes - Bilheterias e Total apurado por Ano')}`
let barChartMovie = dc.barChart(view.querySelector("#chart4"))
barChartMovie.width(width)
.height(400)
.dimension(yearDim)
.centerBar(true)
.gap(1)
.margins({top: 30, right: 50, bottom: 35, left: 40})
.x(xScaleMovie)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(width-200).y(10).itemHeight(13))
.brushOn(false)
.barPadding(0.1)
.outerPadding(0.05)
.xAxisLabel('Ano')
.yAxisLabel('Bilheteria $(M)')
.group(totalApurado, 'Total Apurado')
.xAxis().tickFormat(d3.format("d"))
dc.renderAll()
return view
}
by_genre = {
let view = md `${container('chart5','Filmes - Bilheterias e Total apurado por Gênero')}`
let barChartGenre = dc.barChart(view.querySelector("#chart5"))
barChartGenre.width(width)
.height(400)
.dimension(genreDim)
.x(xScaleGenre)
.xUnits(dc.units.ordinal)
.gap(1)
.margins({top: 30, right: 50, bottom: 35, left: 45})
.renderHorizontalGridLines(true)
.legend(dc.legend().x(width-200).y(10).itemHeight(13))
.brushOn(false)
.barPadding(0.1)
.outerPadding(0.05)
.xAxisLabel('Gênero')
.yAxisLabel('Bilheteria $(M)')
.group(genreGroup, 'Total Apurado')
.ordinalColors(['#00b300'])
dc.renderAll()
return view
}
factsMovie = crossfilter(datasetMovies)
yearDim = factsMovie.dimension(d=>d.Year)
xScaleMovie = d3.scaleLinear()
.domain([yearDim.bottom(1)[0].Year-0.5, yearDim.top(1)[0].Year+0.5])
totalApurado = yearDim.group().reduceSum(d=>d.Worldwide_Gross_M)
genreDim = factsMovie.dimension(d=>d.Genre)
genreGroup = genreDim.group().reduceSum(d=>d.Worldwide_Gross_M)
names = {
let sorted = genreGroup.top(Infinity)
return sorted.map(d => d.key)
}
xScaleGenre = d3.scaleOrdinal().domain(names)
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>`
}
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.
