fccDataVisualization/d3/useDynamicScales/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
<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;

        // Padding between the SVG boundary and the plot
        const padding = 30;

        // Create an x and y scale

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

        // Add your code below this line

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


        // Add your code above this line

        const output = yScale(411); // Returns 30
        d3.select("body")
            .append("h2")
            .text(output)
    </script>
</body>