2d:null 2e:["$","title",null,{"children":"D3 com Crossfilter e DC.js | Sayonara | Observable"}] 33:T1428,html`Esta célula inclui o css do dc. `34:[] 31:{"id":"b07876bba2250715","slug":"d3-com-crossfilter-e-dc-js","title":"D3 com Crossfilter e DC.js","thumbnail":"9455afda6d03706d05f72c4fbae8e0e7490de61832cff30e3537f1a57b81e2b0","access_level":"public","create_time":"$D2019-09-23T21:14:10.116Z","update_time":"$D2019-10-07T03:24:34.536Z","view_time":null,"first_public_time":"$D2019-09-29T08:22:14.638Z","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":"7a6fe25356936255","login":"sayonarasantos","name":"Sayonara","avatar_url":"https://avatars-next.observableusercontent.com/367401073cb167749ab94d9bf5d368c0a410ff82395caa77baae0a4138ba2040","tier":"starter_2024"},"version":436,"publish_version":436,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bfbc482195215b","login":"sayonarasantos","name":"Sayonara","avatar_url":"https://avatars-next.observableusercontent.com/367401073cb167749ab94d9bf5d368c0a410ff82395caa77baae0a4138ba2040","tier":null}],"members":[{"type":"individual","id":"92bfbc482195215b","login":"sayonarasantos","name":"Sayonara","avatar_url":"https://avatars-next.observableusercontent.com/367401073cb167749ab94d9bf5d368c0a410ff82395caa77baae0a4138ba2040","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":"dataset = 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 data.forEach(function(d,i){\n d.date = parseDate(d.date)\n d.google = +d.google // +: converte para numerico\n d.facebook = +d.facebook\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)","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":244,"value":"html`QUESTAO 1`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"googleByDayGroup2 = dateDim.group().reduceSum(d => 100*(d.google - dataset[0].google)/dataset[0].google)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"fbByDayGroup2 = dateDim.group().reduceSum(d => 100*(d.facebook- dataset[0].facebook)/dataset[0].facebook)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"acoes = {\n let view = md`${container('chart3', 'Valores das ações do Google e do Facebook')}`\n let compositeChart = dc.compositeChart(view.querySelector(\"#chart3\"))\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(googleByDayGroup2, 'Google')\n .ordinalColors(['steelblue']),\n dc.lineChart(compositeChart)\n .group(fbByDayGroup2, '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":251,"value":"html`QUESTAO 2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"movies = d3.json(\"https://raw.githubusercontent.com/emanueles/datavis-course/master/assets/files/observable/movies.json\").then(function(data){\n // formatando nossos dados\n data.forEach(function(d,i){\n // d.Film = d.Film\n d.Year = d.Year\n // d.Genre = d.Genre\n d.Worldwide_Gross_M = d.Worldwide_Gross_M\n d.Budget_M = +d.Budget_M \n })\n return data\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"facts2 = crossfilter(movies)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"yearDim = facts2.dimension(d => d.Year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"wGrossByYear = yearDim.group().reduceSum(d => d.Worldwide_Gross_M)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"genreDim = facts2.dimension(d => d.Genre)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"wGrossByGenre = genreDim.group().reduceSum(d => d.Worldwide_Gross_M)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"by_year = {\n let view = md`${container('chart4', 'Bilheteria por ano')}`\n let barChart = dc.barChart(view.querySelector(\"#chart4\"))\n // let xScale = d3.scaleBand()\n // .domain(yearDim)\n \n barChart.width(800)\n .height(400)\n .margins({top: 50, right: 50, bottom: 25, left: 40})\n .dimension(yearDim)\n .x(d3.scaleBand())\n .xUnits(dc.units.ordinal)\n .barPadding(0.3)\n .outerPadding(0.1)\n .renderHorizontalGridLines(true)\n // .legend(dc.legend().x(700).y(5).itemHeight(13).gap(5))\n .brushOn(false) //? \n .group(wGrossByYear)\n .ordinalColors(['steelblue']),\n dc.renderAll()\n return view \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"by_genre = {\n let view = md`${container('chart5', 'Bilheteria por gênero')}`\n let barChart = dc.barChart(view.querySelector(\"#chart5\"))\n let xScale = d3.scaleBand();\n \n barChart.width(800)\n .height(400)\n .margins({top: 50, right: 50, bottom: 25, left: 40})\n .dimension(genreDim)\n .x(d3.scaleBand())\n .xUnits(dc.units.ordinal)\n .barPadding(0.3)\n .outerPadding(0.1)\n .renderHorizontalGridLines(true)\n // .legend(dc.legend().x(700).y(5).itemHeight(13).gap(5))\n .brushOn(false) \n .group(wGrossByGenre, 'Milhões de dólares')\n .ordinalColors(['steelblue']),\n dc.renderAll()\n return view \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"