Responsive Plots

100%

Responsive Plots

✓ Published0🌍 Public

Last edited Nov 14, 2024

Created on Nov 14, 2024

This example presents a collection of three interactive health-related visualizations, each exploring relationships between lifestyle factors and health outcomes. The article demonstrates how to embed multiple responsive plots within a single page, combining data on alcohol consumption, cardiovascular disease, and physical activity. Each visualization uses D3.js with interactive elements, likely incorporating dynamic filtering and tooltips to explore the data. The data is drawn from health survey datasets, with the visualizations rendered using Vega-Lite specifications embedded through iframes, as evidenced by the embedded VizHub links in the README.

AI-generated description

This is how you can use VizHub to publish an article!

Just delete all the code files except README.md.

You can use the VizHub Embed Feature to embed other vizzes in your article. For example, here's an example of embedded responsive visualizations:

How does alcohol consumption vary by education level, and how does it differ across racial or ethnic groups within each education level?

How does the combination of smoking status and cholesterol levels influence the prevalence of cardiovascular disease (CVD)?

How does physical activity level vary with depression status, and does it differ between males and females?

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork 1

This interactive health dashboard explores relationships between lifestyle factors and health metrics using multiple D3.js v7 visualizations. A scatter plot shows sleep duration versus sweet food intake with jittered points colored by gender, while a bar chart displays average heart rate by consumer type. A pie chart breaks down cholesterol levels across alcohol consumption categories, and an animated box plot filters heart rate distributions by gender with hover tooltips. The dashboard uses `d3.rollups`, `d3.groups`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.pie` with transitions for smooth updates, loading TSV data from a GitHub gist.

Bboinapallyhimaja657@gmail.com

75% match

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This visualization gallery page presents a health dashboard exploring how diet, cardiovascular health, and sleep influence each other. It uses D3.js v7 and links to multiple Tableau Public dashboards and VizHub-hosted D3 visualizations. The page displays project buttons that route to external scatter plots, line charts, and dashboards, with a bubble-chart-style backdrop. The code sets up core D3 modules via package.json and uses CSS flexbox, backdrop filters, and hover transitions to organize the gallery layout. The visualization itself is a curated collection of health-tracking charts focused on the three-way relationship between lifestyle factors.

Bboinapallyhimaja657@gmail.com

72% match

Loading thumbnail…

A3 - Visualizing Distributions using P5

This example visualizes distributions using three interactive P5.js plots: a histogram, a box plot, and a strip plot, each embedded as separate VizHub links. The histogram displays the frequency of numeric values across bins, the box plot summarizes the data’s median, quartiles, and outliers, and the strip plot shows individual data points along a single axis. The visualizations use P5.js for canvas rendering and drawing shapes, with data organized into arrays and processed for statistical summaries. The page is built with plain HTML and CSS links, referencing external VizHub projects for each plot.

DDuc Pham

72% match

Loading thumbnail…

Data Visualization Project

This example presents a gallery of visualizations, beginning with an embedded Tableau public dashboard and including multiple iframes of D3-based charts such as bar, pie, scatter, tree, and 3D bar graphs hosted on VizHub. The page also references Google Colab and Figma-embedded screenshots. Built with React, the code uses standard HTML, CSS, and JavaScript to lay out these components, with the Tableau Viz API script loading the interactive dashboard and VizHub iframes displaying the individual charts.

Aav.dj.2000@gmail.com

71% match

Loading thumbnail…

group 9 bar and scatter plot

This interactive dashboard displays health metrics through four charts: a scatter plot of sleep duration versus sweet food intake colored by age group, a bar chart of average heart rate by consumer type, a pie chart showing cholesterol levels by alcohol intake, and box plots of heart rate grouped by sleep disorder and meat intake. Built with D3 v7, the charts use d3.scaleLinear, d3.scaleBand, d3.pie, and d3.quantile, with dropdown filters and tooltips. Data loads from a TSV file via d3-fetch, and all visualizations render as SVG with animations.

Llakshmisurekhamaddukuri@my.unt.edu

71% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive visualization presents a reusable scatter plot comparing healthy lifestyle metrics from a 2021 dataset of 44 cities, including sunshine hours, pollution index, and life expectancy. Built with React and D3 v7, the chart renders as SVG and uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for gridlines. The reusable `reusableScatterPlot` function accepts configurable accessors for x and y values, labels, and tooltips, allowing multiple charts to be generated from the same dataset. A hover tooltip displays city-specific values for the selected variables.

Ssravya7136@gmail.com

71% match

Loading thumbnail…

Prototype 3, interactivity increment

This interactive boxplot visualization compares the distribution of health metrics for male and female patients, with a dropdown menu to switch between Resting BP, Cholesterol, Max HR, Age, and Oldpeak. Hovering over a boxplot dims the other group to facilitate comparison. Built with React and D3 v7, the visualization uses `scaleBand` and `scaleLinear` to compute quartiles, whiskers, and medians from the heart disease dataset. The interactivity is managed through React state for the selected metric and hovered sex, with D3 used for rendering the SVG axes and geometric elements.

AAbhi Yammanuru

70% match

Loading thumbnail…

Webpage-DV-Group7

This example is a gallery hub for seven distinct D3.js visualizations, each presented as a styled hyperlink. It shows a collection of interactive charts, including a bar chart for population data, an interactive pie chart, a side-by-side bar chart, an interactive scatter plot, an interactive line chart, an interactive heat map, and an interactive colored bar chart. The interface uses plain HTML and CSS for layout, with each link pointing to a separate VizHub project where each D3.js visualization is implemented. The gallery functions as a static navigation page, relying on external VizHub links for the actual interactive content.

LLayaMyadam@my.unt.edu

70% match