kanaparthieshitha@gmail.com

@Eshitha-29·15 public vizzes

Fork of ice 8_tree

This visualization displays a hierarchical tree of programming concepts as a structural diagram, mapping parent-child relationships from a data file. It uses a radial layout to position nodes, with connections drawn as lines between linked items. The implementation relies on d3.stratify for data organization and d3.tree for layout computation, while rendering all elements as SVG. Node colors encode depth levels, and labels identify each node. A legend clarifies the color mapping for the four hierarchical levels.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of ice 8_network

This interactive network diagram visualizes relationships between programming-related nodes, with circles colored by group and labeled with node IDs. The layout is computed using d3.forceSimulation with d3.forceLink, d3.forceManyBody, and d3.forceCenter forces, updating line, circle, and text positions on each tick. Node and link data are loaded from remote CSV files via d3.csv. The SVG canvas is titled “Programming Network,” with nodes rendered as circles and connections as gray lines.

Apr 12, 2026

Loading thumbnail…

ice 8_country

This example shows a choropleth world map of population by country, with darker blue shades indicating higher values and a gradient legend on the right. It uses d3.geoNaturalEarth1 and d3.geoPath to project and render country boundaries from a TopoJSON world-atlas dataset. Population values are loaded via d3.csv from a GitHub gist and mapped to a d3.scaleSequential with the interpolateBlues interpolator. Labels display three-letter country abbreviations, while d3.axisRight and a linearGradient define the legend.

Apr 12, 2026

Loading thumbnail…

ice 8

This example displays a static world map using a Natural Earth projection, with countries rendered as filled green shapes with white borders. The visualization loads geographic data from the world-atlas package via `d3.json`, then converts it to GeoJSON features using the `feature` function from `topojson-client`. It draws the map with `d3.geoPath` and the `d3.geoNaturalEarth1` projection, positioning the map with scale and translate parameters. The SVG output is generated through D3's selection and append methods.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of Fork of Fork of ice7_4

This scatter plot shows the relationship between website visits and customer satisfaction, with points colored by category and a legend identifying each group. The chart is built using a reusable D3.js function that takes configurable accessors and labels for the x-value, y-value, and color encoding. It loads CSV data from a GitHub gist, filters out rows with missing categories or non-numeric values, and renders axes, circles, and labels as SVG elements using d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/axisLeft.

Mar 29, 2026

Loading thumbnail…

Fork of Fork of Fork of ice7_3

This pie chart displays revenue distribution by category, with slices labeled directly and a legend to the right. Built with D3 v7, it loads CSV data from a GitHub gist, aggregates revenue using d3.rollup and d3.sum, and renders SVG paths via d3.pie and d3.arc. A d3.scaleOrdinal with the Tableau10 color scheme maps categories to colors, while text elements label each slice.

Mar 29, 2026

Loading thumbnail…

Fork of Fork of ice7_2

This example shows a line chart of revenue aggregated by product category from a CSV dataset. D3.js (v7) loads the data, rolls up categories, and sums their revenue. It renders an SVG with axes, a steelblue polyline, and orange data points. The code uses `d3.scalePoint`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to draw the visualization.

Mar 29, 2026

Loading thumbnail…

Fork of ice7

This fork of ice7 displays an area chart of revenue by product category, with a black line overlay and circular point markers. The visualization aggregates revenue data from a CSV file using `d3.rollup` and `d3.sum`, then maps categories with `d3.scalePoint` and revenue with `d3.scaleLinear`. The SVG rendering uses `d3.area`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft`, with rotated x-axis labels for readability.

Mar 29, 2026

Loading thumbnail…

multi line

This multi-series line chart displays fitness activity trends over 160 days, comparing steps count, calories burned, and workout minutes on a single scaled y-axis. Built with D3.js v7, the visualization renders three distinct colored lines—purple, blue, and green—from a CSV dataset, with data points filtered to every tenth day for clarity. The SVG output includes axis labels, a legend, and gridlines, using D3's linear scales and line generators. Steps and workout minutes are normalized to align with calorie values.

Mar 8, 2026

Loading thumbnail…

ice 6 multi line

This visualization combines a bar chart of daily step counts with a line chart of calories burned over a 160-day fitness activity period. The bars, rendered as SVG rectangles with alternating purple shades, show steps on the left y-axis, while the green line with labeled points tracks calories on the right y-axis. The code uses D3 v7 with `scaleBand` for the x-axis, `scaleLinear` for both y-axes, and a `d3.line` generator to connect data points sampled every tenth day from the CSV dataset.

Mar 8, 2026

Loading thumbnail…

Fork of D3 Starter barrr

This visualization displays a horizontal bar chart highlighting the top 10 days with the highest step counts from a 160-day fitness activity dataset. Each bar is colored with a distinct pastel hue and includes a numeric value label at its tip. Built with D3 v7, the code loads CSV data via `d3.csv`, sorts and filters the records, then uses `d3.scaleBand` and `d3.scaleLinear` to position bars and axes. The SVG render includes custom axis labels and a bold title.

Mar 8, 2026

Loading thumbnail…

Fork of ice 6 bar

This bubble chart from the D3.js gallery displays the relationship between daily step count ranges and workout intensity levels, using point color to indicate whether calorie burn is high or low. The visualization plots one point per unique combination of the three categorical variables, derived from a fitness activity dataset. The code uses `d3.csv` to load the data, `d3.scalePoint` for positioning on discrete axes, and `d3.scaleOrdinal` for color encoding. Custom category logic bins steps, workout minutes, and calories into defined groups, while D3's SVG rendering provides the axes, labels, and legend.

Mar 8, 2026

Loading thumbnail…

ice 6

This visualization shows the relationship between daily step ranges and workout intensity levels, with dot color indicating whether calories burned are high or low. The chart uses a categorical scatter plot layout, mapping 160 days of fitness activity data from a CSV file. It filters to unique combinations of step range, workout level, and calorie level for clarity. The D3.js v7 code uses `d3.scalePoint` for both axes, `d3.scaleOrdinal` for coloring, and SVG circles rendered with `d3.axisBottom` and `d3.axisLeft`.

Mar 8, 2026

Loading thumbnail…

cs tools sdv eshitha

This interactive dashboard demonstrates loading and parsing a CSV file with D3. It fetches data from a GitHub Gist using `d3.csv` and displays it in a searchable HTML table. The interface includes a summary card that calculates aggregate statistics from the data, an SVG icon, and a live search input that filters the table rows. The visualization renders entirely as styled HTML and SVG elements, with a light, clean aesthetic.

Feb 27, 2026

Loading thumbnail…

eshitha ice5

This interactive dashboard loads a CSV dataset of CS tool usage from a GitHub gist and presents a summary with D3.js v7. It displays total row counts, column names, and category counts using `d3.csv`, `d3.autoType`, and `d3.rollup`. The page renders a static SVG icon and uses standard DOM manipulation to show the first five raw rows in a preview panel.

Feb 27, 2026