Skip to main content
SimilarExport ZIP
100%

Interactive Forest Plot

✓ Published1🌍 Public
WWaseem Medhat
Last edited Nov 24, 2020
Created on Nov 20, 2020

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.

AI-generated description

Reiterating on the old version by using CSS color blend.

MIT Licensed

Similar vizzes

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
93% 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
81% match
Loading thumbnail…

Forest Plot with Heterogeneity Bands

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.

WWaseem Medhat
81% match
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
79% 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
78% 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
71% 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
70% match
Loading thumbnail…

Fork of React + D3 Viz Starter

This interactive scatterplot visualizes the Iris dataset, allowing users to select which attributes to compare on the x- and y-axes via dropdown menus. The SVG rendering uses React state to manage the selected axes and a D3 ordinal color scale to distinguish the three species. Hovering over the color legend highlights points belonging to that species by reducing the opacity of others. The chart follows the margin convention and displays axis tick lines using D3 scales.

Bbart
70% match