A

Aishwarya Manjunath

@AishwaryaManjunath·34 public vizzes

Loading thumbnail…

heart data parallel coordinate plot

This visualization presents a parallel coordinate plot of heart patient data, showing relationships between RestingBP, Cholesterol, and MaxHR. Each line represents a patient, colored by chest pain type (ATA, NAP, ASY, TA) using a d3.scaleOrdinal color scale. Users can hover over lines to highlight a specific chest pain category, and drag the axes to reorder dimensions. The implementation uses d3.csv for data loading, SVG paths for rendering lines, d3.axisLeft for axes, and d3.drag to enable interactive axis repositioning.

Loading thumbnail…

Heart disease data

This bar chart displays the average OldPeak level for males and females, using a purple horizontal bar for each gender. The data comes from a CSV file containing heart disease patient records. The visualization uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to build the SVG chart. Custom axis labels and a title are added, with the y-axis showing gender categories and the x-axis representing the OldPeak measurement.

Loading thumbnail…

Fork of Fork of Pie Chart

This visualization displays the protein content of various cereals as a pie chart, with each slice colored by chest pain type and accompanied by a legend showing exact gram values. The chart uses D3 v5’s `pie` and `arc` generators to create SVG paths, with `scaleOrdinal` for slice colors. Data is loaded asynchronously from a CSV via `d3.csv` and processed in `getData.js`, while labels use `d3.format` to display compact gram measurements.

Loading thumbnail…

Fork of Iris parallel coordinate plot

This interactive parallel coordinate plot explores the relationship between RestingBP, Cholesterol, and MaxHR in a heart disease dataset. Each line represents a patient, colored by their ChestPainType (ATA, NAP, ASY, TA), with several data points excluded. Hovering a line highlights all patients of that type while dimming others. Users can click and drag the vertical axes to reorder dimensions, with the line paths updating dynamically. The visualization is built with D3 v4, using `d3.scaleOrdinal` for colors, `d3.scaleLinear` for each axis, `d3.line()` for paths, and `d3.drag()` for interactive axis manipulation, rendered as SVG.

Loading thumbnail…

Fork of Fork of Parallel Coordinate Plot

This visualization uses a parallel coordinate plot to display the Iris Dataset, showing how three numeric attributes (RestingBP, Cholesterol, MaxHR) vary across different classes. Each polyline represents a single data point, colored by its categorical class using a custom color mapping. The code employs d3.csv to load the data, then uses d3.scalePoint, d3.scaleLinear, and d3.line to construct the axes and paths, with d3.axisLeft for tick marks. The SVG rendering includes a manually positioned legend and title, while d3.select and d3.append manage the DOM structure.

Loading thumbnail…

Fork of beeswarm

This example visualizes heart disease data with a beeswarm plot, where each circle represents a patient positioned along a logarithmic scale based on their maximum heart rate. The circles are colored by chest pain type, with a legend identifying the categories. The layout is computed using d3.forceSimulation with forceX, forceY, and forceCollide, while d3.voronoi creates hover regions around each point. SVG rendering and the d3-legend library display the color scale.

Loading thumbnail…

World Map using TOPOJSON- Aishwarya M

This example displays a world map, coloring each country in green with a black outline against an orange background. Built with D3 v5 and TopoJSON, it fetches country boundaries from the `world-atlas` dataset on jsDelivr. The map uses the `geoNaturalEarth1` projection and `geoPath` to generate SVG paths for each country, rendering the geographic features as scalable vector graphics.

Loading thumbnail…

Social Network -Aishwarya M

This interactive network graph visualizes social connections between seven individuals, with node size representing the weight of each connection and thicker orange links indicating stronger relationships. The visualization uses D3.js v4 with a force-directed layout algorithm to position nodes, allowing users to drag and rearrange the network. Node labels appear in yellow text, while circles use a red fill with lime borders against a gray background, with the data loaded from a JSON file containing node names, group assignments, and weighted link values.

Loading thumbnail…

Family Tree of 3 Generations Aishwarya M

This interactive family tree visualizes three generations of relationships using a hierarchical layout. Circles represent individuals, color-coded by generation (green, lightblue, yellow, red), with orange animated links connecting parents to children as they draw over time. The SVG is rendered with React and D3 v6, using `d3.stratify()` to structure the data and `d3.tree()` to compute positions. Node and text elements are bound via data joins, with CSS styling and transitions animating both path connections and circle radii.

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This example visualizes a hierarchical dataset as a collapsible tree, where nodes are rendered as colored boxes and labeled with names. Clicking a node expands or collapses its children, with smooth animated transitions. The tree is built using the `d3.layout.tree` and `d3.behavior.zoom`, and rendered as SVG. Link directions (SYNC/ASYN) and node types are encoded through edge colors and box fills, with tooltips providing additional metadata on hover.

Loading thumbnail…

USA Map -Aishwarya M

This example displays a map of the United States on an orange background, rendered as a single green SVG path. It fetches world country boundaries from a TopoJSON file via `d3.json`, filters the data to the United States, and projects it using `d3.geoAlbersUsa` with `d3.geoPath`. The visualization uses D3 v5 and TopoJSON’s `feature` method to convert the TopoJSON topology into GeoJSON features for rendering.

Loading thumbnail…

A D3 map using topojson

This example displays a map of Kentucky’s counties, rendered as blue polygons with white strokes on a light background. It uses the Albers equal-area conic projection, configured via `d3.geo.albers()`, and draws each county with `d3.geo.path()`. The visualization loads geographic data from the local `ky-counties.json` file, converts it using the TopoJSON library, and renders it as SVG paths within a React framework.

Loading thumbnail…

Heart Disease Scatter Plot

This scatter plot shows the relationship between patient age and maximum heart rate achieved using data from the Heart Disease UCI Kaggle dataset. Each blue circle represents an individual patient, with age plotted along the x-axis and maximum heart rate along the y-axis. The visualization loads CSV data via `d3.csv`, parses numeric fields, and renders circles as SVG elements with `d3.scaleLinear` for both axes. Axis labels are added manually using SVG text elements, while axes themselves are generated through `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Area Chart Aishwarya M

This area chart displays the opening bid price of EUR/USD across 2021, using a time-scaled x-axis for months and a linear y-axis for price. The visualization overlays a red line generated with `d3.line` and a semi-transparent purple area from `d3.area`, both using `curveBasis` for smooth interpolation. Axis ticks are formatted via `d3.axisBottom` and `d3.axisLeft`, with date formatting from `timeFormat`. Data is loaded as CSV from a GitHub gist, parsed with `d3.csv`, and rendered as SVG elements within a 900x400 viewport.

Loading thumbnail…

Line Chart of Opening Bid Price Aishwarya M

A line chart displays the opening bid price of EUR/USD throughout 2021, with months on the x-axis and price on the y-axis. The visualization uses React to manage state and D3 v7 functions including `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveBasis` to render a smooth SVG path. CSV data is fetched from a GitHub gist, sorted chronologically by date, and mapped to positional scales. Purple axis labels and a red line style highlight the price trend over the twelve-month period.

Loading thumbnail…

Reusable D3 Scatter Plot- ICE7 Aishwarya M

This interactive scatter plot visualizes the Iris flower dataset, mapping petal and sepal measurements to x and y axes. Data points are colored by species (setosa, versicolor, virginica) and cycle through four column combinations every few seconds using `setInterval`, with axes updating accordingly. Built with D3 v6, the visualization uses a reusable `scatterPlot()` function that employs `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render SVG circles with animation. A static legend identifies species colors, while axis labels and a title are appended directly to the SVG.

Loading thumbnail…

PIE Chart Aishwarya M

This visualization is a pie chart showing the top 10 countries by deaths in 2020 attributed to air pollution. Each slice is labeled with its corresponding death count in thousands, and a legend on the right lists each country alongside its value. The chart is built with D3 v5, using `d3.pie` to compute the arc data and `d3.arc` to generate the SVG paths, with colors assigned via `d3.scaleOrdinal`. Data is loaded as CSV from a GitHub gist, and text is positioned using `arc.centroid`.

Loading thumbnail…

C02 Emmisions in India

This chart displays India's per-capita CO2 emissions over time as an area chart, with a maroon region beneath a smooth curve. The visualization uses D3 v5 APIs including `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the smoothed region, and `axisBottom`/`axisLeft` for ticks and labels. Data is loaded from a CSV file containing yearly emission values.

Loading thumbnail…

3D Bar Chart AISHWARYA-M

The visualization shows a 3D bar chart of car brand frequencies as extruded bars with visible front, top, and side faces. Each bar’s height encodes frequency, with camera perspective applied to render depth, and bars are sorted by distance from center to manage overlap. Built with React and D3.js (d3.tsv, d3.scale.ordinal, d3.svg.axis), the chart uses SVG polygons for faces and animates transitions via d3.transition. Hovering recolors the faces to highlight entries. Data comes from a TSV file listing car models and their frequencies.

Loading thumbnail…

3D Bar Plot AISHWARYA-M

This 3D bar plot visualizes a 3D scatter dataset (from Plotly) as a collection of cubes, rendered using the d3-3d extension for D3 v4. The example shows how animated 3D shapes can be manipulated via drag interactions, with cube height encoding a data value. The visualization also includes an SVG-based 2D bar chart of UN population data, demonstrating a different rendering approach. The 3D component uses d3.drag for rotation and d3._3d for cube projection.

Loading thumbnail…

3D Scatter Plot usin IRIS dataset Aishwarya-M

This example uses the Iris dataset to render a 3D scatter plot, mapping petal length, sepal length, and petal width onto the x, y, and z axes. Each data point is colored individually to show distribution across the three dimensions. The visualization is built with Highcharts’ `scatter3d` chart type, loading data via D3’s `d3.csv` parser. Interactive rotation is enabled through custom mouse and touch event handlers that adjust the chart’s `options3d` alpha and beta angles. The plot includes axis limits, grid lines, and a legend, with radial gradients applied to the points for depth perception.

Loading thumbnail…

3D Scatter Plot Iris Dataset AISHWARYA-M

This 3D scatter plot visualizes the classic Iris dataset, mapping petal length, petal width, and sepal width to the x, y, and z axes, with species determining point color. The visualization supports interactive rotation via panning and features continuous auto-rotation animation. It renders circular sprites using Three.js on a WebGL canvas with HiDPI scaling, while D3 handles data parsing, linear scales, and ordinal color mapping via `d3.csv`, `d3.scaleLinear`, and `d3.scaleOrdinal`. The zoom interaction is configured to constrain rotation within vertical limits.

Loading thumbnail…

Fork of IRIS DATASET SCATTER PLOT - AISHWARYA M

This scatter plot visualizes the Iris dataset, emphasizing clustering by sepal length on the x-axis and petal length on the y-axis, with each circle representing an iris flower colored by species. Built with D3 v5, it uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.legendColor` to render a color legend. Data is loaded via `d3.csv` from a GitHub-hosted CSV, and the SVG rendering includes styled axis labels and legend text.

Loading thumbnail…

Bar graph of the data which has Top 15 countries

This bar graph displays the total population of the top 15 countries, with countries on the y-axis and population on the x-axis. The visualization uses D3 v7’s `select`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles whose widths proportionally represent each country’s population in thousands. Data is loaded via D3’s `csv` parser from a local `data.csv` file, and styling is applied through a stylesheet that fills bars with steel blue.

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This example shows a horizontal bar graph of population by country using data from a CSV file. The bars are rendered as SVG rectangles in steel blue, with countries on the y-axis and population values on the x-axis. The code uses `d3.csv` to load the data, `d3.scaleLinear` for the x-scale, `d3.scaleBand` for the y-scale, and `d3.axisLeft` and `d3.axisBottom` to draw the axes. Population values are multiplied by 1000 before rendering.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization shows a horizontal bar chart of population data for 20 countries, with bars colored green and red axis tick marks, all rendered as SVG within a React component. The code fetches CSV data from a GitHub gist, parses the population values, and uses D3's `scaleBand` and `scaleLinear` to map the categorical and quantitative values to screen coordinates. The React `useState` and `useEffect` hooks manage the data loading and re-rendering, while the chart is constructed by directly mapping over the data to create `rect` and `text` elements.

Loading thumbnail…

BAR CHART -AISHWARYA M

A horizontal bar chart displays total population across different racial categories, with race labels on the y-axis and population counts on the x-axis. Built with React and D3 v5, the visualization loads a CSV dataset from a GitHub gist, uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, and renders green SVG rectangles for each bar. Red axis tick lines and text labels are generated manually within the React component.

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries, with revenue on the x-axis and race categories on the y-axis, using a 2018 United Nations population estimate. The visualization, built with D3 v5, customizes the axes by removing tick lines and domain paths, and formats the x-axis tick labels using a `format` function that converts values to abbreviated billions. The y-axis is generated with `scaleBand` and `axisLeft`, while `axisBottom` renders the x-axis with a custom label; data is loaded from a CSV URL and mapped to `rect` elements via `selectAll`, leveraging `scaleLinear` for the numeric scale.

Loading thumbnail…

Fork of BAR CHART -AISHWARYA M

This visualization displays the total population of different countries using a horizontal bar chart built with React and D3 v5. The bars are rendered as SVG rectangles, with a green fill, and the chart includes labeled axes along the bottom and left sides. The code loads CSV data from an external URL, processes the population values, and uses `scaleBand` and `scaleLinear` to map the data to the chart dimensions. The visualization is rendered entirely through React components, with D3 functions handling the scales and tick generation.

Loading thumbnail…

IRIS DATASET SCATTER PLOT - AISHWARYA M

This scatter plot visualizes the Iris dataset, encoding sepal length and petal length to reveal clustering patterns among iris species, with each circle representing a flower. It renders as an SVG using D3 v5, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for species colors, and the `d3-legend` plugin for a color legend. Axis tick lines and labels are styled via CSS, and data is loaded from a CSV URL using `d3.csv`.

Loading thumbnail…

Iris Dataset Scatter Plot- AISHWARYA M

This scatter plot visualizes the Iris Dataset, mapping petal length and width for each flower and coloring points by species (setosa, versicolor, or virginica). The D3 v6 code loads the CSV data via `d3.csv`, uses `scaleLinear` and `extent` to set axes, and renders SVG circles with a fixed radius. It also destructures functions like `select` and axes for concise, reactive updates. The viewport fills the window, with readable 24-pixel tick labels.

Loading thumbnail…

ICE-5

This example combines a manually drawn SVG scene with a data-loading demonstration using D3 v7. The static illustration features a gradient sky, dark red panels, and black circles, while a heading and a preformatted text block display metadata about the loaded file. The code calls `d3.csv()` to fetch a remote CSV file, then uses `d3.csvFormat()` to compute its size, row count, and column count for display.

Loading thumbnail…

ICE-5

This example displays a large dataset, logging the file size, row count, and column count of ICE-5 data loaded from a CSV file via `d3.csvParse`. The page uses D3 version 7.3.0 and jQuery-CSV to fetch and parse the data, with the body set to a large 6em font size. The code currently only outputs console messages, showing the data’s scale in kilobytes, rows, and columns, while the `index.js` sets the text to “hello.” The visualization itself is not yet implemented, focusing instead on data loading and verification.

Loading thumbnail…

Fork of Fork of emoji-like face with mouth (D3)

This example displays a stylized emoji-like face with a yellow circular head, black outlined strokes, two eyes, and a curved mouth, centered on a 960 by 500 SVG canvas. Built with React 17 and D3 v7, it uses the `d3.arc()` generator to define the mouth’s path and SVG elements like `<circle>` and `<path>` for rendering. The face is positioned by translating a `<g>` group to the canvas center, with all coordinates and sizes computed from JavaScript constants for clarity.