src/bubble.ts

   1/**

   2 * # Bubble Plot

   3 */

   4

   5import { log as gLog }      from 'hsutil';   const log = gLog('d3.bubble');

   6import * as d3              from "d3";

   7import { Data, DataRow }    from 'hsdatab';

   8import { NumDomain }        from 'hsdatab';

   9import { PlotCfg }          from './ConfigTypes';

  10import { PlotFnDef }        from './ConfigTypes';

  11

  12const DEF_RADIUS:number = 5;

  13

  14/**

  15 * bubble chart: 

  16 * @param data a {@link hsDatab:Data `Data`} object containing the 

  17 * @param cx string column name for x-center coordinates

  18 * @param cy string column name for y-center coordinates

  19 * @param r  string column name for radius coordinates

  20 */

  21export const bubble:PlotFnDef = (data:Data, desc: PlotCfg, cx:string, cy:string, r?:string) => {

  22    const ix = data.colNumber(cx);

  23    const iy = data.colNumber(cy);

  24    const ir = data.colNumber(r);

  25    const scaleX = desc.cfg.scales.hor.scale;

  26    const scaleY = desc.cfg.scales.ver.scale;

  27    const defR = desc.cfg.defaults.Scales(r);

  28    const scaleR = d3.scaleLinear().domain(data.findDomain(r)).range([defR.range.min, defR.range.max]);

  29    const svg = desc.cfg.baseSVG;

  30    const circles = svg.selectAll("circle").data(data.getData());

  31        

  32    circles.exit().remove();            // remove unneeded circles

  33    circles.enter().append('circle');   // add new circles

  34    

  35    circles.transition().duration(1000)

  36        .attr("cx", d => scaleX(d[ix]))

  37        .attr("cy", d => scaleY(d[iy]))

  38        .attr("r",  d => scaleR(ir===undefined? DEF_RADIUS : d[ir]))

  39        .attr('fill', (d,i) => ['#f00''#0f0''#00f''#ff0''#f0f''#0ff'][i])

  40        ;        

  41};

  42

  43