30:T642,buildvis = { let tableChart = dc.dataTable(view.querySelector('#table-varieties')) // let variety = varietyCountryGroup.top(5); const sizeTable = 4 const total = varietyCountryGroup.top(sizeTable).reduce((a, b) => a + (b["value"] || 0), 0) // console.log(total) tableChart.width(width) .height(800) .group(d=>`Total number of varieties found:`+ varietyCountryGroup.all().reduce((a, b) => a + (b["value"] || 0), 0)) .dimension(varietyCountryGroup) .size(sizeTable) .columns([{ label: `Variety`,'format': (d) => d.key[1] } , { label: 'Number','format': (d) => d.value }, {label: 'Percentage of Total','format':(d) => { return ((d.value*100)/varietyCountryGroup.all().reduce((a, b) => a + (b["value"] || 0), 0)).toFixed(2) + ' %' }}]) .sortBy(function (d) { return d.value }) .order(d3.descending) .renderlet(function(chart){ chart.selectAll('tr.dc-table-row') .on("mouseover", (t,i)=> { showBubblesSelected(".bubble"+(i+1)) backgroundTable(i+2) // $("#table-varieties tr").find(".dc-table-row").prevObject[i+2].style.background='#ECECEC' }) .on("mouseout", ()=> { normalBubbles() $(".dc-table-row").css("background","#fff") }) }); dc.renderAll() makeGraphicCircles() addOther() updateMarkers() }31:Tafb,function makeGraphicCircles() { const width = 340 const height = 280 const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", [-width / 2, -height / 2, width, height]) const base = 6 const rings = [ {radius: base, width: 16}, {radius: base*4, width: 16}, {radius: base*8, width: 16}, {radius: base*12, width: 16}, {radius: (base*16)+3, width: 16}, {radius: (base*20)+3, width: 16}, ]; let count = 0 const ring =svg.selectAll("g") .remove() .data(rings) .enter() .append("g") .each(ringEnter) function ringEnter(d, i) { const n = Math.floor(2 * Math.PI * d.radius / d.width * Math.SQRT1_2), k = 360 / n d3.select(this).selectAll("g") .remove() .data(d3.range(n).map(function() { return d; })) .enter().append("g") .attr("class", (d,i)=> { count++; return "bubble bubble"+getClasseByCount(count) }) .attr("transform", function(_, i) { return "rotate(" + (i * k) + ")translate(" + d.radius + ")";}) .append("circle") .attr("cx", (d)=> { return (d.radius>6) ? 0:-5 }) .attr("cy", 0) .attr("r", d.width/2) .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut) } // Create Event Handlers for mouse function handleMouseOver(d, i) { // Add interactivity const nameClass = $(this).parent().attr("class") const begin = 7 //length 'bubble' const nameclassSelected = nameClass.substr(begin,nameClass.length-begin) //All Opacity 0.2 svg.selectAll('.bubble') .style("opacity", 0.2) //Selected Opacity 1 svg.selectAll("."+nameclassSelected) .style("opacity", 1) const indiceTable = +nameclassSelected.substr(-1) + 1 backgroundTable(indiceTable) // $("#table-varieties tr").find(".dc-table-row").prevObject[indiceTable].style.background='#ECECEC' //Version Jquery // $(".bubble").css({"opacity": 0.2}) // $("."+nameClass.substr(begin,nameClass.length-begin)).css({"opacity": 1}) } function handleMouseOut(d, i) { // Add interactivity //Return All Opacity 1 svg.selectAll('.bubble').style("opacity", 1) $(".dc-table-row").css({background: '#fff'}) //Version Jquery // $(".bubble").css({"opacity": 1}) } //End Circles // if(view.querySelector('#circles').innerHTML=="") { view.querySelector('#circles').innerHTML=""; view.querySelector('#circles').append(svg.node()); // } }32:T5c6,circles = { let markers = d3.map(); countryGroup.reduceCount().top(15).forEach( function(d) { const country = countryJson.find(c=>c.name === d.key) // console.log(d.value) let circle = L.circle([country.latlng[0], country.latlng[1]], circleScale(d.value), { color: '#fd8d3c', weight: 1, fillColor: '#fecc5c', fillOpacity: 0.5 }) circle.on("click", (e)=> { countryDimension.filterExact(e.target.key); circle.setStyle({ color: circle.options.color=='#fd8d3c' ? 'red':'#fd8d3c' }); dc.redrawAll() addOther() makeGraphicCircles() updateCountrySelected(e.target.key) }) circle.key = d.key; markers.set(d.key, circle) }) return markers } // circlesLayer.addLayer(circle) // circlesLayer.clearLayers() // countryDimension.group().reduceCount().top(15).forEach( function(d) { // const country = countryJson.find(c=>c.name === d.key) // // console.log(d.value) // let circle = L.circle([country.latlng[0], country.latlng[1]], circleScale(d.value), { // color: '#fd8d3c', // weight: 1, // fillColor: '#fecc5c', // fillOpacity: 0.5 // }) // circlesLayer.addLayer(circle) // }) 33:[] 2e:{"title":"Circle","cells":[{"id":0,"value":"md`# Circle`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1445,"value":"map = {\n view;\n let mapInstance = L.map('mapid').setView([-10,-55], 7)\n L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMapcontributors',\n maxZoom: 2,\n minZoom: 2\n }).addTo(mapInstance)\n \n return mapInstance\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1694,"value":"circlesLayer = L.layerGroup().addTo(map)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1657,"value":"view = md`${container()}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1899,"value":"function addOther() { \n const total = varietyCountryGroup.all().reduce((a, b) => a + (b[\"value\"] || 0), 0)\n const others = varietyCountryGroup.top(4).reduce((a, b) => a + (b[\"value\"] || 0), 0)\n const other = total - others\n const porcent = other * 100 / total\n $(\"#table-varieties tbody\")\n .append(`\n Others\n ${other}\n ${porcent.toFixed(2)} %\n `)\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1909,"value":"function readPercentageVariey() {\n let somaPercent = 0 \n const total = varietyCountryGroup.all().reduce((a, b) => a + (b[\"value\"] || 0), 0)\n const valuesByCountry = varietyCountryGroup.top(4).map(v=> {\n somaPercent+= Math.round(v.value*100/total)\n return Math.round(v.value*100/total)\n })\n valuesByCountry.push(100-somaPercent)\n // console.log(valuesByCountry)\n return valuesByCountry \n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1951,"value":"readPercentageVariey()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1996,"value":"function showBubblesSelected(bubble) {\n $(\".bubble\").css({\"opacity\":0.2})\n $(bubble).css({\"opacity\": 1})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2001,"value":"function normalBubbles() {\n $(\".bubble\").css({\"opacity\":1})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2058,"value":"function backgroundTable(indice) {\n $(\"#table-varieties tr\").find(\".dc-table-row\").prevObject[indice].style.background='#ECECEC'\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1934,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1697,"value":"varietyDimension = facts.dimension(d => d.variety )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1641,"value":"varietyGroup = varietyDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1468,"value":"countryDimension = facts.dimension(d => d.country )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1689,"value":"countryGroup = countryDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1710,"value":"varietyCountryDimension = facts.dimension(d=> [d.country, d.variety])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1716,"value":"varietyCountryGroup = varietyCountryDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1479,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2098,"value":"function updateCountrySelected(nameCountry) {\n $(\"#country\").html(\"Country: \" + nameCountry)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1535,"value":"circleScale = d3.scaleLinear()\n .domain([0, 882])\n .range([100000, 500000])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1639,"value":"function updateMarkers(){\n \n // console.log(countryDimension.group().reduceCount().top(15));\n let ids = countryGroup.reduceCount().top(15)\n let todisplay = new Array(ids.length) //preallocate array to be faster\n let mc = 0; //counter of used positions in the array\n for (let i = 0; i < ids.length; i++) {\n let tId = ids[i];\n if(tId.value > 0){ //when an element is filtered, it has value > 0\n todisplay[mc] = circles.get(tId.key)\n mc = mc + 1\n }\n }\n todisplay.length = mc; //resize the array so Leaflet does not complain\n if (layerList.length == 1) {\n layerList[0].clearLayers() //remove circles in layerGroup\n if (map.hasLayer(layerList[0])){\n map.removeLayer(layerList[0]) //remove layerGroup if present\n }\n }\n layerList[0] = L.layerGroup(todisplay).addTo(map) //add it again passing the array of markers\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1647,"value":"layerList = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"dataset = d3.csv(\"https://gist.githubusercontent.com/marcosborges1/8fb2dd913138676f061ae6ff5a597b4d/raw/ea47d7a4491da467b716d66f4aa3d9b3676c344f/winemag-data-v.csv\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"getClasseByCount = (valueCount) => {\n \n const values = readPercentageVariey().map(v=> v)\n // const values = valoresPorPais.map(pais=> pais.quantidade)\n \n let i = 0\n let acumulated = 0\n while (valueCount>acumulated) { \n acumulated += values[i]\n i++\n }\n return i\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"valoresPorPais = new Array({id:'Brasil', quantidade: 30}, {id:'Argentina', quantidade: 25}, {id:'Estados Unidos', quantidade: 20},{id:'França', quantidade: 15},{id:'Canada', quantidade: 10})","pinned":true,"hidden":false,"mode":"ojs"},{"id":869,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"function container() { \n return `\n

Wines

General View

\n \n \n \n \n \n \n \n

Varieties	Percentage

\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"html`css \n\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1700,"value":"countryJson = d3.json(\"https://gist.githubusercontent.com/marcosborges1/4af1b725bde13aa92138496c6d9ad99f/raw/e2f877e56229901bcd91579ebc39c6624a650c4b/countries_adapted.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":866,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":742,"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"},{"id":856,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs"},{"id":647,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1447,"value":"L = require(\"leaflet@1.6.0\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}