S

skasliwal@wpi.edu

@skas901·33 public vizzes

Loading thumbnail…

Pima Indians Diabetes Dataset (Scatter Plot Improved_3)

This dashboard visualizes the Pima Indians Diabetes dataset, showing patient BMI and Glucose levels across a scatter plot faceted by age bins. Points encode diabetes outcome through shape (circle for non-diabetic, cross for diabetic) and age through a sequential red color scale. A bar chart displays average glucose by outcome per age group, with an interactive legend and patient detail panel updating upon selection. The implementation uses D3 v7 APIs including scaleThreshold, scaleOrdinal, symbol, brush, and csv parsing.

Loading thumbnail…

Fork of Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved_3)

This dashboard visualizes patient health metrics from the Pima Indians Diabetes dataset, presenting a scatter plot of BMI against Glucose levels where points are colored by age group and shaped by diabetes outcome. The visualization is faceted by age bins, with a bar chart showing average glucose levels per outcome within each age category. A third panel displays detailed patient information upon point selection. The code leverages D3 v7 APIs including `scaleThreshold`, `symbol`, `brush`, and `axisBottom`, with data parsed from CSV format and rendered as an interactive HTML page.

Loading thumbnail…

Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved_3)

This dashboard visualizes the Pima Indians Diabetes dataset, showing BMI against Glucose levels with points colored by age brackets and shaped by diabetes outcome. Faceted bar charts display average glucose for diabetic and non-diabetic groups across age ranges. Built with D3 v7, the scatter plot supports hovering and clicking to reveal patient details, while axes, legends, and scales are generated using `d3.scaleLinear`, `d3.scaleThreshold`, and `d3.scaleBand`.

Loading thumbnail…

Pima Indians Diabetes Dataset (Scatter Plot Improved_4)

This dashboard visualizes the Pima Indians Diabetes dataset, mapping BMI and glucose levels for individual patients while encoding age through color and diabetes outcome through point shape. The interface combines a scatter plot with a faceted bar chart showing average glucose by age bin and outcome, alongside a clickable patient detail panel. Built with D3 v7, it uses scales like `scaleThreshold` and `scaleOrdinal`, symbol generators for categorical shapes, brushing for interaction, and CSV data loading for the analysis.

Loading thumbnail…

Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved_3)

This dashboard visualizes the Pima Indians Diabetes dataset, showing the relationship between BMI and Glucose levels across patients, with age encoded by color and diabetic outcome by point shape. The D3.js v7 application faceted scatter plots group patients into age bins, displaying both individual data points and average glucose levels per outcome category. A third panel shows patient details upon selection, with linked highlighting between the scatter plot and bar charts. The code uses d3.scaleThreshold, d3.scaleOrdinal, d3.symbol, d3.brush, and d3.csvParse for data processing, binning, and interactive selection.

Loading thumbnail…

Pima Indians Diabetes Dataset (Scatter Plot Improved_4)

This dashboard plots body mass index against glucose levels for patients from the Pima Indians Diabetes dataset. Points are color-coded by age bracket and shaped by outcome, with a linked bar chart showing average glucose by age and diabetic status. Users can brush the bar chart to filter the scatter plot and click any point to view the full patient record. The visualization uses D3 v7 scales, axes, brush, and symbol generators for cross-filtering and linked views.

Loading thumbnail…

Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved_3)

This scatter plot visualizes the Pima Indians Diabetes dataset, showing BMI and Glucose values for patients, with point color encoding patient age and shape distinguishing diabetic (crosses) from non-diabetic (circles) outcomes. The visualization is faceted by age bin, displaying average Glucose values by outcome for each age group in a bar chart. Users can click scatter plot points to view detailed patient information in a third panel, with all charts sharing consistent color and shape legends. The implementation uses D3.js version 7.6.1, employing `scaleThreshold` for age binning, `scaleOrdinal` for categorical shapes, `scaleBand` for the bar chart, and the `brush` API for interactive selection.

Loading thumbnail…

Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved_2)

This interactive scatter plot visualizes the Pima Indians Diabetes Dataset, displaying BMI against Glucose levels for 768 patients. Points are color-coded by age bins and shaped by diabetic outcome, with a brushed region highlighting selected patients and a detail panel showing full patient records on click. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleThreshold`, `scaleOrdinal`, `brushX`, and `symbol` generators. The second panel displays faceted bar charts showing average glucose by age bin and outcome, with the data loaded from a CSV file.

Loading thumbnail…

Pima Indians Diabetes Dataset (Scatter Plot Improved_2)

This interactive visualization explores the Pima Indians Diabetes dataset by combining a scatter plot of BMI against Glucose levels with a bar chart of average glucose by diabetes outcome. Users can brush to select regions of the scatter plot, which filters the bar chart to show aggregated data from only the brushed points. Scatter points are colored by age bins using `scaleThreshold` and shaped by outcome using `scaleOrdinal` with `symbolCircle` and `symbolCross`. The chart uses d3.brush for selection, d3.csvParse for data loading, and d3.axisBottom and d3.axisLeft for axes.

Loading thumbnail…

Pima Indians Diabetes Dataset (Scatter Plot Improved_1)

The visualization presents the Pima Indians Diabetes dataset as a dual-panel scatter plot, mapping BMI and Glucose levels while encoding patient age through a red sequential color scale and diabetes outcome via point shape (circles for non-diabetic, crosses for diabetic). A secondary bar chart displays average glucose by outcome. Users can filter points by age bins, which adjusts opacity based on a selection set. The implementation uses D3's scaleThreshold for binning, scaleLinear for axes, and the join method for incremental updates.

Loading thumbnail…

Fork of Diabetes Data

This dashboard visualizes diabetes risk factors from patient data using a linked scatter plot and bar chart. The scatter plot positions patients by BMI and glucose levels, colored by age and shaped by outcome, while the bar chart shows average glucose by diabetic status. Clicking a point highlights that patient and displays their full record below. Built with React and D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `scaleBand`, `symbol`, and `axisBottom` to render the interactive charts.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved)

This interactive visualization splits the Pima Indians Diabetes Dataset into two linked panels. The left panel presents a scatter plot of BMI against plasma glucose concentration, where each point is colored by patient age using a sequential inferno scale and shaped by diabetes outcome (circle for non-diabetic, cross for diabetic). Clicking a point highlights it in gold and dims others. The right panel simultaneously displays a bar chart comparing average glucose levels between diabetic and non-diabetic groups, computed with d3.mean. The visualization uses D3 v7 APIs including scaleLinear, scaleOrdinal, scaleSequential, symbol, and CSV parsing.

Loading thumbnail…

Pima Indians Diabetes Dataset (Scatter Plot Improved)

This visualization combines a scatter plot and bar chart to explore the Pima Indians Diabetes dataset. The scatter plot maps BMI and glucose concentration, using color to encode age and shape (circle vs. cross) to distinguish diabetic outcomes, while the bar chart shows average glucose by outcome. The code uses d3.csvParse to load data, d3.scaleLinear for positioning, d3.scaleSequential with interpolateInferno for the color scale, and d3.symbol for shape encoding. The bar chart employs d3.scaleBand and d3.max for aggregation.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved)

This example presents the Pima Indians Diabetes dataset through a dual-panel visualization: a scatter plot showing BMI against plasma glucose concentration with points colored by age via a sequential inferno scale and shaped by diabetes outcome using `scaleOrdinal` with circle and cross symbols, alongside a bar chart comparing average glucose levels between diabetic and non-diabetic groups. The code uses D3 v7 APIs including `scaleLinear`, `scaleSequential`, `interpolateInferno`, `axisBottom`, `axisLeft`, `symbol`, and `scaleBand`, with data parsed from CSV using `csvParse` and aggregated with `mean`.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved)

A scatter plot displays the Pima Indians Diabetes dataset, mapping BMI on the x-axis and glucose concentration on the y-axis to reveal potential health correlations. Points are colored with a sequential Inferno scale based on age, and shaped as circles or crosses to distinguish between diabetic and non-diabetic outcomes. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleSequential`, `scaleOrdinal`, `symbol`, `axisBottom`, and `axisLeft`, with data parsed from a local CSV file.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved)

This scatterplot matrix visualizes the Pima Indians Diabetes dataset, comparing five quantitative attributes (Glucose, BMI, Age, Pregnancies, and BloodPressure) in a lower-triangular grid of subplots. Each point represents a patient, colored blue for non-diabetic and red for diabetic, with circles and crosses distinguishing outcomes. Built with D3 v7, the visualization uses `scaleOrdinal` for color and symbol scales, `axisBottom` and `axisLeft` for axes, and `csvParse` to load the data. Data is filtered to exclude invalid zero values before being reshaped into a long format for small-multiple rendering.

Loading thumbnail…

Fork of Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved)

This scatter plot matrix uses the Pima Indians Diabetes dataset to compare eight health attributes, with each subplot showing the relationship between two different variables. Points are colored by diabetes outcome using a blue and red categorical scale, and the grid layout reveals correlations across the dataset. The visualization is built with D3 v7, using `scaleLinear` for axes, `scaleOrdinal` for color encoding, and `csvParse` to load the data. The code explicitly filters out invalid zero values for Glucose and BMI before rendering.

Loading thumbnail…

Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved)

This visualization presents a small multiples scatter plot matrix of the Pima Indians Diabetes dataset, comparing all pairings of eight clinical attributes (such as Glucose, BMI, and Age) against each other. Each subplot uses color-coded points to distinguish between diabetic (red) and non-diabetic (blue) outcomes, with axes scaled to the full data extents. The code transforms the wide CSV data into a long format, filters out rows with zero values, and renders the grid using D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `csvParse`, `axisLeft`, and `axisBottom`. The visualization offers a comprehensive overview of pairwise relationships across the dataset.

Loading thumbnail…

Fork of Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved)

This visualization uses the Pima Indians Diabetes dataset to show the relationship between BMI and plasma glucose concentration, with each point colored by patient age on a yellow-to-red scale. Crosses indicate high diabetes risk while circles represent low risk. The chart includes axis labels and gridlines for readability. Built with D3 v7, the code uses `csvParse` for data loading, `scaleLinear` for positioning, `scaleSequential` with `interpolateYlOrRd` for age-based coloring, and custom `symbol` shapes for outcome encoding.

Loading thumbnail…

Pima Indians Diabetes Dataset (Bar Chart technique)

This example visualizes the average plasma glucose concentration for two patient outcome groups—high-risk (diabetic) and low-risk (non-diabetic)—using a bar chart. The code loads the Pima Indians Diabetes dataset from a CSV file, filters out records with zero values for glucose or BMI, and aggregates the data by calculating the mean glucose per outcome. It uses D3 v7 functions such as `csvParse`, `scaleBand`, `scaleLinear`, and `mean`, with bars colored via a categorical scale to distinguish risk levels.

Loading thumbnail…

Fork of Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved)

A scatter plot from the Pima Indians Diabetes dataset shows the relationship between plasma glucose concentration and body mass index, with age encoded through a yellow-orange-red sequential color scale and diabetes outcome represented by shape (circles for low risk, crosses for high risk). The D3 code uses `scaleLinear`, `scaleSequential` with `interpolateYlOrRd`, `axisBottom`, `axisLeft`, and `symbol()` with `symbolCircle`/`symbolCross` for glyphs. Data is parsed via `csvParse` and filtered to exclude rows with zero glucose or BMI values.

Loading thumbnail…

Fork of Pima Indians Diabetes Dataset (Scatter Plot Improved)

This scatter plot of the Pima Indians Diabetes Dataset visualizes the relationship between plasma glucose concentration and body mass index (BMI). Each point represents a patient, with x/y positions mapped through `d3.scaleLinear` scales for BMI and glucose, respectively. The marker color uses a sequential yellow-to-red scale through `d3.scaleSequential` to encode patient age, while the symbol shape distinguishes diabetes outcome—crosses for positive diagnoses, circles for negative—via `d3.symbolCross` and `d3.symbolCircle`. Data is loaded from CSV and filtered to exclude zero values for BMI and glucose.

Loading thumbnail…

Pima Indians Diabetes Dataset (Scatter Plot Improved)

This scatter plot visualizes the Pima Indians Diabetes Dataset, showing the relationship between Body Mass Index (BMI) and Plasma Glucose Concentration, with points colored blue for non-diabetic (0) and red for diabetic (1) outcomes. The visualization filters out non-physiological zero values for BMI and glucose before plotting. Implemented using D3 v7, the code employs `scaleLinear` for both axes, `scaleOrdinal` for categorical coloring, and `axisBottom`/`axisLeft` for tick marks, with data loaded asynchronously from a local CSV file.

Loading thumbnail…

Fork of Scatter Plot with React & D3

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for 150 flower samples. The visualization uses React to manage component state and lifecycle, with D3 v7 handling the rendering pipeline. D3’s `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` functions generate the axes and scales, while reusable modules for axes and labels keep the code modular. Circles are bound to the data via D3’s data join, with fixed radius and color. Data loads asynchronously from a CSV file and is parsed into numeric values before rendering.

Loading thumbnail…

Pima Indians Diabetes Dataset (Scatter Plot)

This scatter plot visualizes the Pima Indians Diabetes Dataset, plotting BMI on the x-axis against Glucose concentration on the y-axis for individual patients. Each point is color-coded by the binary outcome (blue for non-diabetic, red for diabetic), using a categorical color scale with blue and red hues. The chart is rendered with D3.v7, using core APIs such as `scaleLinear`, `scaleOrdinal`, `extent`, and the `.join()` modifier to build the SVG. The data is loaded asynchronously from a CSV file containing diagnostic measurements from the National Institute of Diabetes and Digestive and Kidney Diseases.

Loading thumbnail…

Fork of Diabetes Data

A fork of the Pima Indians Diabetes dataset plots BMI against blood glucose levels as a scatterplot, coloring each point red for a positive diabetes outcome and green for a negative one. The visualization loads `data.csv` with `d3.csvParse`, converts all columns to numbers, and renders the chart as SVG using D3 v7 scales, axes, and data joins. The code uses `d3.scaleLinear` for both axes and `d3.extent` to set the domains, producing a static scatterplot without interaction.

Loading thumbnail…

Gapminder GDP per Capita (Scatter Plot)

This scatter plot visualizes the change in per-capita GDP for various countries from 1800 to 2100. A logarithmic scale on the y-axis reveals the wide range of economic output, from under 500 to over 25,000 dollars, with individual points representing a country-year pair. Built using D3 v7, the visualization uses `csvParse` to load the wide-format Gapminder Foundation data, transforms it into a long format, and renders each data point as a semi-transparent circle, with linear and log scales for the temporal and GDP axes, respectively.

Loading thumbnail…

Gapminder GDP per Capita

This example loads a Gapminder GDP dataset in wide format and displays the raw parsed data as JSON in the browser. It uses D3 v7’s `csvParse` to convert the CSV into an array of objects, then transforms string values like `"10.1k"` into numeric GDP per capita figures. The visualization fetches the remote CSV via `fetch`, processes the year columns from 1800 to 2100, and relies on a state management pattern with a `setState` function to trigger re-renders. The current implementation is a data-loading scaffold, not a finished chart.

Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

This example plots global economic growth using a scatter plot of GDP per capita against time. Each small blue circle represents a single country's GDP value for a given year. The visualization uses a logarithmic y-axis scale to handle the wide range of data values, revealing trends across nations from 1800 to 2100. The code combines React's state management with D3.js v7, using `scaleLog` for the axis, `scaleLinear` for time, and `csvParse` to transform the loaded Gapminder dataset into a long format for plotting.

Loading thumbnail…

Diabetes Data

This example presents a scatter plot of the Pima Indians Diabetes Dataset, visualizing diagnostic measurements such as glucose levels, BMI, and age to explore their relationship with diabetes outcomes. The visualization is built using D3.js (d3.v7) and employs the `select` and `csvParse` APIs to load and structure the CSV data, which is then converted from strings to numeric values. The rendering displays the dataset as raw JSON text within a `<pre>` element, offering a straightforward, data-centric view of the 768 patient records without additional charting layers.

Loading thumbnail…

Gapminder Life Expectancy Data

This example loads a Gapminder life expectancy dataset in wide format and displays the raw parsed data as a JSON preview. It fetches `data.csv`, converts year columns to numbers, and handles values with a "k" suffix by multiplying by 1000. The visualization uses D3 v7's `csvParse` and `select` to manage asynchronous data loading and rendering. It demonstrates a data-loading workflow where the state tracks loading status and updates the view accordingly, without yet showing a chart.

Loading thumbnail…

Fork of Loading Data

This example demonstrates asynchronous data loading in a D3.js visualization. The code fetches a CSV file containing the classic Iris flower dataset, parses it, and displays the raw JSON-formatted data prominently as the primary output. The visualization progresses through distinct states—starting with undefined, transitioning to a "LOADING" message, and finally populating with the parsed array of objects. It uses D3's `select`, `join`, `csvParse`, and a state management pattern with `setState` to control the rendering and handle the fetch-and-parse pipeline.

Loading thumbnail…

Fork of Circles with D3

Seven translucent circles of varied sizes and neon colors float on a pale green background. Using the D3.v7 `select` API, the visualization joins SVG circles to an array of position, radius, and fill data, setting each circle's circumference attributes and a uniform 0.7 opacity. The fixed full-viewport container resizes the drawing with the browser window.