fccDataVisualization/d3/addAxesToAVisualization/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
60
61
62
63
64
65
66
67
<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")
            .attr("cx", (d) => xScale(d[0]))
            .attr("cy", (d) => yScale(d[1]))
            .attr("r", (d) => 5);

        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text((d) => (d[0] + "," + d[1]))
            .attr("x", (d) => xScale(d[0] + 10))
            .attr("y", (d) => yScale(d[1]))

        const xAxis = d3.axisBottom(xScale);
        // Add your code below this line
        const yAxis = d3.axisLeft(yScale);
        // Add your code above this line

        svg.append("g")
            .attr("transform", "translate(0," + (h - padding) + ")")
            .call(xAxis);

        // Add your code below this line
        svg.append("g")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis)


      // Add your code above this line

    </script>
</body>