2d:null 2e:["$","title",null,{"children":"D3 com Crossfilter e DC.js | Magno Felipe | Observable"}] 33:T1428,html`Esta célula inclui o css do dc. `34:T413,acoes = { let view = md`${container('chart3', 'Variação dos Valores das ações do Google e do Facebook (%)')}` let compositeChart = dc.compositeChart(view.querySelector("#chart3")) let xScale = d3.scaleTime() .domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date]) compositeChart.width(800) .height(400) .margins({top: 50, right: 50, bottom: 25, left: 40}) .dimension(dateDim) .x(xScale) .xUnits(d3.timeDays) .renderHorizontalGridLines(true) .legend(dc.legend().x(700).y(5).itemHeight(13).gap(5)) .brushOn(false) .compose([ dc.lineChart(compositeChart) .group(per_googleByDayGroup, 'Google') .ordinalColors(['steelblue']), dc.lineChart(compositeChart) .group(per_fbByDayGroup, 'Facebook') .ordinalColors(['darkorange'])]) dc.renderAll() return view }35:[] 31:{"id":"b8e76f28c79af1e7","slug":"d3-com-crossfilter-e-dc-js","title":"D3 com Crossfilter e DC.js","thumbnail":"e5a59e9097cc3b6bc8083a3277d80443f581025cb6c92826cb08f9e39e49a11e","access_level":"public","create_time":"$D2019-09-23T21:10:24.430Z","update_time":"$D2019-10-07T02:54:04.875Z","view_time":null,"first_public_time":"$D2019-10-06T02:04:54.552Z","fork":{"id":"28e37ca53bba088d","slug":"d3-com-crossfilter-e-dc-js","title":"D3 com Crossfilter e DC.js","owner":{"id":"d94d0ab1065acef4","login":"emanueles","name":"Emanuele Santos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c5285e74a3bcadcc","login":"magnum457","name":"Magno Felipe","avatar_url":"https://avatars-next.observableusercontent.com/f31ccf9a1f3f0ad274fe1a54b42ce20cc62d6518e2ebd01e2ba82c693e189687","tier":"starter_2024"},"version":366,"publish_version":366,"role":null,"authored":false,"authors":[{"type":"individual","id":"9494cb5e2bda6d5a","login":"magnum457","name":"Magno Felipe","avatar_url":"https://avatars-next.observableusercontent.com/f31ccf9a1f3f0ad274fe1a54b42ce20cc62d6518e2ebd01e2ba82c693e189687","tier":null}],"members":[{"type":"individual","id":"9494cb5e2bda6d5a","login":"magnum457","name":"Magno Felipe","avatar_url":"https://avatars-next.observableusercontent.com/f31ccf9a1f3f0ad274fe1a54b42ce20cc62d6518e2ebd01e2ba82c693e189687","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"D3 com Crossfilter e DC.js","cells":[{"id":0,"value":"md`# D3 com Crossfilter e DC.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// carregando os dados com o d3\ndataset = d3.csv(\"https://gist.githubusercontent.com/emanueles/d8df8d875edda71aa2e2365fae2ce225/raw/1e949d3da02ed6caa21fe3a7a12a4e5a611a4bab/stocks.csv\").then(function(data){\n // formatando nossos dados\n let parseDate = d3.timeParse(\"%Y/%m/%d\")\n let firstDate = d3.min(data) // recuperando os dados da data inicial\n console.log(firstDate)\n data.forEach(function(d,i){\n d.date = parseDate(d.date)\n d.google = +d.google // + é um atalho pra converter pra numérico\n d.facebook = +d.facebook\n d.p_facebook = (d.facebook - firstDate.facebook) / firstDate.facebook * 100\n d.p_google = (d.google - firstDate.google) / firstDate.google * 100\n })\n return data\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"facts = crossfilter(dataset) // instância do objeto crossfilter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"dateDim = facts.dimension( d => d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"googleDim = facts.dimension( d => d.google)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"topTenGoogle = googleDim.top(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"bottomTenGoogle = googleDim.bottom(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"googleByDayGroup = dateDim.group().reduceSum(d => d.google)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"fbByDayGroup = dateDim.group().reduceSum(d => d.facebook)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"function container(id, title) { \n return `\n

${title}

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"buildvis = {\n let view = md`${container('chart','Valores das ações do Google')}`\n let lineChart = dc.lineChart(view.querySelector(\"#chart\"))\n let xScale = d3.scaleTime()\n .domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])\n lineChart.width(800)\n .height(400)\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(680).y(10).itemHeight(13).gap(5))\n .brushOn(false)\n .group(googleByDayGroup, 'Google')\n dc.renderAll()\n return view \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"buildcomposite = {\n let view = md`${container('chart2', 'Valores das ações do Google e do Facebook')}`\n let compositeChart = dc.compositeChart(view.querySelector(\"#chart2\"))\n let xScale = d3.scaleTime()\n .domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date])\n compositeChart.width(800)\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(700).y(5).itemHeight(13).gap(5))\n .brushOn(false) \n .compose([\n dc.lineChart(compositeChart)\n .group(googleByDayGroup, 'Google')\n .ordinalColors(['steelblue']),\n dc.lineChart(compositeChart)\n .group(fbByDayGroup, 'Facebook')\n .ordinalColors(['darkorange'])])\n dc.renderAll()\n return view \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"dc = require(\"dc\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"crossfilter = require(\"crossfilter2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"per_googleByDayGroup = dateDim.group().reduceSum(d => d.p_google)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"per_fbByDayGroup = dateDim.group().reduceSum(d => d.p_facebook)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"movies = d3.json('https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json').then(function(data){\n data.forEach(function(d,i){\n d.Year = +d.Year\n })\n return data\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"facts2 = crossfilter(movies)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"yearDim = facts2.dimension(d => d.Year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"genreDim = facts2.dimension(d => d.Genre)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"genreDim.top(3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"groupBilheteria = yearDim.group().reduceSum(d => d.Worldwide_Gross_M)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"groupGenre = genreDim.group().reduceSum(d => d.Worldwide_Gross_M)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"by_year = {\n let view = md`${container('chart4', 'Total Arrecadado nas Bilheterias por ano em Milhões de Dólares')}`\n let barChart1 = dc.barChart(view.querySelector(\"#chart4\"))\n let xScale = d3.scaleTime()\n .domain([yearDim.bottom(1)[0].Year - 0.5, yearDim.top(1)[0].Year + 1])\n \n barChart1.xAxis().ticks(5)\n \n barChart1.width(800)\n .height(400)\n .margins({top: 10, right: 50, bottom: 30, left: 40})\n .dimension(yearDim)\n .group(groupBilheteria, 'Total de Bilheteria')\n .legend(dc.legend().x(650).y(10).itemHeight(13).gap(5))\n .brushOn(false)\n .x(xScale)\n .gap(25)\n .centerBar(true)\n .renderHorizontalGridLines(true)\n \n barChart1.xAxis().tickFormat(d3.format(\"d\"))\n \n dc.renderAll()\n return view\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"by_genre = {\n let view = md`${container('chart5', 'Total Arrecadado nas Bilheterias por ano em Milhões de Dólares')}`\n let barChart1 = dc.barChart(view.querySelector(\"#chart5\"))\n let xScale = d3.scaleOrdinal()\n .domain(genreDim)\n \n barChart1.width(800)\n .height(400)\n .dimension(genreDim)\n .margins({top: 10, right: 50, bottom: 30, left: 40})\n .x(xScale)\n .xUnits(dc.units.ordinal)\n .renderHorizontalGridLines(true)\n .legend(dc.legend().x(650).y(10).itemHeight(13).gap(5))\n .gap(25)\n .brushOn(false)\n .group(groupGenre, 'Total Bilheteria')\n \n \n dc.renderAll()\n return view\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"