<commit_before>import $ from 'jquery';
import * as d3 from 'd3';
import * as topojson from 'topojson';
import { TweenLite } from 'gsap';
import numeral from 'numeral';
import noUiSlider from 'no-ui-slider';
import moment from 'moment';

class BubbleMapUS {
  constructor(el, dataUrl, shapeUrl) {
    this.el = el;
    this.dataUrl = dataUrl;
    this.aspectRatio = 0.6667;
    this.margin = {top: 0, right: 0, bottom: 0, left: 0};
    this.width = $(this.el).width() - this.margin.left - this.margin.right;
    this.height = Math.ceil(this.aspectRatio * (this.width - this.margin.top - this.margin.bottom));
    this.mapWidth = this.width;
    this.shapeUrl = shapeUrl;
    this.dataColumn = 'total';
    this.totals = [
      '.bubble-map__stat--local-us',
      '.bubble-map__stat--travel-us',
      '.bubble-map__stat--total-us'
    ];
  }

  render() {
    this.svg = d3.select(this.el).append('svg')
        .attr('width', '100%')
        .attr('height', this.height)
        .attr('class', 'bubble-map__svg-us')
        .append('g');

    this.loadData();
    this.resizeBubbleMap();
    $(window).on('resize', this.resizeBubbleMap.bind(this));
  }


  resizeBubbleMap() {
    window.requestAnimationFrame(() => {
      const chart = $(this.el).find(`g`).first();

      this.width = $(this.el).width() - this.margin.left - this.margin.right;
      this.height = Math.ceil(this.aspectRatio * (this.width - this.margin.top - this.margin.bottom));

      TweenLite.set(chart, { scale: this.width / this.mapWidth });
      d3.select('.bubble-map__svg-us').attr('height', this.height);
    });
  }

  loadData() {
    d3.queue()
      .defer(d3.json, this.shapeUrl)
      .defer(d3.json, this.dataUrl)
      .await(this.drawMap.bind(this));
  }

  drawMap(error, shapeData, caseData) {
    if (error) throw error;

    this.shapeData = shapeData;
    this.caseData = caseData;
    const states = topojson.feature(this.shapeData, this.shapeData.objects['states']).features

    $('.bubble-map__stat--wrapper--us').addClass('is-animating');
    $('#section-2 .tabs').addClass('is-animating');
    $('#section-2 .slider__outer').addClass('is-animating');
    this.drawSlider();
    this.drawTooltip();
    this.totals.forEach(i => {
      this.setTotals(i);
    });

    this.projection = d3.geoAlbersUsa()
      .fitSize([this.width, this.height], topojson.feature(this.shapeData, this.shapeData.objects['states']));

    this.path = d3.geoPath()
      .projection(this.projection);

    this.svg.append('g')
        .attr('class', 'bubble-map__states')
      .selectAll('path')
        .data(states)
      .enter().append('path')
        .attr('class', 'bubble-map__state')
        .attr('d', this.path);

    this.max = this.caseData[0].stateTotalTravel;
    this.radius = d3.scaleSqrt()
        .domain([0, this.max])
        .range([0, 3.5]);

    this.svg.append('g')
        .attr('class', 'bubble-map__bubble')
      .selectAll('circle')
        .data(topojson.feature(this.shapeData, this.shapeData.objects['states']).features
          .sort((a, b) => {
            if (this.caseData[this.caseData.length - 1].states[b.id] && this.caseData[this.caseData.length - 1].states[a.id]) {
              return this.caseData[this.caseData.length - 1].states[b.id][this.dataColumn] - this.caseData[this.caseData.length - 1].states[a.id][this.dataColumn]
            }
          }))
      .enter().append('circle')
        .attr('transform', (d) => `translate(${this.path.centroid(d)})`)
        .attr('r', (d) => {
          if (this.caseData[this.unformatSlider()].states[d.id]) {
            return this.radius(this.caseData[this.unformatSlider()].states[d.id][this.dataColumn]);
          }
        })
        .on('mouseover', (d) => {
          this.mouse = d3.mouse(this.svg.node()).map((d) => parseInt(d))
          this.tooltip
            .classed('is-active', true)
            .style('left', `${this.mouse[0]}px`)
            .style('top', `${this.mouse[1]}px`)
            .html(() => {
              if (this.caseData[this.unformatSlider()].states[d.id][this.dataColumn] > 1) {
                return `${d.properties.name}: ${this.caseData[this.unformatSlider()].states[d.id][this.dataColumn]} cases`
              } else {
                return `${d.properties.name}: ${this.caseData[this.unformatSlider()].states[d.id][this.dataColumn]} case`
              }
            });
        })
        .on('mouseout', (d) => {
          this.tooltip<commit_msg>Switch US bubble map to ppm when needed<commit_after>import $ from 'jquery';
import * as d3 from 'd3';
import * as topojson from 'topojson';
import { TweenLite } from 'gsap';
import numeral from 'numeral';
import noUiSlider from 'no-ui-slider';
import moment from 'moment';

class BubbleMapUS {
  constructor(el, dataUrl, shapeUrl) {
    this.el = el;
    this.dataUrl = dataUrl;
    this.aspectRatio = 0.6667;
    this.margin = {top: 0, right: 0, bottom: 0, left: 0};
    this.width = $(this.el).width() - this.margin.left - this.margin.right;
    this.height = Math.ceil(this.aspectRatio * (this.width - this.margin.top - this.margin.bottom));
    this.mapWidth = this.width;
    this.shapeUrl = shapeUrl;
    this.dataColumn = 'total';
    this.totals = [
      '.bubble-map__stat--local-us',
      '.bubble-map__stat--travel-us',
      '.bubble-map__stat--total-us'
    ];
  }

  render() {
    this.svg = d3.select(this.el).append('svg')
        .attr('width', '100%')
        .attr('height', this.height)
        .attr('class', 'bubble-map__svg-us')
        .append('g');

    this.loadData();
    this.resizeBubbleMap();
    $(window).on('resize', this.resizeBubbleMap.bind(this));
  }


  resizeBubbleMap() {
    window.requestAnimationFrame(() => {
      const chart = $(this.el).find(`g`).first();

      this.width = $(this.el).width() - this.margin.left - this.margin.right;
      this.height = Math.ceil(this.aspectRatio * (this.width - this.margin.top - this.margin.bottom));

      TweenLite.set(chart, { scale: this.width / this.mapWidth });
      d3.select('.bubble-map__svg-us').attr('height', this.height);
    });
  }

  loadData() {
    d3.queue()
      .defer(d3.json, this.shapeUrl)
      .defer(d3.json, this.dataUrl)
      .await(this.drawMap.bind(this));
  }

  drawMap(error, shapeData, caseData) {
    if (error) throw error;

    this.shapeData = shapeData;
    this.caseData = caseData;
    const states = topojson.feature(this.shapeData, this.shapeData.objects['states']).features

    $('.bubble-map__stat--wrapper--us').addClass('is-animating');
    $('#section-2 .tabs').addClass('is-animating');
    $('#section-2 .slider__outer').addClass('is-animating');
    this.drawSlider();
    this.drawTooltip();
    this.totals.forEach(i => {
      this.setTotals(i);
    });

    this.projection = d3.geoAlbersUsa()
      .fitSize([this.width, this.height], topojson.feature(this.shapeData, this.shapeData.objects['states']));

    this.path = d3.geoPath()
      .projection(this.projection);

    this.svg.append('g')
        .attr('class', 'bubble-map__states')
      .selectAll('path')
        .data(states)
      .enter().append('path')
        .attr('class', 'bubble-map__state')
        .attr('d', this.path);

    this.max = this.caseData[0].stateTotalTravel;
    this.radius = d3.scaleSqrt()
        .domain([0, this.max])
        .range([0, 3.5]);

    this.svg.append('g')
        .attr('class', 'bubble-map__bubble')
      .selectAll('circle')
        .data(topojson.feature(this.shapeData, this.shapeData.objects['states']).features
          .sort((a, b) => {
            if (this.caseData[this.caseData.length - 1].states[b.id] && this.caseData[this.caseData.length - 1].states[a.id]) {
              return this.caseData[this.caseData.length - 1].states[b.id][this.dataColumn] - this.caseData[this.caseData.length - 1].states[a.id][this.dataColumn]
            }
          }))
      .enter().append('circle')
        .attr('transform', (d) => `translate(${this.path.centroid(d)})`)
        .attr('r', (d) => {
          if (this.caseData[this.unformatSlider()].states[d.id]) {
            return this.radius(this.caseData[this.unformatSlider()].states[d.id][this.dataColumn]);
          }
        })
        .on('mouseover', (d) => {
          this.mouse = d3.mouse(this.svg.node()).map((d) => parseInt(d))
          this.tooltip
            .classed('is-active', true)
            .style('left', `${this.mouse[0]}px`)
            .style('top', `${this.mouse[1]}px`)
            .html(() => {
              if (this.dataColumnPpm === 'perMillion') {
                if (this.caseData[this.unformatSlider()].states[d.id][this.dataColumn] > 1) {
                  return `${d.properties.name}: ${this.caseData[this.unformatSlider()].states[d.id].perMillionTotal} cases per million`
                } else {
                  return `${d.properties.name}: ${this.caseData[this.unformatSlider()].states[d.id].perMillionTotal} case per million`
                }
              } else {
                if (this.caseData[this.unformatSlider()].states[d.id][this.dataColumn] > 1) {
                  return `${d.properties.name}: ${this.caseData[this.unformatSlider()].states[d.id][this.dataColumn]} cases`
                } else {
                  return `${d.properties.name}: ${this.caseData[this.unformatSlider()].states[d.id][this.dataColumn]} case`
                }
              }
            });
        })
        .on('mouseout', (d) => {
          this.tooltip
{'fraction_non_alphanumeric': 0.18720979316167158, 'fraction_numerical': 0.007914731954411143, 'mean_word_length': 2.541479820627803, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 24, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1787723', 'n_tokens_mistral': 3224, 'n_tokens_neox': 3176, 'n_words': 458}