vzcode/test/sampleDirectories/visualEditor/scatterPlot.js at main · vizhub-studio/vzcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { scaleLinear, scaleSqrt, extent } from 'd3';
import { renderMarks } from './renderMarks.js';
import { renderAxes } from './renderAxes.js';
import { renderTitle } from './renderTitle.js';

export const scatterPlot = (svg, options) => {
  const {
    data,
    dimensions: { width, height },
    margin: { left, right, top, bottom },
    xValue,
    yValue,
    sizeValue,
    pointRadiusValue,
    pointRadiusRange = [1, 30],
    sizeRange = [2, 30],
    colorScale,
    showAxis,
    scatterPlotTitle,
    fontSize,
    fontFamily,
    axisColor,
  } = options;

  const xScale = scaleLinear()
    .domain(extent(data, xValue))
    .range([left, width - right]);

  const yScale = scaleLinear()
    .domain(extent(data, yValue))
    .range([height - bottom, top]);

  const sizeScale = sizeValue
    ? scaleSqrt() // Changed from scaleLinear to scaleSqrt
        .domain(extent(data, sizeValue))
        .range(sizeRange)
    : null;

  const pointRadiusScale = pointRadiusValue
    ? scaleLinear()
        .domain(extent(data, pointRadiusValue))
        .range(pointRadiusRange)
    : null;

  renderMarks(svg, {
    ...options,
    xScale,
    yScale,
    sizeScale,
    pointRadiusScale,
    colorScale,
  });

  renderAxes(svg, {
    xScale,
    yScale,
    dimensions: { width, height },
    margin: { left, right, top, bottom },
    showAxis,
    axisColor,
  });

  renderTitle(svg, {
    title: scatterPlotTitle,
    dimensions: { width, height },
    margin: { left, right, top, bottom },
    fontSize,
    fontFamily,
  });
};