Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vega Charts (new Charting Library) #295

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Conversation

amartyanambiar
Copy link
Collaborator

@amartyanambiar amartyanambiar commented Aug 9, 2023

@mberacochea @SandyRogers

This PR deals with code incorporating VegaLite for creating Visualisations on the EBI website. It is proposed that VegaLite will replace Highcharts.js on the website as the charting library.

Vega-Lite is a high-level grammar of interactive graphics. It provides a concise, declarative JSON syntax to create an expressive range of visualisations for data analysis.


The Visualisations that have been successfully generated using Vega are :

Name Visualisation Type Component used (File)
Number of Sequence Reads per QC step Horizontal Bar Chart (uses tsx preprocessed data) QCChart.tsx
Reads Length Histogram Area Chart + Std Deviation band QC-chart-components/VConcatTop.tsx
Reads GC Distribution Area Chart + Std Deviation band QC-chart-components/VConcatTop.tsx
Reads Length (Min, Avg, Max) Horizontal Bar Chart QC-chart-components/VConcatBottom.tsx
Reads GC-AT Content (%) Horizontal Stacked Bar Chart QC-chart-components/VConcatBottom.tsx
Nucleotide Position Histogram Stacked Area Chart NucleotidesHistogram.tsx
Interpro Sequence feature summary Horizontal Bar Chart InterproBar.tsx
GO Terms Concatenated Horizontal Bar Chart GOBar.tsx
Domain + Phylum Composition Multi-Colour Bar Chart TaxBar.tsx
Pfam Vertical Bar Chart VerticalBar.tsx
KO Vertical Bar Chart VerticalBar.tsx
KEGG Module categories Vertical Bar Chart VerticalBar.tsx
antiSMASH gene clusters Vertical Bar Chart VerticalBar.tsx
COG Analysis Vertical Bar Chart VerticalBar.tsx
KEGG Class Analysis Vertical Bar Chart VerticalBar.tsx
KEGG Module Analysis Vertical Bar Chart VerticalBar.tsx

  • All charts use Vega to pre-process data except Interpro Sequence feature summary (for label - Contigs/Reads), Number of Sequence Reads per QC step and Taxonomical Analysis - Domain + Phylum (keeping in mind how the hover capability of highcharts + table would use preprocessed data) charts which use pre-processed data for reasons such as complex transformations that would be difficult to implement in VegaLite.

Comment on lines +26 to +36
// Sort the data in descending order based on the series values
const sortedData = series
.map((value, index) => ({
category: categories[index],
value,
}))
.sort((a, b) => b.value - a.value); // Sort in descending order

const sortedCategories = sortedData.map((data) => data.category);
const sortedSeries = sortedData.map((data) => data.value);

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not part of Vega.

Sorted the data for Highchart.js GO Bar Viz.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant