document.addEventListener('DOMContentLoaded', function() { load(); }); function load() { var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // Create a map(id, column) for each data column to display var cidade = d3.map(); var uf = d3.map(); var carga_despachada = d3.map(); var passageiros_embarcados = d3.map(); var voos_decolagens = d3.map(); var path = d3.geoPath(); // The linear scale for the poverty rate var yLegend = d3.scaleLinear() .domain(d3.range(900, 900000, 10000)) .rangeRound([58, 88]); // The scaleThreshold gives a scale transformation var color = d3.scaleThreshold() .domain(d3.range(900, 900000, 10000)) .range([ "#f7f7f7", // light gray "#d9d9d9", "#bdbdbd", "#969696", "#737373", "#525252", "#252525", // dark gray "#b0b0b0", "#e0e0e0" ]); var g = svg.append("g"); // Build the vertical legend g.selectAll("rect") .data(color.range().map(function(d) { d = color.invertExtent(d); if (d[0] == null) d[0] = yLegend.domain()[0]; if (d[1] == null) d[1] = yLegend.domain()[1]; return d; })) .enter().append("rect") .attr("height", 26) .attr("x", -26) .attr("y", function(d) { return yLegend(d[0]) + 12; }) .attr("width", 23) .attr("fill", function(d) { return color(d[0]); }); // Legend title g.append("text") .attr("font-family", "Arial") .attr("x", -42) .attr("y", 48) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-size", "11px") .attr("font-weight", "bold") .text("Voos por Municipio"); // Place the legend axis with the values in it g.attr("transform", "translate(984, 0)") .call(d3.axisRight(yLegend) .tickSize(0) .tickFormat(function(y, i) { if (i > 8) return ""; if (i == 0) return "≤" + y + ""; if (i == 8) return "≥" + y + ""; return y + ""; }) .tickValues(color.domain())) .select(".domain") .remove(); var promises = [ d3.json("https://raw.githubusercontent.com/mathiasbrem/brazilian-airports-d3js/main/data/br_cities.json"), d3.csv("https://raw.githubusercontent.com/mathiasbrem/brazilian-airports-d3js/main/data/flights_cities.csv", function(d) { passageiros_embarcados.set(d.id, d.passageiros_embarcados); voos_decolagens.set(d.id, d.voos_decolagens); carga_despachada.set(d.id, d.carga_despachada); cidade.set(d.id, d.ucidadef); uf.set(d.id, d.uf); }) ]; Promise.all(promises).then(ready); // Define and call the `tip` variable before using it var tip = d3.tip() .attr('class', 'd3-tip') .offset([140, 140]) .html(function(d) { return "