Skip to main content
SimilarExport ZIP
100%

Activity 7.1 - Q2

✓ Published0🌍 Public
Ppnamitha46@gmail.com
Last edited Nov 5, 2024
Created on Nov 5, 2024
Forked from Hello VizHub

This example visualizes the relationship between age and BMI, using an interactive line chart with a green gradient area fill to show the trend and a hover effect to display detailed data points. It loads data from a GitHub-hosted CSV file and uses D3's scales, area generator, and bisector to map the data, while the tooltip and hover interactions are driven by D3's pointer event handling. The visualization is rendered as an SVG with a clean layout, axis labels, and gridlines.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity-7 q2

This interactive visualization charts BMI against age, using a soft pink-to-salmon gradient area chart to show trends. A hover overlay reveals precise Age, BMI, and a high/normal category label for each data point. Built with D3.js (v7.8.5) via CDN, it employs `d3.scaleLinear`, `d3.area`, `d3.axisBottom`, and `d3.axisLeft` for rendering, while a tooltip and vertical guide line respond to mouse movement. Data originates from a remote CSV file fetched with `d3.csv`.

Aamulyareddykondru01@gmail.com
90% match
Loading thumbnail…

Activity_7_Q2

This visualization displays BMI distribution across age groups using a smooth area chart with interactive hover effects. The D3.js code loads CSV data, processes BMI values into High and Normal categories, and renders an SVG with gradient-filled areas. Users can hover to see a dashed line, circular marker, and tooltip showing age, BMI, and category. The implementation uses d3.area, d3.scaleLinear, d3.bisector, and d3.axisBottom/axisLeft for the chart structure.

GGOPI MUPPURI
90% match
Loading thumbnail…

Activity7_q2

This visualization displays BMI values across age groups using a smooth gradient-filled area chart. It loads data from a CSV file via d3.csv and maps BMI categories as either High or Normal based on a threshold of 25. The chart includes interactive hover effects using the bisector method, displaying tooltips with age, BMI, and category details. Gridlines and axis labels are generated using d3.axisBottom and d3.axisLeft, while the responsive hover line and marker are rendered with SVG elements.

Mm.maanvireddt761@gmail.com
89% match
Loading thumbnail…

Fork of Activity_7_Q2

This visualization displays the relationship between age and BMI, using a gradient-filled area chart with interactive hover effects. It highlights data points categorized as "High" or "Normal" BMI, and the hover interaction reveals a tooltip with age, BMI, and category details. Built with D3.js (v7.8.5), the code fetches a CSV from a GitHub gist and uses scales, axes, gridlines, and a Catmull-Rom curve for smoothing. An invisible overlay rectangle enables mouse tracking, which drives the tooltip, a dashed hover line, and a marker circle.

GGOPI MUPPURI
89% match
Loading thumbnail…

activity 7 , question 2

This interactive scatterplot shows the relationship between age and BMI, with a gradient-filled area chart highlighting BMI trends and a dashed hover line tracking values across the x-axis. The visualization includes a tooltip that displays the exact age, BMI, and category (High or Normal) for the nearest data point, using a bisector to locate the closest value. Built with D3 v7, it loads CSV data and renders SVG elements, incorporating vertical gridlines, labeled axes, and smooth curve interpolation via the `curveCatmullRom` generator. Hover interactions are managed through mouse events that update the tooltip position and visibility.

Hharsha13638@gmail.com
87% match
Loading thumbnail…

Activity7(q-2)

This interactive scatterplot displays the relationship between age and BMI from a diabetes dataset. The visualization uses a gradient-filled area chart with smooth Catmull-Rom curves to show BMI distribution across age groups, with a tooltip that appears on hover. Built with D3.js, it employs a bisector for efficient data lookup, linear scales, and responsive hover elements including a dashed line and marker. The SVG rendering includes gridlines, axis labels, and a color-coded BMI category indicator that distinguishes between normal and high values.

Rrakshithareddy217@gmail.com
87% match
Loading thumbnail…

Activity7_Q2

This visualization displays the distribution of BMI values across age groups from a diabetes dataset, distinguishing between normal and high BMI categories. The interactive chart uses D3.js to render a blue gradient area plot with smooth Catmull-Rom curves, complemented by gridlines and labeled axes. As users move their cursor across the chart, a dashed hover line, circular marker, and tooltip dynamically appear to reveal the exact age, BMI value, and category of the nearest data point. The data is loaded remotely via d3.csv and processed with d3.bisector for efficient mouse position lookups.

Kkeerthana11.mcs@gmail.com
86% match
Loading thumbnail…

Activity 7.1.2

This area chart visualizes the relationship between age and weight, plotting individual data points as a filled pink area. The visualization loads a CSV file from GitHub and sorts the data by age. It uses D3.js v7 with `d3.csvParse` and `d3.extent` for scale domains, then draws the area with the `d3.area` generator. The SVG includes labeled axes for age and weight, plus a title.

Ttejaswiteju9811@gmail.com
83% match