31:T46e,md`### Filmes Em uma nova célula, carregue os dados [movies.json](https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json) e faça: * Crie uma célula chamada by_year e nela construa um gráfico de barras das bilheterias com o total apurado nas bilheterias para cada ano. > **Dica 1:** Nesse gráfico é mais fácil tratar o ano como uma categoria, assim use uma \`d3.scaleLinear()\` e a ajuste o domínio um pouco mais para baixo e para cima para que as barras nas extremidades fiquem totalmente visíveis. > **Dica 2:** Para que os labels dos anos apareçam como inteiros use o método: \`.xAxis().tickFormat(d3.format("d"))\`. * Crie uma célula chamada by_genre e construa um gráfico de barras das bilheterias com o total apurado por Gênero de filme. > ** Dica:** Aqui você pode criar um vetor com os nomes dos gêneros de filme usando algo como: \`\`\`javascript names = { let sorted = genreGroup.top(Infinity) return sorted.map(d => d.key) } \`\`\` E depois cria uma escala ordinal com esses nomes usando: \`d3.scaleOrdinal().domain(names)\`. `32:[{"id":"82fe2f240ae77aebb82a80be29f01e14a59770b346b548a967c52dfc513b97e6ebfbfc5c806a9f617b5921247ed8893a984dd9c74b5eeb95931460eb003b5fee","href":"https://static.observableusercontent.com/files/82fe2f240ae77aebb82a80be29f01e14a59770b346b548a967c52dfc513b97e6ebfbfc5c806a9f617b5921247ed8893a984dd9c74b5eeb95931460eb003b5fee","name":"barchart.png","type":"image/png","lastModified":1589202552174.809,"size":137673}] 2f:{"title":"D3 com Crossfilter e DC.js","cells":[{"id":0,"value":"md`# D3 com Crossfilter e DC.js\n\nVisualizando dados de temperatura de NYC em 2018.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"dataset = d3.json(\"https://gist.githubusercontent.com/emanueles/c628da6486ccb5059c091d9a13285cff/raw/8136ef5bc833ce6266e22ab0a8487c71bdb67bc2/nyc_weather_data.json\").then(function(data) {\n let parseDate = d3.timeParse(\"%Y-%m-%d\")\n data.forEach(function(d) {\n d.date = parseDate(d.date);\n })\n return data;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":266,"value":"dateDim = facts.dimension(d => d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"maxtempByDayGroup = dateDim.group().reduceSum(d=>d.temperatureMax)","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"mintempByDayGroup = dateDim.group().reduceSum(d=>d.temperatureMin)","pinned":true,"hidden":false,"mode":"ojs"},{"id":576,"value":"vartempByDayGroup = dateDim.group().reduceSum(d=>d.temperatureMax - d.temperatureMin)","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"maxTempDim = facts.dimension(d => d.temperatureMax)","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"xScale = d3.scaleTime()\n .domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"topTenMaxTemp = maxTempDim.top(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"bottomTenMaxTemp = maxTempDim.bottom(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"buildvis = {\n let view = md`${container('chart1','Temperatura Máxima em NYC em 2018')}`\n let lineChart = dc.lineChart(view.querySelector(\"#chart1\"))\n lineChart.width(width)\n .height(500)\n .dimension(dateDim)\n .margins({top: 30, right: 50, bottom: 25, left: 40})\n .renderArea(false)\n .x(xScale)\n .xUnits(d3.timeDays)\n .renderHorizontalGridLines(true)\n .legend(dc.legend().x(width-200).y(10).itemHeight(13).gap(5))\n .brushOn(false)\n .group(maxtempByDayGroup, 'Temperatura Máxima')\n .ordinalColors(['darkorange'])\n dc.renderAll()\n return view \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"buildcomposite = {\n let view = md`${container('chart2', 'Temperatura Máxima e Mínima em NYC em 2018')}`\n let compositeChart = dc.compositeChart(view.querySelector(\"#chart2\"))\n compositeChart.width(width)\n .height(400)\n .margins({top: 50, right: 50, bottom: 25, left: 40})\n .dimension(dateDim)\n .x(xScale)\n .xUnits(d3.timeDays)\n .renderHorizontalGridLines(true)\n .legend(dc.legend().x(width-200).y(5).itemHeight(13).gap(5))\n .brushOn(false) \n .compose([\n dc.lineChart(compositeChart)\n .group(maxtempByDayGroup, 'Temperatura Máxima')\n .ordinalColors(['darkorange']),\n dc.lineChart(compositeChart)\n .group(mintempByDayGroup, 'Temperatura Mínima')\n .ordinalColors(['steelblue'])])\n dc.renderAll()\n return view \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`## Exercícios\n\n### Variação térmica\nUtilizando os mesmos dados, crie um gráfico de barras que mostra a variação térmica (temperatura máxima - temperatura mínima) por dia.\n\n

${Object.assign(await FileAttachment(\"barchart.png\").image(), { alt: 'Variação Térmica', style: 'width: 100%; max-width: 800px;' })}\n\n> **Dica 1:** Você precisará criar um novo grupo que na função reduceSum computa a diferença.\n\n> **Dica 2:** Consulte esse [exemplo documentado](https://dc-js.github.io/dc.js/docs/stock.html) do dc.js e visite os gráficos de barra da [galeria de exemplos](http://dc-js.github.io/dc.js/examples/).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"buildbar = {\n let view = md `${container('chart3','Variação Térmica por dia em NYC em 2018')}`\n let barChart = dc.barChart(view.querySelector(\"#chart3\"))\n barChart.width(width)\n .height(400)\n .dimension(dateDim)\n .gap(1)\n .centerBar(true)\n .margins({top: 30, right: 50, bottom: 25, left: 40})\n .x(xScale)\n .renderHorizontalGridLines(true)\n .legend(dc.legend().x(width-200).y(10).itemHeight(13).gap(5))\n .brushOn(false)\n .group(vartempByDayGroup, 'Variação Térmica')\n dc.renderAll()\n return view\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"datasetMovies = d3.json(\"https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"by_year = {\n\n let view = md `${container('chart4','Filmes - Bilheterias e Total apurado por Ano')}`\n \n let barChartMovie = dc.barChart(view.querySelector(\"#chart4\"))\n barChartMovie.width(width)\n .height(400)\n .dimension(yearDim)\n .centerBar(true)\n .gap(1)\n .margins({top: 30, right: 50, bottom: 35, left: 40})\n .x(xScaleMovie)\n .renderHorizontalGridLines(true)\n .legend(dc.legend().x(width-200).y(10).itemHeight(13))\n .brushOn(false)\n .barPadding(0.1)\n .outerPadding(0.05)\n .xAxisLabel('Ano')\n .yAxisLabel('Bilheteria $(M)')\n .group(totalApurado, 'Total Apurado')\n .xAxis().tickFormat(d3.format(\"d\"))\n \n dc.renderAll() \n\n return view\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"by_genre = {\n\n let view = md `${container('chart5','Filmes - Bilheterias e Total apurado por Gênero')}`\n \n let barChartGenre = dc.barChart(view.querySelector(\"#chart5\"))\n barChartGenre.width(width)\n .height(400)\n .dimension(genreDim)\n .x(xScaleGenre)\n .xUnits(dc.units.ordinal)\n .gap(1)\n .margins({top: 30, right: 50, bottom: 35, left: 45})\n .renderHorizontalGridLines(true)\n .legend(dc.legend().x(width-200).y(10).itemHeight(13))\n .brushOn(false)\n .barPadding(0.1)\n .outerPadding(0.05)\n .xAxisLabel('Gênero')\n .yAxisLabel('Bilheteria $(M)')\n .group(genreGroup, 'Total Apurado')\n .ordinalColors(['#00b300'])\n dc.renderAll() \n\n return view\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"factsMovie = crossfilter(datasetMovies)","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"yearDim = factsMovie.dimension(d=>d.Year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"xScaleMovie = d3.scaleLinear()\n .domain([yearDim.bottom(1)[0].Year-0.5, yearDim.top(1)[0].Year+0.5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"totalApurado = yearDim.group().reduceSum(d=>d.Worldwide_Gross_M)","pinned":true,"hidden":false,"mode":"ojs"},{"id":456,"value":"genreDim = factsMovie.dimension(d=>d.Genre)","pinned":true,"hidden":false,"mode":"ojs"},{"id":483,"value":"genreGroup = genreDim.group().reduceSum(d=>d.Worldwide_Gross_M)","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"names = {\n let sorted = genreGroup.top(Infinity)\n return sorted.map(d => d.key)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"xScaleGenre = d3.scaleOrdinal().domain(names)","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"function container(id, title) { \n return `\n

${title}

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"dc = require(\"dc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"crossfilter = require(\"crossfilter2\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}