Interactive Forest Plot (Single File)

100%

Interactive Forest Plot (Single File)

✓ Published0🌍 Public

Last edited Nov 23, 2020

Created on Nov 21, 2020

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.

AI-generated description

Reiterating on the old version by using CSS color blend.

MIT Licensed

Similar vizzes

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

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

80% 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

79% 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

76% match

Loading thumbnail…

Scatter Plot for Forest Fires

This interactive scatter plot explores factors contributing to forest fires from the UCI Forest Fires dataset, letting users compare any numeric attribute against another via dropdown menus. It renders animated SVG circles whose positions, colors, and sizes represent the selected x-axis, y-axis, and color-coded attributes, with a legend. Built with D3 v5, it uses `scaleLinear` for axes and `scaleOrdinal` with `schemeCategory10` for coloring, while `transition().delay()` animates points over two seconds.

Aask4jm

70% match

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive scatter plot visualizes wildlife data, mapping animal weight, altitude, population density, and temperature. The visualization cycles through different x-axis variables every second, allowing dynamic exploration of relationships between ecological metrics. Built with D3 v6, it uses scalable vector graphics (SVG) rendering with ordinal symbol scales to distinguish habitats, while circle sizes encode age-specific differences. The code implements reusable chart functions with configurable accessors, and animates transitions by updating scales and redrawing marks. Data originates from a CSV file loaded via D3’s CSV parser, with axes and symbols rendered using D3’s scale and shape generators.

NNandini Maddula

70% match

Loading thumbnail…

Scatterplot v5 w/ React (menus, color, interactivity (hover & fade)

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that change the x and y axes. Hovering over a species in the color legend fades out points from other species, highlighting the selected category. Built with React and D3 v5, the SVG visualization uses d3.scaleLinear, d3.scaleOrdinal, and d3.csv for data loading, with custom React components for axes, marks, and interactive filtering.

SSophia Cofone

68% match