sust_hackathon_2024/script.js at main · recursiveai/sust_hackathon_2024 · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import * as d3 from 'd3';

export function parseData(data) {
    const dataset = [];
    try {
        Object.keys(data).forEach((year) => {
            const obj = { year };
            Object.entries(data[year]).forEach(([key, value]) => {
                obj[key] = value;
            });
            dataset.push(obj);
        });
        return dataset;
    } catch ({ name, message }) {
        const text = `There was an error parsing the data: ${name}, ${message}`;
        throw new Error(text);
    }
}

d3.json('data/forest.json')
    .then((data) => {
        // Set up SVG container and dimensions
        const margin = { top: 20, right: 60, bottom: 50, left: 60 };
        const width = 960 - margin.left - margin.right;
        const height = 500 - margin.top - margin.bottom;
        const svg = d3
            .select('#chart')
            .append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', `translate(${margin.left}, ${margin.top})`);

        // Convert the data to an array of objects and prepare for stacking
        const dataset = parseData(data);

        // Process data for stacking
        const keys = Object.keys(dataset[0]).filter((key) => key !== 'year');
        const stack = d3.stack().keys(keys);
        const stackedData = stack(dataset);

        // Define scales and axes
        const xScale = d3
            .scaleBand()
            .domain(dataset.map((d) => d.year))
            .range([0, width])
            .padding(0.1);
        const yScale = d3
            .scaleLinear()
            .domain([0, d3.max(dataset, (d) => d3.sum(keys, (k) => d[k]))])
            .nice()
            .range([height, 0]);
        const color = d3.scaleOrdinal(d3.schemeCategory10);

        // Create axes
        const xAxis = d3.axisBottom(xScale);
        const yAxis = d3.axisLeft(yScale);
        svg.append('g')
            .attr('transform', `translate(0, ${height})`)
            .call(xAxis);
        svg.append('g').call(yAxis);

        // Create stacked bars with padding
        const barPadding = 1; // Small padding between rectangles
        const bars = svg
            .append('g')
            .selectAll('g')
            .data(stackedData)
            .enter()
            .append('g')
            .attr('fill', (d) => color(d.key))
            .selectAll('rect')
            .data((d) => d)
            .enter()
            .append('rect')
            .attr('x', (d) => xScale(d.data.year))
            .attr('y', (d) => yScale(d[1]))
            .attr('height', (d) => yScale(d[0]) - yScale(d[1]))
            .attr('width', xScale.bandwidth())
            .attr('stroke', '#fff') // White border
            .attr('stroke-width', 0.5) // Border width
            .attr('shape-rendering', 'crispEdges');

        // Add interactivity with tooltips and highlighting
        const tooltip = d3
            .select('body')
            .append('div')
            .attr('class', 'tooltip')
            .style('position', 'absolute')
            .style('visibility', 'hidden')
            .style('background', '#fff')
            .style('border', '1px solid #000')
            .style('padding', '5px');

        bars.on('mouseover', function (e, d) {
            d3.select(this).attr('fill', (d) =>
                d3
                    .color(color(d3.select(this.parentNode).datum().key))
                    .brighter(1)
            ); // Highlight by making the color brighter
            tooltip
                .html(
                    `Year: ${d.data.year}<br>${
                        d3.select(this.parentNode).datum().key
                    }: ${d[1] - d[0]}`
                )
                .style('visibility', 'visible');
        })
            .on('mousemove', function (e) {
                tooltip
                    .style('top', e.pageY - 10 + 'px')
                    .style('left', e.pageX + 10 + 'px');
            })
            .on('mouseout', function () {
                d3.select(this).attr('fill', (d) =>
                    color(d3.select(this.parentNode).datum().key)
                ); // Revert to original color
                tooltip.style('visibility', 'hidden');
            });
    })
    .catch((err) => {
        console.error(`There was an error in getting the data: ${err}`);
    });