ALIMINETI SPOORTHY REDDY

company_tree

This example renders a company organizational hierarchy as an indented tree diagram. It uses D3.js v7 and SVG to draw nodes and links, with circles for roles and text labels. The hierarchical structure is built from an array of objects using `d3.group` to nest data by company, department, and team before mapping it into a tree structure. The visualization includes a dynamic color legend that separates roles by team, and the nodes are interactive, with the cursor pointer indicating clickable elements.

Nov 1, 2025

Iphone_purchase_Map

This interactive choropleth map shows the global distribution of iPhone purchase rates per 100,000 people, with countries shaded from light to dark blue according to their value. Hovering over any country displays its specific rate in a sidebar, while a legend clarifies the color scale. Built with Leaflet for map rendering and D3.js for data ingestion, the visualization loads country boundaries from GeoJSON and joins them with the CSV dataset. The map uses OpenStreetMap tiles as its base layer, and a dynamically generated legend and tooltip provide immediate feedback during exploration.

Nov 1, 2025

Maps

This example presents two static SVG maps built with D3 v7 and TopoJSON. The first shows a world map using the `world-atlas@2` countries-110m dataset, rendered with a `d3.geoNaturalEarth1()` projection and a graticule layer. The second focuses on India, using a `d3.geoMercator()` projection centered on the country, with state boundaries loaded from a separate geoBoundaries ADM1 file. Both maps use `d3.geoPath` to convert GeoJSON features into SVG paths, with country and state outlines styled distinctly.

Oct 31, 2025

HarryPotter_tree

This example shows a vertical family tree built with D3 v7, displaying multiple generations of a fictional family from a single root ancestor downward. It uses the `d3.stratify()` API to convert a flat list of `{child, parent}` pairs into a hierarchical structure, then lays out the nodes with the `d3.tree()` layout and renders the connecting links using `d3.linkVertical()`. Each node is represented as a blue circle with a text label, positioned via SVG transforms within a fixed `1000x900` viewBox, with the data hardcoded in the script.

Oct 30, 2025

Scatterplot

An animated scatterplot visualizes synthetic planetary data, cycling the x-axis among diameter, moon count, and orbital period while plotting moons on the y-axis. Points are colored green with hover tooltips showing name, type, diameter, and moons. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and transition methods to smoothly update positions every 2.5 seconds. Data loads from a CSV file, rendered as SVG circles with a dark theme.

Oct 27, 2025

ScatterPlot

This animated scatter plot visualizes planetary data, showing each planet’s diameter, number of moons, and orbital period as a colored, sized circle on a dark, space-themed SVG canvas. The planets continuously wander and bounce off the plot’s edges using a `d3.timer` loop that updates circle positions. Hovering reveals a tooltip with details like discovery date, while a legend groups planets by type. The code loads a CSV dataset, applies linear scales for axes and a sqrt scale for size, and uses `d3.axisBottom` and `d3.axisLeft`.

Oct 27, 2025

SalesData_AreaChart

The stacked area chart displays website traffic sources—Organic Search, Direct, and Social Media—across months, with cumulative visitor counts visualized as colored regions. Areas are rendered by stacking Y values for each category using `d3.area` and `d3.stack` with custom x and y scales, while axes and labels are added via `d3.axisBottom` and `d3.axisLeft`. The visualization loads CSV data with `d3.csv`, applies an ordinal color scale, and includes a legend. The SVG output is styled with CSS, using a clean layout with margins for labels.

ProductSales_PieChart

A pie chart visualizes the distribution of sales across six product categories, displaying each product's name and percentage inside its slice. Built with D3.js v7, the visualization uses `d3.pie` to compute arc segments and `d3.arc` for rendering paths, with an ordinal color scale assigning distinct hues. Sales data from a CSV file is loaded via `d3.csv`, and a legend on the right lists each product with its corresponding color and total sales value. The chart includes white stroke separators and labels positioned using arc centroids.

TemperatureDay_LineChart

This line chart visualizes temperature readings across ten consecutive days, with each day’s value marked by an orange circle and connected by a steelblue line. The chart includes labeled axes for Day and Temperature (°C), with the y-axis scaled to include padding above and below the data range. Using D3.js v7, the visualization loads data from a CSV file via `d3.csv`, applies linear scales for both axes, and renders the SVG path with the `d3.line()` generator. Axis labels are added as SVG text elements, and the chart is drawn within a configured margin-based layout.

TemperatureDay_LineChart

This example shows seven colored circles arranged across a canvas, where clicking any circle highlights it with a black border and brings it to the front. The visualization uses D3 v7’s selection methods (`selectAll`, `join`, `attr`) to render the SVG elements, with explicit `click` event listeners managing state through a unidirectional data flow pattern. A custom `unidirectionalDataFlow` helper coordinates state updates, while `setupSVG` initializes the responsive full-screen SVG container and `renderCircles` handles the circle rendering and interaction highlighting.

StudentScores_ScatterPlot

This scatter plot visualizes the relationship between hours studied and exam scores for ten students, with each point labeled by student name and colored uniquely. The chart uses Plotly.js, fetching data from a local CSV file and rendering separate traces per student for individual legend entries. The page displays a gray background with black text and a title, while the plot area uses the same gray tone for both paper and plot backgrounds, with the mode bar hidden for a cleaner presentation.

StudentMarks_ScatterPlot

This scatter plot example visualizes student marks by plotting individual data points, likely with scores on each axis. The implementation relies on JavaScript and uses a simple HTML structure with CSS styling, while the core data handling and rendering are managed through the index.js script. The visualization is minimal, as the code does not include D3.js or other plotting libraries, and instead focuses on a basic webpage setup. The chart’s appearance depends on the CSS and HTML elements, with no external data files referenced.

StudentScore_ScatterPlot

This scatter plot visualizes the relationship between hours studied and exam scores for ten students. The chart displays a clear positive correlation, with data points plotted on a linear scale for both axes. Built with D3.js v7, the visualization loads data from a CSV file using `d3.csv` and constructs an SVG with `d3.select` and `append`. The code creates scales with `d3.scaleLinear` and renders axes via `d3.axisBottom` and `d3.axisLeft`. The reusable `scatterPlot` function applies steelblue, semi-transparent circles to represent each student's data.

Chocolate_price_ScatterPlot

This reusable scatter plot, built with D3.js v7, visualizes the relationship between a country's CO₂ emissions and its GDP using data loaded from a CSV file. It clearly shows the data distribution across these two variables, with each country represented as a steel-blue circle. The visualization employs D3's `scaleLinear` for both axes, `axisBottom` and `axisLeft` for the tick marks, and `d3.extent` to set the domain. The function `scatterPlot` is designed to be reusable, accepting any container, dataset, and variable names for flexible comparisons.

Solar_System_Bar_Graph

This visualization shows the diameters of planets in kilometers using a bar chart, with each bar colored distinctly and a corresponding legend. The data is loaded from a CSV file via `d3.csv`, parsed, and sliced to the first 12 entries. The bars are rendered as SVG rectangles using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory10`. Both axes are labeled, and axis ticks are rotated for readability.

Solar_System_Multi_Series_Chart

This example visualizes planet diameters and orbital periods with a combined bar chart and line chart. Purple bars represent each planet’s diameter in kilometers, while a yellow curved line with dots indicates orbital period in days. The visualization is built with D3 v7 using SVG rendering, and it loads planetary data from a remote CSV file. It uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axes, and `d3.line` with `d3.curveMonotoneX` to draw the line.

Solar_System_Scatter_Plot

This scatter plot displays the relationship between the orbital period and diameter of planets, with each point colored by its base planet name and accompanied by a legend. The visualization uses D3 v7 to load CSV data, apply linear scales, render SVG axes and circles, and generate an ordinal color scale with a category palette. The data is sourced from a GitHub gist containing planetary measurements.

Solar_System_Multi_Series_Chart

This mixed-series chart compares planetary diameter (bar) and orbital period (line) for 15 objects. A dual-axis layout uses a left scale for diameter and a right scale for orbital days, with the line positioned at bar centers. Built with D3 v7, it loads CSV data via `d3.csv`, applies `d3.scaleBand` and `d3.scaleLinear`, and renders SVG bars, a `d3.line` with `curveMonotoneX`, and circles. A legend distinguishes the metrics.

SolarSystem_BarGraph

This scatter plot visualizes the diameters of planets and moons, with each dot colored by its base planet and labeled with emoji icons. The chart uses a D3.js v7 SVG rendering, with a band scale on the x-axis for categorical names and a linear scale on the y-axis for diameter in kilometers. Data is loaded from a CSV file hosted on GitHub, and tooltips provide details on type, diameter, and moon count for each celestial body.

Solar_System_Bar_Graph

A bar chart displays the diameters of planets in the solar system, sourced from a CSV dataset hosted in a GitHub gist. The chart uses D3.v7 to map planet names along the x-axis and diameter values on the y-axis, with bars colored by planet type and tooltips revealing additional attributes like type and moon count. The static, SVG-based visualization is rendered without animation, featuring a clean, bordered bar style, axis labels, and a legend.

Solar_System_Scatter_Plot

This scatter plot visualizes the diameters of planets and their moons, with each dot colored by its base planet name and labeled with an emoji on the x-axis. The visualization uses D3.js v7 to load CSV data from a GitHub gist, render an SVG with d3.scaleBand and d3.scaleLinear axes, and display tooltips showing type, diameter, and moon count. Hovering over a dot reduces its opacity to highlight the data point.

Cars_Model

This example shows the diameters of the first 12 planets from a CSV dataset as a bar chart, with planet names on the x-axis and diameter in kilometers on the y-axis. Bars are rendered in SVG using d3.select and d3.csv, with d3.scaleBand and d3.scaleLinear mapping the data. Axes are drawn via d3.axisBottom and d3.axisLeft, while hover effects change bar color to orange. The chart loads data from a gist URL and includes rotated x-axis labels for readability.

Car_Models

This interactive bar chart visualizes letter-frequency data loaded from a CSV file, highlighting selected bars through color and opacity changes. Built with React 19 and D3 v7, it uses `scaleBand` and `scaleLinear` for axes, `ResizeObserver` for responsive sizing, and D3 selections with `join` for rendering. Clicking a bar toggles its selection state, dimming non-selected bars to emphasize the chosen category.

Cars

This combined bar and line chart visualizes the top 15 Indian cricketers by runs, with bars representing total runs and a line overlaying their batting average. The chart uses two y-axes to accommodate the different scales of the data, sourced from the provided CSV file. Built with D3 v7, it employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for both y-axes, and custom gridlines. Tooltips on bars and line points reveal exact values, with hover effects highlighting individual data points.

Cars_Model

This horizontal bar chart shows the price of ten car models, sorted from most to least expensive. The visualization uses a categorical color scale and labels each bar with its currency value. The React app uses D3's `scaleBand`, `scaleLinear`, and `scaleOrdinal` APIs for layout and color, loads a CSV from a GitHub gist via `d3.csv`, and renders data with SVG rectangles and text elements.

Oct 16, 2025

Cars

A horizontal bar chart displays the average price of 2011 car models grouped by make, sorted from highest to lowest average price. The visualization uses D3 v7 with SVG rendering, loading data from a remote CSV file via d3.csv, then aggregating prices with d3.group and d3.mean. Bars are rendered as SVG rect elements with a cyan fill that transitions to orange on hover, supported by an interactive tooltip showing precise values. Axis labels and rotated tick text clarify the car make categories and price scale in euros.

Oct 16, 2025

Solar_System

This example demonstrates loading and parsing CSV data using D3.js v7, fetching planetary data from a GitHub-hosted CSV file. After loading, it displays a summary of the dataset—including approximate size, row count, and column count—and renders the first five records in an interactive HTML table. The table features zebra striping, a sticky header with gradient background, hover effects with accent bars, and right-aligned numeric columns, all styled through custom CSS. The implementation uses `d3.csv()` for parsing and D3’s selection and joining methods (`selectAll`, `data`, `join`) to build the table structure dynamically. A loading message and error handling are included, with the error state turning the message container red.

Oct 3, 2025