Skip to main content
SimilarExport ZIP
100%

Forest Plot with Heterogeneity Bands

✓ Published2🌍 Public
WWaseem Medhat
Last edited Dec 10, 2020
Created on Nov 28, 2020
Forked from HTML Starter

This forest plot visualizes the results of a meta-analysis comparing intensive antihypertensive therapy to standard care, with heterogeneity bands shaded behind each study’s confidence interval to highlight variability. Built with D3 v6 and rendered as an SVG, the chart uses a logarithmic x-axis for odds ratios and a point scale for study IDs. The code employs `d3.scaleLog`, `d3.scalePoint`, and `d3.scaleLinear` to map data, with rectangles and lines drawn from a JSON metadata source.

AI-generated description

Heterogeneity bands augment classic forest plots to provide a better visualization of heterogeneity between studies.

This project was submitted to the Wonderful Wednesdays challenge hosted by PSI and reviewed by statisticians in the organization.

Links:

MIT Licensed

Similar vizzes

Loading thumbnail…

Forest Plot with Heterogeneity Bands

This forest plot visualizes a meta-analysis comparing intensive antihypertensive therapy to standard care, showing odds ratios and confidence intervals for each study. Translucent heterogeneity bands behind the study markers reveal the range of effects across trials, with square marker size scaled by sample size. The visualization loads data from a JSON file and renders it as SVG using D3 v6, employing logarithmic scaling for odds ratios and d3.scalePoint for study positioning.

Sshaunstoltz
95% match
Loading thumbnail…

Forest Plot with Heterogeneity Bands

A forest plot displays odds ratios and 95% confidence intervals for individual studies, with an overall pooled estimate, comparing intensive antihypertensive therapy to standard care. Translucent teal heterogeneity bands overlay the plot, extending across the full chart height for each study’s confidence interval to visualize between-study variability. The code uses D3 v6 with SVG rendering, a log scale for the x-axis, and data loaded from a remote JSON file. Study-level points are sized by sample size using a linear scale.

MMaxene Graze
93% match
Loading thumbnail…

Interactive Forest Plot

This interactive forest plot visualizes study-level and pooled odds ratios from a meta-analysis, with logarithmic scaling and heterogeneity bands reflecting study weights. React manages the component hierarchy, while D3 scales (scaleLog, scalePoint) drive SVG positioning and sizing. Hover cards reveal hidden overlays, and pooled summaries appear as diamonds. The dataset loads from a JSON URL via d3.json, and the chart uses CSS mix-blend-mode for band transparency.

WWaseem Medhat
81% match
Loading thumbnail…

Interactive Forest Plot (Single File)

This interactive forest plot displays study-level effect sizes and pooled summaries from a metadata JSON file, using a logarithmic odds-ratio scale. Built with React hooks and D3 v6, the visualization renders SVG marks including heterogeneity bands, square markers sized by study weight, and polygons for pooled estimates. Hover cards on each study row use CSS opacity transitions, while d3.scaleLog, d3.scalePoint, and d3.scaleLinear manage spatial encodings. The chart loads external data via d3.json and updates state asynchronously.

WWaseem Medhat
79% match
Loading thumbnail…

Heterogeneity Bands

This visualization displays heterogeneity bands for clinical study data, where overlapping translucent rectangles show the distribution of odds ratios across multiple studies. Each study is represented by a horizontal line positioned along a point scale, with the band width reflecting the confidence interval between lower and upper odds ratio bounds. The code uses d3.json to fetch external metadata, then applies d3.scaleLinear for the x-axis and d3.scalePoint for study positioning. Rectangles are stacked with opacity set to 1 divided by the total data length, creating darker regions where more studies overlap, while lighter lines highlight individual study ranges.

WWaseem Medhat
77% match
Loading thumbnail…

Heterogeneity Bands

This visualization displays heterogeneity bands as overlapping red rectangles across a horizontal log-odds scale, with gray reference lines positioned per study ID. The code fetches JSON metadata from a GitHub gist and uses d3.json, d3.scaleLinear, and d3.scaleBand to map study identifiers to the vertical axis and odds-ratio confidence intervals to the horizontal axis. Each rectangle spans from OR_lo to OR_hi with a constant height and 0.5 opacity, producing overlapping bands. The SVG rendering uses d3.select to append the chart elements, with the x-scale driven by the minimum and maximum odds-ratio values across the dataset.

NNita
76% match
Loading thumbnail…

Forest Plot

This forest plot visualizes odds ratios with confidence intervals, displaying effect sizes from PCSK9 data across categorical groups including quartiles and a reference category. The React-based example uses D3 v6’s `scaleLinear`, `axisBottom`, and selection methods to render SVG elements. Each row shows a marker square positioned by the effect value, with horizontal lines spanning confidence bounds, and a reference line. The code computes the scale from data extents and supports SD-based intervals.

MMthandazo Ndhlovu
76% match
Loading thumbnail…

Heterogeneity Bands

This visualization displays heterogeneity bands for study data, with each study represented by a horizontal line and a semi-transparent red rectangle spanning its confidence interval range. The x-axis uses a linear scale mapping odds ratio bounds from low to high, while the y-axis employs a d3.scaleBand to distribute studies vertically. Data loads asynchronously from a JSON file via d3.json, and the SVG rendering appends rectangles and lines positioned by xScale and yScale. Overlapping bands with 0.5 opacity reveal density patterns across studies.

NNita
75% match