d3_js_scatter_plot/scatterPlot.js at master · TehranMammadov01/d3_js_scatter_plot · 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
71
72
73
74
75
76
77
78
79
80
81
82
83
const scatterPlot = () => {
    let width;
    let height;
    let data;
    let xValue;
    let yValue;
    let margin;
    let size;
    let symbolValue;

    const my = (selection) => {
        const x = d3.scaleLinear()
            .domain(d3.extent(data, xValue))
            .range([margin.left, width - margin.right]);

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

        const symbolScale = d3.scaleOrdinal()
            .domain(data.map(symbolValue))
            .range(d3.symbols);

        const symbolGenerator = d3.symbol();

        const marks = data.map(d => ({
            x: x(xValue(d)),
            y: y(yValue(d)),
            pathD: symbolGenerator.type(symbolScale(symbolValue(d)))(),
            title: `(${xValue(d)}, ${yValue(d)})`
        }))

        selection
            .selectAll('path')
            .data(marks)
            .join('path')
            .attr('d', (d) => d.pathD)
            .attr('transform', (d) => `translate(${d.x}, ${d.y})`)
            .append('title')
            .text((d) => d.title)
        selection
            .selectAll('g.y-axis')
            .data([null])
            .join('g')
            .attr('class', 'y-axis')
            .attr('transform', `translate(${margin.left}, 0)`)
            .call(d3.axisLeft(y))
        selection
            .selectAll('g.x-axis')
            .data([null])
            .join('g')
            .attr('class', 'x-axis')
            .attr('transform', `translate(0, ${height - margin.bottom})`)
            .call(d3.axisBottom(x))
    }

    my.width = function (_) {
        return arguments.length ? ((width = +_), my) : width;
    }
    my.height = function (_) {
        return arguments.length ? ((height = +_), my) : height;
    }
    my.data = function (_) {
        return arguments.length ? ((data = _), my) : data;
    }
    my.xValue = function (_) {
        return arguments.length ? ((xValue = _), my) : xValue;
    }
    my.yValue = function (_) {
        return arguments.length ? ((yValue = _), my) : yValue;
    }
    my.margin = function (_) {
        return arguments.length ? ((margin = _), my) : margin;
    }
    my.size = function (_) {
        return arguments.length ? ((size = _), my) : size;
    }
    my.symbolValue = function (_) {
        return arguments.length ? ((symbolValue = _), my) : symbolValue;
    }

    return my;
}