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)
maxTempDim = facts.dimension(d => d.temperatureMax)
dateMonthDim = facts.dimension(d => d3.timeMonth(d.date))
topTenMaxTemp = maxTempDim.top(10)
bottomTenMaxTemp = maxTempDim.bottom(10)
maxTempByDayGroup = dateDim.group().reduceSum(d => d.temperatureMax)
minTempByDayGroup = dateDim.group().reduceSum(d => d.temperatureMin)
buildvis = {
let view = md`${container('chart1','Temperatura Máxima em NYC em 2018')}`
let lineChart = dc.lineChart(view.querySelector("#chart1"))
const xScale = d3.scaleTime()
.domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
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"))
const xScale = d3.scaleTime()
.domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
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
}
variationTemp = dateDim.group().reduceSum(d => d.temperatureMax -d.temperatureMin)
buildbar = {
let view = md`${container('chart3', 'Variação térmica por dia em NYC em 2018')}`
let barChart = dc.barChart(view.querySelector("#chart3"))
const xScale = d3.scaleTime()
.domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])
barChart.xAxis().tickFormat(d3.timeFormat("%B"))
barChart.width(width)
.height(400)
.margins({top: 50, right: 50, bottom: 25, left: 40})
.dimension(dateDim)
.x(xScale)
.xUnits(d3.timeDays)
.renderHorizontalGridLines(true)
.brushOn(false)
.group(variationTemp)
// .ordinalColors(['steelblue'])
dc.renderAll()
return view
}
d3.timeMonths(dateDim.bottom(1)[0].date, dateDim.top(1)[0].date)
moviesDataset = d3.json("https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json")
facts2 = crossfilter(moviesDataset)
by_year = {
let view = md`${container('chart3', 'Valor total da bilheteria dos filmes por Ano (em Milhões)')}`
let barChart = dc.barChart(view.querySelector("#chart3"))
const xScale = d3.scaleLinear()
.range([0,width])
// .domain([yearDim.bottom(1)[0].Year -0.5, yearDim.top(1)[0].Year +0.5])
.domain([d3.min(moviesDataset, d => d.Year)- 0.5, d3.max(moviesDataset, d => d.Year)+ 0.5])
barChart.xAxis().ticks(5)
barChart.width(width)
.height(400)
.margins({top: 50, right: 50, bottom: 25, left: 40})
.dimension(yearDim)
.x(xScale)
.renderHorizontalGridLines(true)
.brushOn(false)
.group(grossGroup)
.ordinalColors(['steelblue'])
.xAxis().tickFormat(d3.format("d"))
barChart.centerBar(true)
barChart.gap(90)
dc.renderAll()
return view
}
by_genre = {
let view = md`${container('chart4', 'Total de bilheteria(em milhões) por gênero de filme')}`
let barChart = dc.barChart(view.querySelector("#chart4"))
const xScale = d3.scaleOrdinal().domain(names)
barChart.yAxis().ticks(5)
barChart.width(width)
.height(400)
.margins({top: 50, right: 50, bottom: 25, left: 40})
.dimension(genreDim)
.x(xScale)
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.brushOn(false)
.group(genreGroup)
.ordinalColors(['steelblue'])
barChart.gap(70)
dc.renderAll()
return view
}
yearDim = facts2.dimension(d => d.Year)
grossGroup = yearDim.group().reduceSum(d => d.Worldwide_Gross_M)
genreDim = facts2.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)
}
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.
