newPlot = import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.16/+esm")

The national carbon dioxide emissions can be subdivided by Local Authority. These estimates can be viewed as total carbon dioxide emissions or as carbon dioxide emissions per person living in that Local Authority. The data in these graphs are emissions that are deemed to be inside the scope of influence of Local Authorities. For access to the underlying data, please visit data.gov.uk.

wales = JSON.parse(wales_shape)
england = JSON.parse(england_shape)

// Transpose
annual_emi_t = aq.from(transpose(annual_emi))
annual_emi_per_sector_t = aq.from(transpose(annual_emi_per_sector))

// Filter the wales geoJSON - on LA (if selected) & year
wales_filtered = 
  wales.features.filter(function (feature) {
    return laLocalAuthorityChoice.includes(feature.properties.local_authority) && feature.properties.calendar_year === laYearChoice;
  });

// Filter the wales geoJSON for the "focus" LA
wales_focus = 
  wales.features.filter(function(feature) {
    return feature.properties.local_authority === laLocalAuthorityFocus;
  })

// Filter the wales geoJSON for the "focus" LA
annual_emi_filtered = annual_emi_t.filter(aq.escape((d) => laLocalAuthorityChoice.includes(d.local_authority)))

// Get and sort list of LAs
authorities = annual_emi_t.dedupe("local_authority").array("local_authority").sort()

// Range for colour axis
la_colrange = [0, Math.max(...annual_emi_filtered.array(laVarChoice))]

// Round values for labels - shift based on selected variable
map_round = laVarChoice === "ktco2" ? 1 : 10

These charts show emissions by local authority. The emission year and local authorities of interest can be selected using the slider and checkbox controls, respectively.

viewof laVarChoice = Inputs.radio(
  new Map ([["Total emissions", "ktco2"], ["Emissions per person", "ktco2_pop"]]),
  {label: "Data", value: "ktco2"}
)

viewof laYearChoice = Inputs.range(
    la_years,
    {label: "Emission Year", value: Math.max(...la_years), step: 1}
)

viewof laLocalAuthorityChoice = Inputs.checkbox(
    authorities,
    {label: "Local Authorities", value: authorities}
)

Map View

makeGeoPlot()

Bar Chart

viewof laSortValues = Inputs.toggle({label: "Sort by value", value: false})

makeBarPlot()

Emissions Time Series

viewof laLocalAuthorityFocus = Inputs.select(authorities, {label: "Local Authority"})

makeTrendPlot()

function getKeyByValue(map, searchValue) {
    for (let [key, value] of map.entries()) {
        if (value === searchValue) {
            return key;
        }
    }
    return null; // or undefined if you prefer
}

function set(input, value) {
  input.value = value;
  input.dispatchEvent(new Event("input", {bubbles: true}));
}

function makeGeoPlot() {
  return newPlot.plot({
    style: {
      fontSize: 15,
    },
    width,
    height: 700,
    marginLeft: 10,
    projection: {
        type: "mercator",
        domain: wales,
        inset: 10,
        insetLeft: 100,
        insetRight: 100,
        insetTop: 50,
        insetBottom: 50
    },
    color: {
        marginLeft: 10,
        domain: la_colrange,
        scheme: laVarChoice === "ktco2" ? "Turbo" : "Viridis",
        label: laVarChoice === "ktco2" ? "Carbon Dioixde Emissions (kt)" : "Tonnes of CO2 per person",
        legend: true
    },
    marks: [
        newPlot.frame(),
        newPlot.geo(england, { fill: "#e5e5e5", stroke: "grey" }),
        newPlot.geo(wales, { fill: "#e5e5e5", stroke: "grey" }),
        newPlot.geo(wales_filtered, {
            stroke: "grey",
            strokeOpacity: 1,
            tip: true,
            fill: (d) => d.properties[laVarChoice],
            title: (d) => `${d.properties.LAD23NM}\n${(Math.round(d.properties[laVarChoice] * 10) / 10).toString()}`
        })
    ]
  })
};

function makeBarPlot() {
  return newPlot.plot({
    width,
    height: 600,
    style: {
        fontSize: 15,
    },
    marginLeft: 200,
    marginBottom: 50,
    x: { 
      domain: la_colrange, 
      label: laVarChoice === "ktco2" ? "Carbon Dioixde Emissions (kt)" : "Tonnes of CO2 per person", 
      grid: true 
    },
    y: { label: null },
    marks: [
        newPlot.barX(
            annual_emi_filtered.filter(aq.escape((d) => d.calendar_year == laYearChoice)), {
            x: laVarChoice,
            y: "local_authority",
            fill: "#386ca4",
            sort: laSortValues ? { y: "-x" } : null
        }
        ),
        newPlot.text(
            annual_emi_filtered.filter(aq.escape((d) => d.calendar_year == laYearChoice)), {
            x: laVarChoice,
            y: "local_authority",
            text: (d) => Math.round(d[laVarChoice] * map_round) / map_round,
            textAnchor: "end",
            dx: -10,
            fill: "white"
        }
        )
    ]
})
}

function makeTrendPlot() {
  return newPlot.plot({
    width,
    height: 550,
    marginLeft: 50,
    marginBottom: 40,
    marginTop: 60,
    x: {
        tickFormat: "",
        interval: 1,
        label: "Emission Year"
    },
    y: {
        label: laVarChoice === "ktco2" ? "Carbon Dioixde Emissions (kt)" : "Tonnes of CO2 per person",
        grid: true
    },
    color: {
        legend: true,
        label: "Sector"
    },
    style: {
        fontSize: 15
    },
    marks: [
        newPlot.barY(
            annual_emi_per_sector_t.filter(aq.escape((d) => d.local_authority === laLocalAuthorityFocus)),
            {
                y: laVarChoice,
                x: "calendar_year",
                fill: "la_ghg_sector",
                channels: {
                  local_authority: {
                    value: "local_authority",
                    label: "Local Authority"
                  }
                },
                tip: {
                  format: {
                    x: (d) => d,
                    local_authority: true
                  }
                }
            },
        )
    ]
})
}