Skip to content

Commit

Permalink
🎨 present plot info in collapsible accordion element (#140)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jdhoffa
jdhoffa authored Dec 9, 2024
1 parent 0c1285c commit d24fd49
Show file tree
Hide file tree
Showing 3 changed files with 237 additions and 125 deletions.
94 changes: 59 additions & 35 deletions src/routes/company_view.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import { techexposure_company } from '../js/techexposure_company.js';
import { createErrorMessageDiv } from '../js/createErrorMessageDiv.js';
import * as d3 from 'd3';
import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
onMount(async () => {
const exposureStatsDataResponse = await fetch('data/data_exposure_stats.json');
Expand Down Expand Up @@ -417,48 +418,71 @@
<div class="plot-bubble-card-box sm:col-span-3 p-2">
<div class="plot-bubble-box sm:col-span-3 card p-8">
<div class="bubble-explanation">
<h4 class="h4">Company Exposure to Low- and High-Carbon Technologies</h4>
<p>
This chart illustrates the current and future technology exposure and future plans
for climate alignment of companies in the sector. Companies on the left have higher
exposure to high-carbon technologies, while those on the right are more aligned with
low-carbon solutions.
</p>
<br /><br />
<p>
It also compares each company's plans for expanding low-carbon technologies against
the selected climate scenario. Companies lower on the chart have smaller planned
investments in low-carbon tech, while those higher up have larger planned
expansions.
</p>
<br /><br />
<p>
The size of the dots reflects each company's influence on the portfolio’s overall
climate alignment, with larger dots representing companies with greater weight.
</p>
<br /><br />
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">Company Exposure to Low- and High-Carbon Technologies</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
This chart illustrates the current and future technology exposure and future
plans for climate alignment of companies in the sector. Companies on the left
have higher exposure to high-carbon technologies, while those on the right are
more aligned with low-carbon solutions.
<br /><br />
It also compares each company's plans for expanding low-carbon technologies against
the selected climate scenario. Companies lower on the chart have smaller planned
investments in low-carbon tech, while those higher up have larger planned expansions.
<br /><br />
The size of the dots reflects each company's influence on the portfolio’s overall
climate alignment, with larger dots representing companies with greater weight.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
</div>
<div class="bubble-plot" id="bubble-plot"></div>
</div>
</div>
<div class="plot-techmix-card-box sm:col-span-3 p-2">
<div class="plot-techmix sm:col-span-3 card p-8">
<div class="techmix-explanation">
<h4 class="h4">Future technology mix</h4>
<p>
This section presents the <strong>most significant companies</strong> in your
portfolio, based on their weight, within the <strong>Power</strong> and
<strong>Automotive</strong>
sectors. For each company, we show its future <strong>technology mix</strong>.
<br /> <br />
By understanding the <strong>technology breakdown</strong> of these key companies,
you can assess how their planned production activities contribute to the overall
<strong>climate alignment</strong>
of the portfolio. This analysis supports
<strong>transition risk management</strong>
and helps inform <strong>engagement strategies</strong> for companies that may need to
accelerate their transition to low-carbon solutions.
</p>
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">Future technology mix</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
This section presents the <strong>most significant companies</strong> in your
portfolio, based on their weight, within the <strong>Power</strong> and
<strong>Automotive</strong>
sectors. For each company, we show its future <strong>technology mix</strong>.
<br /> <br />
By understanding the <strong>technology breakdown</strong> of these key
companies, you can assess how their planned production activities contribute
to the overall
<strong>climate alignment</strong>
of the portfolio. This analysis supports
<strong>transition risk management</strong>
and helps inform <strong>engagement strategies</strong> for companies that may
need to accelerate their transition to low-carbon solutions.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
</div>
<div class="techmix-plot" id="techmix-plot"></div>
</div>
Expand Down
140 changes: 91 additions & 49 deletions src/routes/portfolio_view.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { techexposure } from '../js/techexposure';
import { tabulateIntoIncludedTable } from '../js/included_table.js';
import { createErrorMessageDiv } from '../js/createErrorMessageDiv.js';
import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
onMount(async () => {
const tableDataResponse = await fetch('data/data_included_table.json');
Expand Down Expand Up @@ -176,18 +177,31 @@
</div>
<div class="analysis-content grid sm:grid-cols-12 p-4">
<div class="analysis-table-explanation sm:col-span-12 card p-8">
<h4 class="h4">Asset classes covered by the analysis</h4>
<br />
<p>
This analysis focuses on asset classes with a direct and measurable impact on the real
economy, specifically investments in <strong>listed equities</strong> and
<strong>corporate bonds</strong> on the secondary market. These asset classes represent
the most accessible and reliable data sources for understanding portfolio alignment with
climate transition goals.
<br /> <br />
From the total market value of the portfolio, <strong>[X]%</strong> is allocated to equity
investments, and <strong>[Y]%</strong> is allocated to corporate bonds.
</p>
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">Asset classes covered by the analysis</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
This analysis focuses on asset classes with a direct and measurable impact on the
real economy, specifically investments in <strong>listed equities</strong> and
<strong>corporate bonds</strong> on the secondary market. These asset classes
represent the most accessible and reliable data sources for understanding portfolio
alignment with climate transition goals.
<br /> <br />
From the total market value of the portfolio, <strong>[X]%</strong> is allocated to
equity investments, and <strong>[Y]%</strong> is allocated to corporate bonds.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
<div class="table-box sm:col-span-12">
<div class="table table-hover" id="includedTable"></div>
</div>
Expand All @@ -196,31 +210,46 @@
<div class="analysis-pie grid sm:grid-cols-12 p-4">
<div class="analysis-pie-box sm:col-span-12 card p-8">
<div class="analysis-pies-explanation sm:col-span-12">
<h4 class="h4">
Sector Coverage by Assets Under Management and Absolute CO<sub>2</sub> Emissions
</h4>
<br />
The <strong>PACTA for Investors</strong> analysis focuses on listed equity and corporate
bond holdings in key climate-relevant sectors, including
<strong
>oil and gas, coal, automotive, power generation, cement, steel, and aviation</strong
>, and <strong>aviation</strong>. These sectors meet three criteria: they are major
contributors to global GHG emissions, have available scenario benchmarks for transition
expectations, and provide sufficient data for analysis.
<br /> <br />
Sectors like <strong>agriculture, forestry, aluminum, paper, and glass</strong>
are excluded due to limited asset-level or scenario data.
<br /><br />
While the PACTA analysis centers on sectoral alignment through production capacity, estimating
<strong>absolute CO2 emissions</strong> associated with a portfolio can provide additional
insights into the relative importance of each sector in the decarbonization of the
portfolio.
<br /><br />
The charts below provide an overview of the portfolio’s exposure to
<strong>PACTA sectors</strong>, as well as the
<strong> emissions</strong> associated with those sectors.
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">
Sector Coverage by Assets Under Management and Absolute CO<sub>2</sub> Emissions
</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
The <strong>PACTA for Investors</strong> analysis focuses on listed equity and
corporate bond holdings in key climate-relevant sectors, including
<strong
>oil and gas, coal, automotive, power generation, cement, steel, and aviation</strong
>, and <strong>aviation</strong>. These sectors meet three criteria: they are
major contributors to global GHG emissions, have available scenario benchmarks for
transition expectations, and provide sufficient data for analysis.
<br /> <br />
Sectors like <strong>agriculture, forestry, aluminum, paper, and glass</strong>
are excluded due to limited asset-level or scenario data.
<br /><br />
While the PACTA analysis centers on sectoral alignment through production capacity,
estimating
<strong>absolute CO2 emissions</strong> associated with a portfolio can provide
additional insights into the relative importance of each sector in the
decarbonization of the portfolio.
<br /><br />
The charts below provide an overview of the portfolio’s exposure to
<strong>PACTA sectors</strong>, as well as the
<strong> emissions</strong> associated with those sectors.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
</div>
<br />
<div class="analysis-pies-box grid sm:grid-cols-12 card p-4">
<div class="pie-value-bonds sm:col-span-6" id="valuePieBonds"></div>
<div class="pie-value-equity sm:col-span-6" id="valuePieEquity"></div>
Expand All @@ -241,19 +270,32 @@
<div class="analysis-exposures grid sm:grid-cols-12 p-4">
<div class="analysis-exposure-box sm:col-span-12 card p-8">
<div class="analysis-exposures-explanation sm:col-span-12">
<h4 class="h4">Exposure to climate-relevant sectors and technologies</h4>
<br />
<p>
Within each climate-relevant sector, different technologies play varying roles in the
transition to a low-carbon economy. Understanding your portfolio’s exposure to the
sector and the associated technologies is critical for assessing both <strong
>transition risks</strong
>
and <strong>investment opportunities</strong> in the context of climate change.
<br />
The following chart visualizes the portfolio's exposure to the different sectors and technologies,
compared to the relevant benchmarks.
</p>
<Accordion>
<AccordionItem>
<svelte:fragment slot="iconClosed">
<i class="fa-xl fa-solid fa-circle-xmark"></i>
</svelte:fragment>
<svelte:fragment slot="iconOpen">
<i class="fa-xl fa-solid fa-circle-info"></i>
</svelte:fragment>
<svelte:fragment slot="summary">
<h4 class="h4">Exposure to climate-relevant sectors and technologies</h4>
</svelte:fragment>
<svelte:fragment slot="content">
<p>
Within each climate-relevant sector, different technologies play varying roles in
the transition to a low-carbon economy. Understanding your portfolio’s exposure to
the sector and the associated technologies is critical for assessing both <strong
>transition risks</strong
>
and <strong>investment opportunities</strong> in the context of climate change.
<br />
The following chart visualizes the portfolio's exposure to the different sectors and
technologies, compared to the relevant benchmarks.
</p>
</svelte:fragment>
</AccordionItem>
</Accordion>
</div>
<div class="analysis-exosures-box grid sm:grid-cols-12 p-4">
<div class="exposures-bonds sm:col-span-6" id="techMixAllBonds"></div>
Expand Down
Loading

0 comments on commit d24fd49

Please sign in to comment.