fccDataVisualization/d3/useAPreDefinedScaleToPlaceElements/solution.html at main · DreasWeiss/fccDataVisualization · 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
<body>
    <script>
        const dataset = [
            [34, 78],
            [109, 280],
            [310, 120],
            [79, 411],
            [420, 220],
            [233, 145],
            [333, 96],
            [222, 333],
            [78, 320],
            [21, 123]
        ];

        const w = 500;
        const h = 500;
        const padding = 60;

        const xScale = d3.scaleLinear()
            .domain([0, d3.max(dataset, (d) => d[0])])
            .range([padding, w - padding]);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset, (d) => d[1])])
            .range([h - padding, padding]);

        const svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            // Add your code below this line
            .attr('cx', d => xScale(d[0]))
            .attr('cy', d => yScale(d[1]))
            .attr('r', '5')


        // Add your code above this line

        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text((d) => (d[0] + ", "
                + d[1]))
            // Add your code below this line
            .attr('x', d => xScale(d[0] + 10))
            .attr('y', d => yScale(d[1]))


         // Add your code above this line
    </script>
</body>