2a:T4b6,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)\`. Também é preciso configurar o xUnits: \`.xUnits(dc.units.ordinal)\`. `2b:[{"id":"82fe2f240ae77aebb82a80be29f01e14a59770b346b548a967c52dfc513b97e6ebfbfc5c806a9f617b5921247ed8893a984dd9c74b5eeb95931460eb003b5fee","href":"https://static.observableusercontent.com/files/82fe2f240ae77aebb82a80be29f01e14a59770b346b548a967c52dfc513b97e6ebfbfc5c806a9f617b5921247ed8893a984dd9c74b5eeb95931460eb003b5fee","name":"barchart.png","type":"image/png","lastModified":1589142881932.964,"size":137673}] 29:{"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\")","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(??)\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(??, '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(??)\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(??, 'Temperatura Máxima')\n // .ordinalColors(['darkorange']),\n // dc.lineChart(compositeChart)\n // .group(??, '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 // escreva o seu código aqui\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"$2a","pinned":false,"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":"$W2b","stdlib":"1","titling":"auto"}