S

srinathkarumuru@my.unt.edu

@Srinath0606·23 public vizzes

Loading thumbnail…

Fork of Map

This choropleth map displays a "Literary Population Score" for selected countries, using a blue sequential color scale to represent values from 0 to 100. It loads world geometry from a TopoJSON file via `d3.json` and converts it to GeoJSON features using topojson, then draws the countries with `d3.geoPath` and a Mercator projection. Country fills are determined by looking up three-digit numeric ISO codes in a `Map`, with tooltips showing names and scores. A vertical legend uses `d3.scaleSequential` and `d3.interpolateBlues` to explain the color mapping.

Loading thumbnail…

Fork of Network

This network visualization maps relationships among six Game of Thrones characters, with links representing interactions and line thickness encoding connection strength. Nodes are colored by house affiliation using a categorical color scale. The code creates a force-directed graph using `d3.forceSimulation` with link distance, charge repulsion, and centering forces. SVG circles and text labels render the nodes, while `d3.drag` enables interactive repositioning. Link stroke widths map relationship values through `d3.scaleLinear`, and the layout updates continuously via the simulation's tick event.

Loading thumbnail…

Fork of Tree

A vertical family tree visualizes four generations of Game of Thrones houses, with color-coded nodes by depth and labeled leaf descendants. It uses the D3 v7 tree layout with `d3.hierarchy` and `d3.tree()` to compute positions, rendering SVG paths via `d3.linkVertical` for parent-child edges. Circular nodes and bold text labels are appended as SVG groups, with a `scaleOrdinal` mapping depth to thematic colors. The static example emphasizes clear hierarchical spacing through a fixed 1200px canvas width.

Loading thumbnail…

line chart

This line chart visualizes monthly customer spending across twelve months, with values rising from $200 in January to $550 in December. It uses D3.js v7 with an SVG rendering approach, employing `d3.scaleBand` for the monthly x-axis and `d3.scaleLinear` for the spending y-axis. The chart draws a monotone curve line via `d3.line()` with `curveMonotoneX`, marks each data point with circles, and labels the axes "Month" and "Spending ($)" using `d3.axisBottom` and `d3.axisLeft`. The sample dataset is defined explicitly in `index.js` and passed to a global `renderLineChart` function.

Loading thumbnail…

area chart

This area chart visualizes monthly customer spending over a year, with a smooth monotone curve connecting values from January through December. The D3.js v7 code uses a band scale for months, a linear scale for spending amounts, and the `d3.area()` generator with `curveMonotoneX` to fill the region beneath the trend line in a semi-transparent teal. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with labels for month and spending in dollars. The rendering is SVG-based, driven by the sample dataset defined in `index.js`.

Loading thumbnail…

pie chart

A pie chart visualizes customer spending across four categories—Food, Clothing, Electronics, and Entertainment—using quantitative values. Built with D3.js v7, it renders an SVG slice for each category, sized by its value, with labels positioned at each slice’s centroid. A color scale from `d3.schemeCategory10` and `d3.scaleOrdinal` map categories to fills, while `d3.arc` and `d3.pie` compute the geometry. A separate HTML legend lists each category with its corresponding color and value. The chart uses a fixed 500×500 pixel canvas and is re-rendered by clearing and redrawing the SVG elements.

Loading thumbnail…

Area Chart ICE-7

This area chart visualizes total sales over time, with a semi-transparent steelblue fill beneath a blue line. The chart is built using D3 version 7, loaded from the d3js.org CDN, and rendered as an SVG element with a white background and shadow. The JavaScript file `areaChart.js` draws the area and line paths using D3’s scalable vector graphics APIs, while axis labels are styled with CSS classes. The data source is not specified in the provided code, but the chart’s layout and styling are defined in the HTML and CSS files. The visualization uses D3's standard `svg.path` and `svg.line` elements to encode the trend.

Loading thumbnail…

xyz

This scatter plot visualizes the relationship between a customer's annual income and their spending score, with each circle representing an individual customer. The graphic uses a green fill with partial opacity for the points, making overlapping data visible. The visualization is built with D3.js, using the `d3.scaleLinear` function to map data values to x and y coordinates, and `d3.axisBottom` and `d3.axisLeft` to render the labeled axes. The data is a small embedded JavaScript array containing customer attributes like age, income, and spending score.

Loading thumbnail…

ICE7

This interactive scatter plot visualizes the relationship between sales and profit using a cleaned sales dataset loaded via D3’s `csv` method. It uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and renders circles with SVG. A custom tooltip displays category, sales, and profit values on mouseover. The chart includes axis labels and a title, with data cleaning applied to handle formatting and invalid entries.

Loading thumbnail…

ICE7

This scatter plot maps car engine size against price using the d3.csv loader and a linear scale for each axis. The SVG rendering includes axes formatted with currency ticks and labeled plot areas, with data points drawn as steel-blue circles. The chart filters out rows with invalid or zero values before plotting, and the dataset is loaded from a remote CSV file.

Loading thumbnail…

ICE7

This scatterplot visualizes the Iris dataset, comparing sepal length against sepal width across three species. The chart uses D3.js scales and axes to map the quantitative dimensions, while a color scale distinguishes species, with hover interactions on the legend highlighting corresponding data points through opacity changes. The SVG rendering is built with D3.js selection and join methods, loading data from a CSV file containing Fisher's Iris measurements.

Loading thumbnail…

ICE7

This visualization displays the Iris dataset as a scatter plot, mapping petal width on the x-axis against sepal length on the y-axis using D3 v7. The code loads data from a CSV URL, scales the coordinates with `scaleLinear`, and renders teal circles with a black stroke via SVG. Axes are drawn using `axisBottom` and `axisLeft`, while the chart fills the browser window.

Loading thumbnail…

ICE7

A pie chart shows average sales by outlet location type, aggregating data from a CSV file. D3.js loads the remote dataset, filters invalid entries, groups by location, and computes mean sales values. The visualization uses d3.pie, d3.arc, and d3.rollup to generate slices, with d3.scaleOrdinal mapping colors and d3.sum calculating percentages for labels. A legend identifies each category, rendered as SVG within a 600x500 canvas.

Loading thumbnail…

ICE-7

This visualization is a donut-style pie chart that displays the average item outlet sales aggregated by outlet location type. The chart uses a categorical color scheme to distinguish each location category, with slice labels showing both the category name and its corresponding percentage of total sales. Labels are positioned using arc centroids, and a legend identifies the color-to-category mapping. The implementation relies on D3.js 6.7.0 APIs including `d3.csv`, `d3.rollup`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, processing data from a GitHub-hosted CSV file.

Loading thumbnail…

ICE-7

This pie chart visualizes the average item sales for different outlet location types, aggregated from a CSV dataset. Built with D3.js v7, it uses `d3.rollup` to group and compute means, then renders the result with `d3.pie` and `d3.arc`. The SVG output includes labeled slices colored via `d3.scaleOrdinal` and `d3.schemeSet2`, alongside a legend.

Loading thumbnail…

ice-6

A bar chart displays counts across seven letters (A through G), with bars colored in teal that dim to 40% opacity when a letter is deselected. Clicking a bar toggles its selection, darkening the active bar. The chart is built with React and D3 v7, using `scaleBand` and `scaleLinear` for positioning, `axisBottom` and `axisLeft` for axes with gridlines, and SVG for rendering. Data loads from a CSV file, and a `ResizeObserver` handles responsive dimensions.

Loading thumbnail…

ICE-6

This visualization displays Fisher's Iris dataset as a scatter plot comparing sepal length and sepal width across three species, with color-coded points, interactive legend highlighting, and BBC-inspired styling. Built with D3 v7, it uses scaleLinear for axes, scaleOrdinal for species colors, and modular components including renderScatterPlot and renderLegend. The chart features a responsive layout with margins, axis labels, title, subtitle, and source attribution, pulling data from a GitHub-hosted CSV file. Points are rendered as SVG circles with configurable radius, opacity, and stroke properties.

Loading thumbnail…

ICE - 6

This visualization displays the Iris dataset, comparing sepal length against sepal width for three species of iris flowers, with each species color-coded according to a BBC-inspired purple color theme. The scatter plot is rendered as SVG using D3 v7, leveraging `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical coloring, and `d3.axisBottom` and `d3.axisLeft` for tick marks. An interactive legend allows users to filter points by species through hover effects. The data is loaded from a CSV file, and the visualization includes a title, subtitle, and source attribution styled with custom CSS.

Loading thumbnail…

ice - 6

This example shows a simple bar chart of letter frequencies, with clickable bars that highlight the selected letter while dimming others. The chart is built with D3 v7 inside a React component, using `scaleBand` and `scaleLinear` for positioning, `axisBottom` and `axisLeft` for axes, and SVG `rect` elements for bars. Data comes from a local CSV file loaded via `d3.csv`. A `ResizeObserver` in `useDimensions` tracks the container size, and transitions animate bar color and opacity on selection.

Loading thumbnail…

ICE-6

A bar chart displays total sales amounts by region, with bars sorted in descending order. The visualization is built with D3.js v7 and rendered as an SVG within a React framework. It uses `d3.csv` to load data, `d3.rollups` to aggregate sales by region, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars are drawn using SVG `rect` elements, with a tooltip-free design and axis labels. The code is structured modularly with functions like `renderBars` and `renderTitle`, and includes interactive element selection through click handlers.

Loading thumbnail…

ICE5

This example shows an interactive bar chart of letter frequencies, where clicking a bar highlights it and dims the others, with a title reading "Data Visualization" above the plot. Built with React and D3 v7, it uses `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for gridlines and labels, and a `ResizeObserver` to adapt the SVG to its container. Data loads from a local CSV file via `d3.csv`, and bar styling transitions smoothly on hover and selection.

Loading thumbnail…

ICE5

This visualization displays a summary of sales data, including total sales, average sale amount, total quantity sold, and counts of unique regions and product categories. It presents a full data table alongside a bar chart that aggregates total sales by region. The D3 v7 code loads CSV data from a remote URL and uses d3.autoType for parsing and d3.rollup for grouping. The chart uses d3.scaleBand and d3.scaleLinear for axes, rendering bars as SVG rectangles.

Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive dashboard displays sales data loaded from a cleaned CSV file hosted on GitHub. It provides a dataset summary, a full HTML table of all rows, and an SVG bar chart showing total sales by region. Built with D3 v7, it uses `d3.csv` and `d3.autoType` for parsing, `d3.rollup` and `d3.sum` for aggregations, and `scaleBand`/`scaleLinear` with SVG `rect` elements for the chart.