map = {
  const svg = d3
    .create("svg")
    .attr("width", w)
    .attr("height", 600)
    .attr("viewBox", [0, 0, w, h])
    .attr("class", "italy");

  const legend = svg
    .append("g")
    .attr("class", "legend")
    .attr("fill", "#777")
    .attr(
      "transform",
      `translate(${w > breakpoint ? [w - w / 3.5, h / 3.5] : [10, h - 15]})`
    );

  legend
    .append("text")
    .attr("class", "legend-title")
    .text("No. confirmed cases")
    .attr("dy", -maxRadius * 2.9);

  const legendBubbles = legend
    .selectAll("g")
    .data(legendRadii)
    .join("g");

  let margin = 0;
  legendBubbles
    .attr("transform", (d, i) => {
      margin += i === 0 ? 0 : radius(legendBubbles.data()[i - 1]) * 2 + 15;
      return `translate(${margin + radius(d)}, 0)`;
    })
    .append("circle")
    .attr("class", "legend-bubble")
    .attr("fill", d => colorScale(d))
    .attr("cy", d => -radius(d))
    .attr("r", radius);

  legendBubbles
    .append("text")
    .attr("dy", "1.3em")
    .text(w > breakpoint ? numFormat : sFormat);

  // svg
  //   .append("path")
  //   .datum(provinces)
  //   .attr("d", path);

  // svg.append("path")
  //   .datum(topojson.feature(italy, italy.objects.estados))
  //   .attr("class", "land")
  //   .attr("d", path);
  
  svg
    .selectAll(".subunit")
    .data(provinces.features)
    .enter()
    .append("path")
    .attr("class", function(d) {
      return "subunit";
    })
    .attr("d", path);
  
-
  console.log(data[mutable index]);
+
  // console.log(data[mutable index]);
  
  const bubble = svg
    .selectAll(".bubble")
-
    .data(data[mutable index])
+
    .data(data[0])
    .enter()
    .append("circle")
    .attr("transform", function(d) {
      return "translate(" + projection([d.longitude, d.latitude]) + ")";
    })
    .attr("class", "bubble")
    .attr("fill-opacity", 0.5)
    .attr("fill", d => colorScale(+d.confirmed))
    .attr("r", d => radius(+d.confirmed));

  bubble.append("title");

  // svg
  //   .selectAll("place")
  //   .data(places.features)
  //   .enter()
  //   .append("circle")
  //   .attr("class", "place")
  //   .attr("r", 2.5)
  //   .attr("transform", function(d) {
  //     return "translate(" + projection(d.geometry.coordinates) + ")";
  //   });

  // svg
  //   .selectAll(".place-label")
  //   .data(places.features)
  //   .enter()
  //   .append("text")
  //   .attr("class", "place-label")
  //   .attr("transform", function(d) {
  //     return "translate(" + projection(d.geometry.coordinates) + ")";
  //   })
  //   .attr("dy", ".35em")
  //   .text(function(d) {
  //     return d.properties.name;
  //   })
  //   .attr("x", function(d) {
  //     return d.geometry.coordinates[0] > -1 ? 6 : -6;
  //   })
  //   .style("text-anchor", function(d) {
  //     return d.geometry.coordinates[0] > -1 ? "start" : "end";
  //   });

  const wrapper = html`<div class="wrapper"></div>`;
  wrapper.append(svg.node());

  return Object.assign(wrapper, {
    update(i) {
      const t = svg
        .transition()
        .duration(i === 0 ? 0 : delay)
        .ease(d3.easeLinear);

      bubble
        .data(data[i])
        .call(b => {
          b.transition(t)
            .attr("fill", d => colorScale(+d.confirmed))
            .attr("r", d => radius(+d.confirmed));
        });
    }
  });
}

// sometimes new data won't be reported, so this will fetch the last data tha was reported and replicate to new days.
data = {
  let mutableArray = [...data_with_holes].filter(function (el) {
    return el != null;
  });
  
  for (let i = 1; i < data_with_holes.length; i++) {
    for (let j = 0; j < mutableArray[i - 1].length; j++) {
        let found = mutableArray[i].find(element => element.state === mutableArray[i - 1][j].state && element.city === mutableArray[i - 1][j].city);
        if (found !== undefined) {
            continue;
        }

        mutableArray[i].push(data_with_holes[i - 1][j]);
    }
}
  
//   now backtrack to fill the data with zeros
  
  for (let i = data_with_holes.length - 2; i >= 0; i--) {
    
    for (let j = 0; j < mutableArray[i + 1].length; j++) {
        let found = mutableArray[i].find(element => element.state === mutableArray[i + 1][j].state && element.city === mutableArray[i + 1][j].city);
        if (found !== undefined) {
            continue;
        }

      let newCase = {...data_with_holes[i + 1][j]};
      newCase.confirmed = 0;
      mutableArray[i].push(newCase);
    }
}
  
  
-
  return mutableArray;
+
  return mutableArray.map(e=> e.sort((a,b) => +a.city_ibge_code - +b.city_ibge_code));
}