Green House Labs

Charting Oahu Trees

Showcase of a minimal charting library using the Exceptional Trees On Oahu dataset

Dataset

After cleaning the data 1, the Oahu Tree dataset had 275 data points, all of which were charted below. Some of the data was given as ranges of values. In these cases the arithmetic mean of the values was used.

Vertical bar/column charts

Tree heights
Tree heights in meters (m). Sorted in descending order.

Tree diameters
Tree diameters in centimeters (cm). Sorted in descending order.

Code used for the charts

function parseValue(val) {
    try {
        if (val.includes("-")) {
            const [min, max] = val.split("-").map(Number);
            return (min + max) / 2;
        }
        return Number(val);
    } catch {
        return null;
    }
}

function cleanData(arr) {
    return arr
        .map(([a, b]) => [parseValue(a), parseValue(b)])
        .filter(([a, b]) => typeof a === 'number' && typeof b === 'number')
        .filter(([a, b]) => !Number.isNaN(a) && !Number.isNaN(b));
}

function convertUnits(arr) {
    return arr.map(([feet, inches]) => [
        parseFloat((feet * 0.3048).toFixed(2)),
        parseFloat((inches * 2.54).toFixed(2)),
    ]);
}

const treesJson = await(await fetch('trees.json')).json()
const treesData = treesJson.data
const zippedHeightsDiametersImperial = treesData.map(
    entry => [entry[14], entry[15]]
)

const cleaned = cleanData(zippedHeightsDiametersImperial);
const zippedHeightsDiametersMetric = convertUnits(cleaned);

const heights = zippedHeightsDiametersMetric.map(
    entry => entry[0]
)

const diameters = zippedHeightsDiametersMetric.map(
    entry => entry[1]
)

const treeHeightChart = document.getElementById('js-heights-chart')
const heightsSorted = heights.sort((a, b) => b - a)
treeHeightChart.yRangeMax = heightsSorted[0]
treeHeightChart.dataSeries = heightsSorted
treeHeightChart.render()

const treeDiameterChart = document.getElementById('js-diameter-chart')
const diametersSorted = diameters.sort((a, b) => b - a)
treeDiameterChart.yRangeMax = diametersSorted[0]
treeDiameterChart.dataSeries = diametersSorted
treeDiameterChart.render()