dmouli369@gmail.com

healthcare

Family Tree and Network Graph with help of D3.js

Fork of Circles with D3

mouli area plot

This area plot visualizes daily temperature changes over time, with the x-axis representing dates and the y-axis showing temperatures in degrees Celsius. The chart uses a single steelblue filled area to emphasize the temperature curve against a white background. Built with D3 v7, the visualization employs `d3.csv` to load weather data from a remote CSV file, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area()` to generate the filled path. SVG rendering includes labeled axes and five evenly spaced ticks on the time axis, while the data processing parses dates and converts temperature values to numbers.

mouli line chart

This example visualizes daily temperature changes over time using a simple line chart. It renders a blue path with a 2-pixel stroke across an 800x400 SVG, with date on the x-axis and temperature in degrees Celsius on the y-axis. The code loads CSV data from a remote URL, parses dates and numeric values, then uses d3.scaleTime, d3.scaleLinear, and d3.line to map the data points. Axes are added using d3.axisBottom and d3.axisLeft, with axis labels indicating the variables.

mouli pie chart

This pie chart visualizes weather data by aggregating and summing values for each weather category, then displaying the proportional shares as colored arcs. The chart uses D3 v7 to load CSV data via `d3.csv`, compute category sums with `d3.sum`, and generate the pie layout with `d3.pie()` and `d3.arc()`. A categorical color scale (`d3.scaleOrdinal` with `schemeCategory10`) maps each category to a distinct color, while a legend, positioned dynamically, identifies each slice. The visualization renders as SVG, with white strokes separating arcs for clarity, and includes a title and centered layout.

mouli scatterplot

This animated scatter plot cycles through three weather measurements—temperature, precipitation, and pressure—on the x-axis while keeping humidity on the y-axis, using data from a CSV file. It demonstrates a reusable chart pattern with D3 v6, where the x-value mapping updates every two seconds via `setInterval` and a scaleLinear with extent-based domains. The SVG circles and axes are redrawn using D3’s selection joins, while `axisLeft` and `axisBottom` render the scales. The visualization, inspired by reusable chart principles, highlights how dynamic data encodings can be swapped without restructuring the chart logic.

MOULI ICE-6

MOULI ICE-6 displays a responsive scatter plot that encodes product prices as horizontal bars sorted in ascending order, with a light-to-dark blue color gradient mapping price magnitude. The visualization uses React for component state management and D3.js v5 for data loading and scales, specifically `scaleBand` for product categories and `scaleLinear` for price values. The data comes from a CSV file loaded via D3’s `csv` method, and the rendering is done entirely in SVG. The chart includes labeled axes and gridlines, with product names placed along the vertical axis and price values on the horizontal axis.

MOULI ICE-6

This example uses D3.js v6 to render a responsive scatter plot of product data loaded from a CSV file, showing Price on the x-axis and Product_ID on the y-axis. It highlights how individual products are distributed across price levels, with each circle colored by its category using a categorical color scale. The visualization employs an ordinal band scale for the y-axis and a linear scale for the x-axis, with axes generated via `d3.axisLeft` and `d3.axisBottom`. Circle positions are computed from the parsed data and rendered as SVG elements, with the chart filling the full browser window.

mouli ice-5

The example displays a static product inventory summary alongside a stylized mobile phone illustration, with keypad buttons rendered as SVG rectangles and text. It loads product data from a CSV file via `d3.csv`, then computes and displays file size, row count, and column count in a `<pre>` element. The phone graphic is drawn entirely with D3 v7, using chained `.append()` calls for shapes, and the page styling applies a cyan background with centered text via CSS. No interactive behavior is implemented beyond the initial data load and render.

Fork of Face with d3.js!

This example shows three green robots with yellow heads and pink caps moving horizontally across a patterned light-gray SVG background. Each robot bounces back and forth independently, reversing direction when it reaches the edge of the 600x400 viewport. The code builds the robots using D3 v7 selections and SVG shapes, including circles for eyes, polygons for antennae, and paths for bodies. Animation is driven by `requestAnimationFrame`, updating each group's `transform` attribute every frame based on a per-robot direction state.