Skip to main content
SimilarExport ZIP
100%

Fork of Area Chart - DV - Project

✓ Published0🌍 Public
Aav.dj.2000@gmail.com
Last edited Apr 30, 2023
Created on Apr 30, 2023

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Area Chart - DV - Project

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.

HHema1430
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
81% 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…

Fork of Line Chart - Project 16

This visualization shows the relationship between glucose levels and BMI across countries, with each line representing a country's trajectory through the dataset. The chart uses a D3 line generator with curve basis to create smooth paths, scales from d3.scaleLinear for both axes, and d3.scaleOrdinal with schemeCategory10 for color encoding. Data is loaded from a CSV file using d3.csv, nested by country with d3.nest, and rendered as SVG. A custom colorLegend component displays the categorical color mapping.

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

Fork of ICE-7 Line Chart

This visualization shows the relationship between Glucose and BMI across a dataset of countries, plotting each as a single connected line graph on an SVG canvas. The code uses D3 v5 to load the CSV data and apply the `d3.line` generator, with `d3.scaleLinear` for both axes and `d3.axisLeft` and `d3.axisBottom` for tick marks. A red path traces the ordered points, while axis labels and a title are appended as SVG text elements. The line plot is rendered within a centered SVG with explicit margins and tick sizing.

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

Fork of Untitled

This bar chart displays the relationship between BMI and age group from a heart disease dataset. Each bar represents the BMI value for a specific age category, plotted along the x-axis. The chart uses D3.js v4 with SVG rendering, specifically leveraging `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The data is loaded from a CSV file using `d3.csv`, and bars are drawn as SVG rectangles with the class "bar". Axes are added using `d3.axisBottom` and `d3.axisLeft`.

Cchandanagandla
77% match
Loading thumbnail…

Fork of Pie Chart

This visualization compares BMI values against general health categories using a pie chart, with the top ten highest BMI records from a heart disease dataset. The chart renders as an SVG using D3's `pie` and `arc` generators, with each slice colored via `scaleOrdinal` and `schemeCategory10`. A legend lists health categories with corresponding values, and hovering over a slice logs its BMI to the console. Data is loaded as CSV via `d3.csv`, while the React-free interface relies on plain D3 selections and the `bundle.js` build.

Cchandanagandla
77% match
Loading thumbnail…

Fork of pavan ice6.2

This example displays a scatter plot of BMI data, plotting each individual’s weight against their height. The visualization uses red and yellow circles to differentiate between male and female data points, with labeled axes for both dimensions. The code loads CSV data from a GitHub gist using `d3.csv`, maps the parsed height and weight values through `d3.scaleLinear` and `d3.extent`, and renders circles as SVG elements. It leverages D3 v6’s `select`, `axisLeft`, and `axisBottom` APIs to generate the chart, with a fixed radius for each point and axis tick labels styled at 24 pixels.

Ppavan vasamsetti
76% match