sahajm99@gmail.com

@sahajm99·5 public vizzes

Pie plot

A pie chart shows the distribution of stroke cases across BMI categories—Normal, Overweight, and Obese—as percentages of the total. The dataset is loaded via `d3.csv` from a GitHub gist, with BMI values filtered to stroke patients and grouped into the three categories. Using D3 v6, the chart is rendered as SVG paths generated by `d3.pie` and `d3.arc`, with a `d3.scaleOrdinal` color scheme. A legend, positioned via `d3.selectAll`, displays each category’s name and its computed percentage.

Apr 18, 2024

Loading thumbnail…

Pie plot

This example visualizes the relationship between bill length and flipper length across penguin species using a responsive scatter plot. The data comes from the Palmer Penguins dataset, filtered to exclude missing values. The visualization uses D3’s `scaleLinear` to map the continuous measurements, with axes generated via the `@curran/responsive-axes` library. Circles represent individual penguins, with opacity and radius set to reveal overlapping points. The chart adapts to container resizing through `@curran/responsive-axes`’s `observeResize` function, while D3’s `select` and `join` manage SVG element updates.

Apr 18, 2024

Loading thumbnail…

Fork of Heart Disease Scatter Plot

This fork of a Heart Disease scatter plot shows the relationship between a patient’s BMI and the presence of heart disease, with the X-axis representing BMI and the Y-axis indicating heart disease status. The visualization uses D3 v6 to load CSV data from a GitHub gist, parse values with `d3.csv`, and map them to SVG circles via `d3.scaleLinear`. Axes are drawn with `axisLeft` and `axisBottom`, and the plot is rendered as an SVG canvas. The data originates from the Heart Disease UCI Kaggle dataset.

Apr 17, 2024

Loading thumbnail…

Test fork

This area chart displays population data for various countries across three distinct census years (2022, 2020, and 1970), using a stacked layout. The visualization employs D3.js’s `scaleBand` for the categorical country axis and `scaleLinear` for the population scale. Built with a custom `d3.area` generator, the chart renders paths filled with an ordinal color scheme. The code loads CSV data from a GitHub gist, includes axis labels for "Country" and "Population," and overlays direct value labels on each segment.

Apr 17, 2024

Loading thumbnail…

Qatest

This example demonstrates how to visualize Apple stock price data using an area plot built with D3. The chart displays the closing price over time as a filled area, providing a clear view of price fluctuations. The visualization uses D3's time and linear scales, as well as the area generator to create the smooth region. The stock data, loaded from a JSON file, includes date and closing price values, which are parsed and rendered as an SVG path. The chart is configured with a custom margin and size, and updates dynamically when the data is loaded.

Apr 13, 2024