<commit_before>import React from 'react';
import * as d3 from 'd3';
import ReactFauxDOM from 'react-faux-dom';
import { injectIntl } from 'react-intl';

const DEFAULT_WIDTH = 530;
const DEFAULT_MAX_BUBBLE_RADIUS = 70;
const DEFAULT_HEIGHT = 200;

class BubbleChart extends React.Component {

  render() {
    const { data, width, height, maxBubbleRadius } = this.props;
    const { formatNumber } = this.props.intl;
    const options = {
      width,
      height,
      maxBubbleRadius,
    };
    if (width !== null) {
      options.width = DEFAULT_WIDTH;
    }
    if (height !== null) {
      options.height = DEFAULT_HEIGHT;
    }
    if (maxBubbleRadius !== null) {
      options.maxBubbleRadius = DEFAULT_MAX_BUBBLE_RADIUS;
    }

    // prep the data and some config
    const maxValue = d3.max(data.map(d => d.value));
    const radius = d3.scaleLinear().domain([0, maxValue]).range([0, options.maxBubbleRadius]);
    const bubbleData = data.map(d => ({ ...d, r: radius(d.value) }));
    // start the packing
    const circles = d3.packSiblings(bubbleData);

    // render it all
    const node = ReactFauxDOM.createElement('svg');
    const svg = d3.select(node)
      .attr('width', options.width)
      .attr('height', options.height)
      .attr('class', 'bubble-chart');
    const bubbles = svg.append('g')
      .attr('transform', `translate(${options.width / 2},${options.height / 2})`)
      .selectAll('.bubble')
      .data(circles)
      .enter();
    // create the bubbles
    bubbles.append('circle')
      .attr('r', d => d.r)<commit_msg>size by sqrt so value maps to area, not radius (fixes #63)<commit_after>import React from 'react';
import * as d3 from 'd3';
import ReactFauxDOM from 'react-faux-dom';
import { injectIntl } from 'react-intl';

const DEFAULT_WIDTH = 530;
const DEFAULT_MAX_BUBBLE_RADIUS = 70;
const DEFAULT_HEIGHT = 200;

/**
 * Draw a bubble chart with labels.  Values are mapped to area, not radius.
 */
class BubbleChart extends React.Component {

  render() {
    const { data, width, height, maxBubbleRadius } = this.props;
    const { formatNumber } = this.props.intl;
    const options = {
      width,
      height,
      maxBubbleRadius,
    };
    if (width !== null) {
      options.width = DEFAULT_WIDTH;
    }
    if (height !== null) {
      options.height = DEFAULT_HEIGHT;
    }
    if (maxBubbleRadius !== null) {
      options.maxBubbleRadius = DEFAULT_MAX_BUBBLE_RADIUS;
    }

    // prep the data and some config (scale by sqrt of value so we map to area, not radius)
    const maxValue = d3.max(data.map(d => d.value));
    const radius = d3.scaleSqrt().domain([0, maxValue]).range([0, options.maxBubbleRadius]);
    const bubbleData = data.map(d => ({ ...d, r: radius(d.value) }));
    // start the packing
    const circles = d3.packSiblings(bubbleData);

    // render it all
    const node = ReactFauxDOM.createElement('svg');
    const svg = d3.select(node)
      .attr('width', options.width)
      .attr('height', options.height)
      .attr('class', 'bubble-chart');
    const bubbles = svg.append('g')
      .attr('transform', `translate(${options.width / 2},${options.height / 2})`)
      .selectAll('.bubble')
      .data(circles)
      .enter();
    // create the bubbles
    bubbles.append('circle')
      .attr('r', d => d.r)
{'fraction_non_alphanumeric': 0.14588377723970944, 'fraction_numerical': 0.011501210653753027, 'mean_word_length': 2.9392133492252683, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, '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': '2116619', 'n_tokens_mistral': 1107, 'n_tokens_neox': 1069, 'n_words': 273}