Nivesh Syreddy Reusable D3 Scatter Plot

100%

Nivesh Syreddy Reusable D3 Scatter Plot

• Draft1🔗 Unlisted

Last edited Apr 1, 2025

Created on Mar 31, 2025

This animated scatter plot visualizes medical insurance charges against patient age and BMI, with points colored by smoking status using a categorical color scale. Built with D3 v6, it uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and a reusable chart function with setter methods. The chart redraws every three seconds, alternating its x-axis between age and BMI, while the y-axis remains fixed on charges. Data comes from a CSV hosted on GitHub Gist, and the rendering uses SVG circles with opacity and transitions between axis configurations.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable scatter plot

This reusable D3 scatter plot visualizes the insurance dataset, mapping age on the x-axis and cycling through BMI, charges, and children values on the y-axis every two seconds. It uses SVG rendering with animated transitions to swap the y-axis label and rescale the data points. The plot differentiates data points by smoker status using distinct symbols and colors from D3's `schemeCategory10` scale, and is built with reusable accessors for width, height, data, and margins.

Kkotlavamsireddy@gmail.com

87% match

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 v6 scatter plot visualizes insurance data, mapping BMI and charges via the extensible `scatterPlot()` chart factory. The SVG rendering initially plots petal width against sepal length, then cycles through four data columns every two seconds, animating the axis scales and circles with `setInterval`. The chart employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while the getter-setter pattern supports dynamic updates. Data loads as CSV from a remote gist, with custom labels added for the x- and y-axes.

Ssrivalliwuyyuru

84% match

Loading thumbnail…

Iterated Medical Insurance Cost Scatterplot

This chart visualizes medical insurance costs by plotting age against charges for individual patients. Each point is colored by smoking status, with red circles representing smokers and green representing non-smokers, making the higher charges associated with smoking immediately apparent. The visualization is built with a React component using D3 v7's `scaleLinear`, `axisBottom`, `axisLeft`, and `select` to render an SVG scatterplot. Data is loaded asynchronously from a CSV file using D3's `csv` method.

Jjojongo15342@gmail.com

83% match

Loading thumbnail…

ICE-6 Scatter Plot

This D3.js scatter plot visualizes an insurance dataset, mapping BMI to charges for individual patients. Points are colored red for smokers and green for non-smokers, using a custom `scaleLinear` mapping for the axes. The visualization employs `csv` for data loading, `select` and `join` for SVG circle rendering, and `axisLeft`/`axisBottom` for labeled axes, with all text styled in cursive. The plot includes age and children values as `rx` and `ry` attributes on the circles, though these do not affect the visual output.

Ggayuvurukuti@gmail.com

83% match

Loading thumbnail…

ICE7- Reusable scatter plot

This animated scatter plot visualizes an insurance dataset, plotting age on the x-axis against BMI, charges, or children, which cycle every two seconds. Built with D3.js, the SVG chart uses distinct symbols and colors to differentiate smokers from non-smokers, with axes labeled dynamically as the y-axis metric changes.

Kkotlavamsireddy@gmail.com

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

82% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of an insurance dataset, alternating between BMI and charges on both axes every two seconds. Built with D3.js v6, the reusable chart function scales the data using `scaleLinear` and draws circles with a radius of five pixels. The visualization updates the x and y value mappings in real time, with axes from `axisLeft` and `axisBottom`, while the SVG renders in the browser using the Share Tech font.

Ssrivalliwuyyuru

82% match

Loading thumbnail…

Reusable Scatter plot aSSIGNMENT

This interactive scatter plot visualizes healthcare data, plotting patient age against cholesterol levels with gender-based color coding (blue for male, pink for female). The visualization includes labeled axes, a title, and a legend, with a periodic redraw every five seconds. Built with D3.js, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a reusable `scatterPlot` function, rendering SVG elements. Data is loaded asynchronously via `csv` from a GitHub-hosted healthcare dataset, demonstrating a modular approach to creating configurable chart components.

Vvineelaramulapalli32

81% match