2d:null 2e:["$","title",null,{"children":"H2 verão2, mapa interativo | Magno Felipe | Observable"}] 33:T1459,html`Esta célula inclui o css do dc. `34:T139a,interativeMap = { // Quantidade bolsas por unidade federativa var sumByYear_UF = ufDimension.group().reduceSum((d) => d['Ano'] == 2018 ? d['Total Linha']:0) // Formatação para este modo de mapeamento var sumByYear_Mapped = d3.map() sumByYear_UF.all().forEach(function(d, i) { sumByYear_Mapped.set(sumByYear_UF.all()[i].key, sumByYear_UF.all()[i].value) }) var colorScale = d3.scaleQuantize() .domain([0, 25000]) //Valor máximo de bolsas atingido por um estado até 2018 .range(blues) function style(feature) { return { weight: 1, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.6, fillColor: colorScale(sumByYear_Mapped.get(feature.properties.UF_05)) }; } // -----------------info----------------- // control that shows state info on hover var info = L.control() info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; } info.update = function (feat) { this._div.innerHTML = '

Bolsas de 2018

' + (feat ? '' + feat.properties.UF_05 + '
' + sumByYear_Mapped.get(feat.properties.UF_05) : 'Passe o mouse sobre as unidade federativas'); } info.addTo(map); // -----------------info-----------------END // -----------------geojson----------------- function highlightFeature(e) { let layer = e.target; //console.log(e.target) layer.setStyle({ weight: 2, color: '#AAA', dashArray: '', fillOpacity: 0.7 }); if (!L.Browser.ie && !L.Browser.opera) { layer.bringToFront(); } info.update(layer.feature); } var geojson; function resetHighlight(e) { geojson.resetStyle(e.target); info.update(); } function zoomToFeature(e) { map.fitBounds(e.target.getBounds()); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } geojson = L.geoJson(ufs, { style: style, onEachFeature: onEachFeature }).addTo(map) // -----------------geojson-----------------END // -----------------legend----------------- var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { let div = L.DomUtil.create('div', 'info legend'), labels = [], n = blues.length, from, to; for (let i = 0; i < n; i++) { let c = blues[i] let fromto = colorScale.invertExtent(c); labels.push( ' ' + d3.format("d")(fromto[0]) + (d3.format("d")(fromto[1]) ? '–' + d3.format("d")(fromto[1]) : '+')); } div.innerHTML = labels.join('
') return div } legend.addTo(map) // -----------------legend-----------------END // -----------------Button----------------- var years = [] for (let i=1995;i<=2018;i++) {years.push(i);} var dropdownButton = d3.select("#dataviz_builtWithD3") .append('select') dropdownButton // Add a button .selectAll('myOptions') // Next 4 lines add 6 options = 6 colors .data(years) .enter() .append('option') .text(function (d) { return d; }) // text showed in the menu .attr("value", function (d) { return d; }) // -----------------Buttom-----------------END // -----------------Update----------------- function updateYear(ano) { // sumByUFYear = ufDimension.group().reduceSum((d) => d['Total Linha']) sumByYear_UF = ufDimension.group().reduceSum((d) => d['Ano'] == ano ? d['Total Linha']:0) sumByYear_Mapped = d3.map() sumByYear_UF.all().forEach(function(d, i) { sumByYear_Mapped.set(sumByYear_UF.all()[i].key, sumByYear_UF.all()[i].value) }) // info = L.control() info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; } info.update = function (feat) { this._div.innerHTML = '

Bolsas de '+ ano + '

' + (feat ? '' + feat.properties.UF_05 + '
' + sumByYear_Mapped.get(feat.properties.UF_05) : 'Passe o mouse sobre as unidade federativas'); } geojson = L.geoJson(ufs, { style: style, onEachFeature: onEachFeature }).addTo(map) legend.onAdd = function (map) { let div = L.DomUtil.create('div', 'info legend'), labels = [], n = blues.length, from, to; for (let i = 0; i < n; i++) { let c = blues[i] let fromto = colorScale.invertExtent(c); labels.push( ' ' + d3.format("d")(fromto[0]) + (d3.format("d")(fromto[1]) ? '–' + d3.format("d")(fromto[1]) : '+')); } div.innerHTML = labels.join('
') return div } legend.addTo(map) } // -----------------Update-----------------END dropdownButton.on("change", function(d) { var selectedOption = d3.select(this).property("value") updateYear(selectedOption) }) }35:[] 31:{"id":"55286642cac8ebc6","slug":"h2-verao2-mapa-interativo","title":"H2 verão2, mapa interativo","thumbnail":"9c08654d5e0d2f07125de2deedc67140bf30c2c1b6b747c520feca6bf4816623","access_level":"public","create_time":"$D2019-11-23T23:24:27.284Z","update_time":"$D2019-11-24T01:55:26.468Z","view_time":null,"first_public_time":"$D2019-11-24T01:22:40.854Z","fork":{"id":"9640503273f1f733","slug":"h2-v2","title":"H2 v2, mapa interativo","owner":{"id":"7a6fe25356936255","login":"sayonarasantos","name":"Sayonara"}},"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":580,"publish_version":580,"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":"H2 verão2, mapa interativo","cells":[{"id":0,"value":"md`# H2 verão2, mapa interativo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`css \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"dataset2 = d3.csv(\"https://raw.githubusercontent.com/lailson93/datavis-course/master/projet/bolsas_brasil.csv\").then(function(data){\n data.forEach(function(d,i){\n d.total_linha = +d['Total Linha']\n })\n return data\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"by_year = {\n let view = md`${container2_1('barchart','Total de Bolsas nas Universidades Brasileiras')}` \n \n let chart1 = dc.seriesChart(view.querySelector(\"#barchart\")); \n chart1\n .width(768)\n .height(480)\n .chart(function(c) { return dc.lineChart(c).curve(d3.curveCardinal); })\n .x(d3.scaleLinear().domain([1995,2019]))\n .brushOn(false)\n .renderHorizontalGridLines(true)\n .yAxisLabel(\"Quantidade de bolsas\")\n .xAxisLabel(\"Anos\")\n .clipPadding(10)\n .elasticY(true)\n .dimension(yearRegionDimension)\n .group(yearRegionGroup)\n .mouseZoomable(true)\n .seriesAccessor(function(d) {return d.key[1];})\n .keyAccessor(function(d) {return +d.key[0];})\n .valueAccessor(function(d) {return +d.value - 500;})\n .legend(dc.legend().x(100).y(10).itemHeight(13).gap(5).horizontal(1).legendWidth(160).itemWidth(100));\n chart1.yAxis().tickFormat(function(d) {return d3.format(',d')(d+299500);});\n chart1.margins().left += 40;\n dc.renderAll();\n \n return view \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"yearRegionDimension = facts2.dimension(function(d) {return [d['Ano'], d['Região']]; })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"yearRegionGroup = yearRegionDimension.group().reduceSum(function(d) { return d.total_linha; });","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"yearRegionGroup.all()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"function container2_1(id, title) { \n return `\n

${title}

\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"buildvis = {\n let view = md`${container2_2()}`\n return view\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"facts2 = crossfilter(dataset2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"ufDimension = facts2.dimension( d => d['UF'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"sumByYear = ufDimension.group().reduceSum((d) => d['Total Linha'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"map = {\n buildvis;\n let mapInstance = L.map('mapid').setView([-14.82,-55.11], 4)\n L.tileLayer(\"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png\", {\n attribution: `© OpenStreetMap,\n Map tiles by © CARTO`,\n maxZoom: 18\n }).addTo(mapInstance)\n return mapInstance\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function container2_2() { \n return `\n

\n\n

Quantidade de bolsas por Unidade Federativa

\n \n

\n \n
\n \n

\n\n
\n \n

Fonte do dados: Capes

\n\n

\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"ufs = d3.json(\"https://raw.githubusercontent.com/fititnt/gis-dataset-brasil/master/uf/geojson/uf.json\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"blues = [\n \"#ffe3d1\",\n \"#ffc49e\",\n \"#ffae7a\",\n \"#ff9552\",\n \"#ff7924\",\n \n \"#ff6300\",\n \"#c24b00\",\n \"#7a3000\",\n \"#421a00\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"// Blue \n// \"#d1d5ff\",\n // \"#8f99ff\",\n // \"#6673ff\",\n // \"#4757ff\",\n // \"#0015e6\",\n // \"#0011bd\",\n // \"#000d8f\",\n // \"#00085c\",\n // \"#000429\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"html`Esta célula contém os estilos da Visualização\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$$ = require('jquery').then(jquery => {\n window.jquery = jquery;\n return require('popper@1.0.1/index.js').catch(() => jquery);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"L = require('leaflet@1.5.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"