Skip to main content
SimilarExport ZIP
100%

Area Chart - DV - Project

✓ Published1🌍 Public
HHema1430
Last edited Apr 30, 2023
Created on Apr 30, 2023
Forked from Area Chart

This is an area chart built with React and D3 v5, visualizing the relationship between BMI and Blood Pressure from a CSV dataset of diabetic patients. The chart uses D3's `scaleTime` and `scaleLinear` for axes, and `line` and `area` generators with a basis curve to draw a smooth line and a green filled region beneath it. Axis labels and tick lines are styled via CSS, and the SVG is updated dynamically after parsing the data with `csv`. The chart shows how blood pressure varies with BMI, highlighting a trend across the data points.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Area Chart - DV - Project

This visualization shows the relationship between BMI and average blood pressure across many countries, with data points smoothed into a single line and area chart. The implementation uses D3 version 5 within a React application, leveraging `scaleLinear`, `line()`, `area()`, and `curveBasis` to construct the SVG paths. The chart renders from a CSV file containing health metrics, with axes labeled and styled. The line and area are drawn as black and light green SVG paths, respectively, with a vertical axis showing average blood pressure and a horizontal axis for BMI.

Aav.dj.2000@gmail.com
91% match
Loading thumbnail…

Line Chart - Project 16

This line chart shows the relationship between BMI and average blood pressure for diabetes patients, with each line representing a distinct district and colored using an ordinal scale. The visualization uses d3.line with curveBasis for smooth path rendering, d3.scaleLinear for both axes, and d3.nest to group data by district. A custom colorLegend component displays the district categories, while axis labels and a title provide context. Data comes from a CSV file hosted on GitHub, and the chart is rendered as SVG using d3.v5.

Ggayuvurukuti@gmail.com
84% match
Loading thumbnail…

AREA PLOT pca

This area chart visualizes BMI values for individuals, with each point color-coded and interactive. The chart uses D3.js v7 to fetch and parse CSV data from a GitHub gist, then renders an SVG area path and circles representing BMI readings. Users can hover over any data point to see a tooltip with the precise BMI value, which also changes the dot’s color and size. The visualization includes labeled axes for Individuals and BMI, with a light green fill for the area and responsive hover effects.

CChaturyaAkhilaPallem@my.unt.edu
81% match
Loading thumbnail…

Project

This scatter plot visualizes the relationship between BMI and heart disease status, using data loaded from a CSV file hosted on GitHub. The x-axis maps BMI values, while the y-axis encodes heart disease presence as a binary 0 or 1, with semi-transparent blue circles showing individual data points. Built with React and D3 v6, the code uses `d3.csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG chart across the full browser window, with custom margins and axis labels.

Sshreyasribearelly@gmail.com
80% match
Loading thumbnail…

HeartDisease

This example visualizes the relationship between SleepTime and BMI using a scatter plot, where each point represents an individual, colored red or green based on HeartDisease status. The x-axis maps BMI and the y-axis maps SleepTime, with point sizes varying according to PhysicalHealth and MentalHealth values. It loads CSV data via d3.csv, scales the axes with d3.scaleLinear, renders circles in SVG, and uses d3.axisBottom and d3.axisLeft for the axes. The chart’s margins and dimensions adapt to the browser window.

Cchandanagandla
77% match
Loading thumbnail…

3D Scatter Plot with Diabeties Dataset

This 3D scatter plot visualizes the Diabetes dataset, showing the relationship between Glucose, BMI, and BloodPressure as marker positions along three axes. The example uses two overlapping scatter3d traces to create a two-layer point effect with a semi-transparent outer layer and a solid inner core. The data is loaded from a CSV file using d3.csv, and the interactive plot is rendered in a styled HTML container via Plotly's newPlot function. Axes are explicitly labeled with their corresponding variable names, and the chart uses a high opacity with a subtle border line for each marker.

PPriyaEnuganti
77% match
Loading thumbnail…

Area chart

This area chart displays the relationship between age and weight, using a dataset loaded from a raw CSV file hosted on GitHub. The data is parsed, sorted by age, and rendered as a filled area plot within an SVG canvas. The visualization is built with D3.js v7, employing `d3.text` to fetch the data, `d3.scaleLinear` for axis scaling, `d3.area` to generate the area path, and `d3.axisBottom` and `d3.axisLeft` for labeled axes, with a steelblue fill and a clear title.

JJagadeshwar Reddy. Chilakamarri
77% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot displays the diabetes dataset, mapping glucose, BMI, age, and blood pressure attributes to axes. The visualization cycles through different x-axis metrics every two seconds using `setInterval`, while keeping BMI fixed on the y-axis. Built with d3.v6, the chart uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with `selection.join` to bind circles to data points. The D3 module pattern via `scatterPlot()` enables configurable width, height, margins, and radius, rendering as animated SVG with steelblue circles on a light gray background.

Vvedasrivarma13@gmail.com
76% match