wealth.github.io/secondChart.js at master · selmetwa/wealth.github.io · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
function loadSecondChart() {
    let testData = [
        {
            name: 'Top 1%',
            percentage: 45,
            position: 'Top',
            row: '1',
            wealth: `$${360474 * .45} Billion`,
            population: 1,
        },
        {
            name: 'Bottom 99%',
            percentage: 55,
            position: 'Bottom',
            row: '1',
            wealth: `$${360474 * .55} Billion`,
            population: 99
        },
        {
            name: 'Top 5%',
            percentage: 70,
            position: 'Top',
            row: '2',
            wealth: `$${360474 * .70} Billion`,
            population: 5
        },
        {
            name: 'Bottom 95%',
            percentage: 30,
            position: 'Bottom',
            row: '2',
            wealth: `$${360474 * .30} Billion`,
            population: 95
        },
        {
            name: 'Top 10%',
            percentage: 82,
            position: 'Top',
            row: '2',
            wealth: `$${360474 * .82} Billion`,
            population: 10
        },
        {
            name: 'Bottom 90%',
            percentage: 18,
            position: 'Bottom',
            row: '2',
            wealth: `$${360474 * .18} Billion`,
            population: 90
        },
    ]
    /*
    onePercent,top,"$45"
    ninetyNinePercent,bottom,"$55"
    fivePercent,top,"$70"
    ninetyFivePercent,bottom,"$30"
    tenPercent,top,"$82"
    ninetyPercent,bottom,"$18"
    */
    let width,
    height

    if (isLaptop) {
        width = 1500
        height = 1300
    } else {
        width = 2000
        height = 2000
    }

    const svg = d3.select('#second-chart')
        .append("svg")
        .attr('height', height)
        .attr('width', width)
        .append("g")
        .attr("transform", `translate(0,0)`)

    let circles = svg.selectAll('.secondDot')
        .data(testData)
        .enter().append("circle")
        .attr('class', 'secondDot')
        .attr("r", 120)
        .attr("fill", '#CACAE3')
        .attr("stroke", '#BCBCDC')
        .attr('stroke-width', '3px')
        .attr('cx', function(d) {
            if (d.position == 'Top') {
                return 200
            } else {
                return 600
            }
        })
        .attr('cy', function(d) {
            if (d.row == '1') {
                return 200
            } else if (d.row == '2') {
                return 600
            } else {
                return 1200
            }
        })
}