B

bassansackey@gmail.com

@EsiMen·16 public vizzes

Loading thumbnail…

ICE8 - Network

A force-directed network diagram maps relationships among six cardiovascular disease attributes—gender, smoking, alcohol, cholesterol, glucose, and the cardio target—using D3.js v5 with a custom `d3.forceSimulation` layout. Nodes are grouped by category (Gender, Habits, Health, Target) with a scaleOrdinal color scheme, while link stroke widths encode connection strength. Interactive drag-and-drop repositions nodes, and SVG tooltips describe each attribute’s possible values. The dataset appears to come from a cardiovascular risk factor survey.

Loading thumbnail…

Network graph

This interactive network graph visualizes the relationships between features related to cardiovascular disease, with nodes colored by category (Demographics, Lifestyle, Health Indicators, Outcome) and the target 'cardio' node emphasized. It is built with D3 v5, using `d3.forceSimulation` for physics-based layout, including linkage, many-body repulsion, centering, and collision handling. Node size, edge thickness, and a legend clarify feature importance and connections, while tooltips provide value descriptions and drag functionality enables exploration.

Loading thumbnail…

ICE8 - Tree

A tree diagram visualizes the distribution of cardiovascular disease risk factors among patients, branching from overall risk into cholesterol, glucose, and smoking categories, then into outcome counts for cardiovascular disease presence or absence. Leaf nodes display patient counts with tooltips providing detailed breakdowns. The visualization is rendered using D3.js v7 with the `d3.hierarchy` and `d3.tree` layouts, drawing SVG links and circles for nodes. Styling applies gray links and black node strokes to clarify the hierarchical structure.

Loading thumbnail…

Area Chart

This example visualizes the daily new COVID-19 cases in Spain over a 60-day period using an area chart. The chart combines a semi-transparent steelblue filled area with a solid line to show the trend, and includes labeled axes for dates and case counts. The data is loaded from the CSSEGISandData GitHub repository using `d3.csv`, processed by filtering for Spain and computing daily differences, and then rendered as SVG paths generated with `d3.area` and `d3.line`. Scales are created with `d3.scaleTime` and `d3.scaleLinear`, axes are drawn using `d3.axisBottom` and `d3.axisLeft`, and sparse data points are marked with circles that display a tooltip on hover.

Loading thumbnail…

Line Chart

This line chart visualizes daily new COVID-19 cases in Spain over a 60-day period, sourced from the CSSEGISandData GitHub repository. The chart uses d3.csv to load time-series data, d3.scaleTime and d3.scaleLinear to map dates and case counts, and d3.line to draw the steelblue path. Interactive circle elements with mouseover handlers populate a tooltip showing the date and cases using event.pageX and event.pageY. The SVG rendering includes grid lines via d3.axisLeft and labeled x and y axes for date and daily cases.

Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot component displays categorical data points across two quantitative axes, with color encoding by category and optional tooltips for interactivity. Built with D3 v6, it renders SVG circles, axes, and labels while supporting configurable margins, scales, and color schemes. The component uses `d3.scaleLinear` for positioning, `d3.scaleOrdinal` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is processed through customizable accessor functions, and the chart animates via D3 transitions when updated.

Loading thumbnail…

reusable scatter plot

A reusable D3 scatter plot visualizes lung disease data, mapping age on the x-axis against lung capacity on the y-axis while coloring each point by smoking status. The chart is built as a customizable function, `scatterPlot()`, using D3 v6 scales (`scaleLinear`, `scaleOrdinal`) and axes to render the plot. A hover tooltip displays exact values for age, lung capacity, and smoking status. The rendering animates point appearance and uses `d3.schemeCategory10` for color assignment, with data bound directly to circles.

Loading thumbnail…

Fork of HTML Starter

This scatter plot displays the relationship between two continuous variables across a dataset of wine quality metrics, plotting each sample as a circle. Built with D3 v7, the visualization uses `d3.scaleLinear` to map data values to pixel coordinates and `d3.axisBottom` and `d3.axisLeft` to render labeled axes. The SVG output includes interactive-friendly features like configurable margins, point radius, and opacity, with a chainable API for setting the x and y accessor functions and axis labels.

Loading thumbnail…

Fork of Reusable Scatter Plot

This example presents an interactive scatter plot that visualizes the relationship between various chemical properties and quality ratings in a wine dataset. The chart cycles through different x-axis variables—alcohol content, pH, residual sugar, and volatile acidity—every three seconds, with points colored according to wine quality on a gradient scale. Built using d3.v6, the visualization employs a reusable `scatterPlot()` module with chainable setters for configuration. It renders SVG elements with animated axis transitions, grid lines, and a legend showing the quality color mapping.

Loading thumbnail…

Pie chart

This interactive pie chart shows the distribution of disease types from a CSV dataset, displaying the count and percentage of each category when hovered. Built with React and D3 v5, the visualization uses d3.pie to compute arc segments, d3.arc to generate paths, and d3.scaleOrdinal with schemeCategory10 for coloring. A tooltip appears on mouseover via d3.select, revealing disease name, count, and percentage.

Loading thumbnail…

Fork of ScatterPlot

This scatter plot shows the relationship between a patient's age and their lung capacity, with each point colored or positioned to reveal patterns across the dataset. It loads CSV data from a GitHub gist, parses it with `d3.csv`, and maps the `Age` and `LungCapacity` fields to x and y axes using `d3.scaleLinear` and `d3.extent`. The React-based component, built with React's `useState` and `useEffect`, calls `d3.axisBottom` and `d3.axisLeft` to render axes and includes an interactive tooltip via `d3.select` that displays the patient's age, lung capacity, and disease type on mouseover.

Loading thumbnail…

ScatterPlot

A scatter plot displays the relationship between age and lung capacity, with each black dot representing an individual’s values and a tooltip revealing their disease type and hospital visits on hover. The data is loaded from a CSV file via `d3.csv` and rendered as an SVG using React. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleLinear` maps the data domains to pixel ranges.

Loading thumbnail…

Scatterplot

This scatterplot displays the relationship between age and lung capacity, with each dot representing an individual and color-coded by disease type. Hovering over a dot reveals a tooltip with age, lung capacity, and disease information. The visualization uses D3.js v5 scales, axes, and event handlers within a React component, loading CSV data from a GitHub gist. React manages the component state while D3 handles the SVG rendering and interactive tooltip behavior.

Loading thumbnail…

Bar Chart

This example shows a grouped bar chart comparing hospital visits by disease type and gender, using data loaded from a CSV file. The chart renders male and female bars side by side for each disease category, with a Tableau10 color scheme distinguishing the two groups. Implemented with React and D3 v5, it uses `scaleBand` for the grouped axes, `scaleLinear` for the value range, and `axisBottom` and `axisLeft` for the chart’s axes. Data aggregation is performed in JavaScript before rendering.

Loading thumbnail…

Parsing of Data with D3

This example demonstrates how to load and parse a CSV file using D3.js, displaying the dataset's size, row count, and column count. It fetches a CSV file containing lung disease data from a GitHub gist URL. The code uses the `d3.csv` function to fetch and parse the data, and `d3.csvFormat` to calculate its size in kilobytes. The resulting message is rendered in a prominent `<pre>` element, showing the parsed data's basic statistics.

Loading thumbnail…

ReddyyDonut

This example shows a colorful donut with a Spider-Man face in its center, rendered on an HTML5 Canvas using the 2D context API (`CanvasRenderingContext2D`). The donut is drawn with a red outer ring and beige hole, decorated with randomly placed round and elongated sprinkles using `Math.random()`. The Spider-Man face features a black circle base, white elliptical eyes, and a simplified white web pattern drawn with lines. The code uses no external libraries, relying entirely on native Canvas drawing methods like `arc`, `ellipse`, and `roundRect`.