45:["$","title",null,{"children":"D3 com Crossfilter e DC.js | Dhannyell Lukas | Observable"}] 4d: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)\`. `4e:[{"id":"82fe2f240ae77aebb82a80be29f01e14a59770b346b548a967c52dfc513b97e6ebfbfc5c806a9f617b5921247ed8893a984dd9c74b5eeb95931460eb003b5fee","href":"https://static.observableusercontent.com/files/82fe2f240ae77aebb82a80be29f01e14a59770b346b548a967c52dfc513b97e6ebfbfc5c806a9f617b5921247ed8893a984dd9c74b5eeb95931460eb003b5fee","name":"barchart.png","type":"image/png","lastModified":1612108847063.023,"size":137673}] 49:{"id":"e519bf32c5c78c8b","slug":"d3-com-crossfilter-e-dc-js","title":"D3 com Crossfilter e DC.js","thumbnail":"54ad480aa7d88982edc363e3b19164304d701f6766fceb5dc33fe243b5f259ac","access_level":"public","create_time":"$D2021-01-31T16:00:47.063Z","update_time":"$D2021-02-21T23:51:02.975Z","view_time":null,"first_public_time":"$D2021-02-01T01:12:53.819Z","has_unpublished_edits":null,"fork":{"id":"719676c8e7935637","slug":"d3-com-crossfilter-e-dc-js/2","title":"D3 com Crossfilter e DC.js","owner":{"id":"d94d0ab1065acef4","login":"emanueles","name":"Emanuele Santos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"00c7587517786dc7","login":"dhannyell","name":"Dhannyell Lukas","avatar_url":"https://avatars-next.observableusercontent.com/c38b84163a78bf578b07e1c3eb323e8126e2a8cb8d60b1eda66acfe4bd2dd1b4","tier":"starter_2024","bio":"I'm a Computer Engineering Student and\r\nEnthusiast of indie games.","followed_by_you":false,"follows_you":false},"version":332,"publish_version":332,"role":null,"authored":false,"authors":[{"type":"individual","id":"df7fa2740d679be4","login":"dhannyell","name":"Dhannyell Lukas","avatar_url":"https://avatars-next.observableusercontent.com/c38b84163a78bf578b07e1c3eb323e8126e2a8cb8d60b1eda66acfe4bd2dd1b4","tier":null,"bio":"I'm a Computer Engineering Student and\r\nEnthusiast of indie games.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"df7fa2740d679be4","login":"dhannyell","name":"Dhannyell Lukas","avatar_url":"https://avatars-next.observableusercontent.com/c38b84163a78bf578b07e1c3eb323e8126e2a8cb8d60b1eda66acfe4bd2dd1b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"facts = crossfilter(dataset);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"dateDim = facts.dimension(d => d.date);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"maxTempByDayGroup = dateDim.group().reduceSum(d => d.temperatureMax);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"minTempByDayGroup = dateDim.group().reduceSum(d => d.temperatureMin)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"maxTempDim = facts.dimension(d => d.temperatureMax);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"xScale = d3.scaleTime().domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"topTenMaxTemp = maxTempDim.top(10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"bottonTenMaxTemp = maxTempDim.bottom(10);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"buildbar = {\n // escreva o seu código aqui\n const varTempByDayGroup = dateDim.group().reduceSum(d => d.temperatureMax - d.temperatureMin)\n \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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"movies = d3.json(\"https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"by_year = {\n const facts = crossfilter(movies);\n \n const yearDim = facts.dimension(d => d.Year)\n const xScale = d3.scaleLinear().domain([yearDim.bottom(1)[0].Year-1, yearDim.top(1)[0].Year+1])\n \n const grossGroup = yearDim.group().reduceSum(d => d.Worldwide_Gross_M)\n \n let view = md`${container('chart4','Bilheteria apurada por ano')}`\n let barChart = dc.barChart(view.querySelector(\"#chart4\"))\n \n barChart.xAxis().tickFormat(d3.format(\"d\"))\n barChart.xAxis().ticks(5)\n \n barChart.width(width)\n .height(500)\n .dimension(yearDim)\n .margins({top: 30, right: 50, bottom: 25, left: 40})\n .x(xScale)\n .centerBar(true)\n .renderHorizontalGridLines(true)\n .legend(dc.legend().x(width-200).y(10).itemHeight(13).gap(5))\n .brushOn(false)\n .group(grossGroup, 'Bilheteria')\n \n dc.renderAll()\n return view\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"by_genre = {\n const facts = crossfilter(movies);\n \n const genreDim = facts.dimension(d => d.Genre)\n const genreGroup = genreDim.group().reduceSum(d => d.Worldwide_Gross_M)\n \n const names = genreGroup.top(Infinity).map(d => d.key)\n const xScale = d3.scaleOrdinal().domain(names)\n \n let view = md`${container('chart5','Bilheteria apurada por gênero')}`\n let barChart = dc.barChart(view.querySelector(\"#chart5\"))\n \n barChart.width(width)\n .height(500)\n .dimension(genreDim)\n .margins({top: 30, right: 50, bottom: 25, left: 40})\n .x(xScale)\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')\n \n dc.renderAll()\n return view\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"function container(id, title) { \n return `\n

${title}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"dc = require(\"dc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"crossfilter = require(\"crossfilter2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null