31: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)\`. `32:[{"id":"82fe2f240ae77aebb82a80be29f01e14a59770b346b548a967c52dfc513b97e6ebfbfc5c806a9f617b5921247ed8893a984dd9c74b5eeb95931460eb003b5fee","href":"https://static.observableusercontent.com/files/82fe2f240ae77aebb82a80be29f01e14a59770b346b548a967c52dfc513b97e6ebfbfc5c806a9f617b5921247ed8893a984dd9c74b5eeb95931460eb003b5fee","name":"barchart.png","type":"image/png","lastModified":1612090556299.223,"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":299,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"dateDim = facts.dimension(d=>d.date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"maxTempDim = facts.dimension(d=>d.temperatureMax)","pinned":true,"hidden":false,"mode":"ojs"},{"id":311,"value":"maxTempByDayGroup = dateDim.group().reduceSum(d => d.temperatureMax)","pinned":true,"hidden":false,"mode":"ojs"},{"id":317,"value":"minTempByDayGroup = dateDim.group().reduceSum(d => d.temperatureMin);","pinned":true,"hidden":false,"mode":"ojs"},{"id":273,"value":"topTenMaxTemp = maxTempDim.top(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"bottomTenMaxTemp = maxTempDim.bottom(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"xScale = d3.scaleTime()\n .domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])","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":320,"value":"difTempGroup = dateDim.group().reduceSum(d=>(d.temperatureMax-d.temperatureMin))","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"buildbar = {\n // escreva o seu código aqui\n let view = md`${container('chart3','Variação de Temperatura em NYC em 2018')}`\n let Bchart = dc.barChart(view.querySelector(\"#chart3\"))\n Bchart.width(width)\n .height(500) \n .dimension(dateDim)\n .margins({top: 30, right: 50, bottom: 25, left: 40})\n //.renderArea(true)\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( difTempGroup , 'Variação de Temperatura')\n .ordinalColors(['green'])\n dc.renderAll()\n return view \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"moviesdataset = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json')\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"facts2 = crossfilter(moviesdataset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"YearDim = facts2.dimension(d=>d.Year)","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"filmGroup = YearDim.group().reduceSum(d => d.Worldwide_Gross_M)\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"xScale2 = d3.scaleLinear()\n .domain([YearDim.bottom(1)[0].Year-2, YearDim.top(1)[0].Year + 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":347,"value":"by_Year = {\n \n let view = md`${container('chart4','Total Bilheteira por Ano')}`\n let Bfilm = dc.barChart(view.querySelector(\"#chart4\"))\n Bfilm.width(width)\n .height(500) \n .dimension(YearDim)\n .margins({top: 30, right: 50, bottom: 25, left: 40})\n //.renderArea(true)\n .x(d3.scaleOrdinal().domain(names))\n .xUnits(dc.units.ordinal) \n .renderHorizontalGridLines(true)\n .legend(dc.legend().x(width-200).y(10).itemHeight(13).gap(5))\n //.xAxis().tickFormat(d3.format(\"d\"))\n .brushOn(false)\n .group( filmGroup , 'bilheteria por ano')\n .ordinalColors(['blue'])\n \n dc.renderAll()\n return view \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"md `${\"A questão sobre o gênero dos filmes\"}`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"genreFilm = facts2.dimension(d=>d.Genre)","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"genreGroup = genreFilm.group().reduceSum(d=>d.Worldwide_Gross_M)","pinned":true,"hidden":false,"mode":"ojs"},{"id":453,"value":"names = {\n let sorted = genreGroup.top(10)\n return sorted.map(d => d.key)\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"// xScale3 = d3.scaleLinear()\n// .domain([names[0], names[10]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"by_genre = {\n let view = md`${container('chart5','Total Bilheteria por Gênero')}`\n let BGenrefilm = dc.barChart(view.querySelector(\"#chart5\"))\n BGenrefilm.width(width)\n .height(500) \n .dimension(names)\n .margins({top: 30, right: 50, bottom: 25, left: 40})\n //.renderArea(true)//Aqui ocorre um erro. O gráfico não é plotado para true\n .x(d3.scaleOrdinal().domain(names))\n .xUnits(dc.units.ordinal) \n .renderHorizontalGridLines(true)\n .legend(dc.legend().x(width-200).y(10).itemHeight(13).gap(5))\n .brushOn(false)\n .group( genreGroup , 'Bilheteria por Gênero')\n .ordinalColors(['red'])\n dc.renderAll()\n return view \n \n}\n","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"}