Skip to main content
Log in
T

TejasriKari@my.unt.edu

@kari-sri·14 public vizzes

Loading thumbnail…

ICE 8

A collapsible tree diagram displays hierarchical data loaded from a remote JSON file, with nodes rendered as circles and labels connected by curved paths. Users can click any node to expand or collapse its subtree, triggering smooth 750ms transitions that reposition nodes and redraw links. The D3.js v6 code uses the `d3.tree` layout, `d3.hierarchy`, and custom diagonal path functions, with SVG elements animated via `transition()` and `attrTween`-style updates. Nodes initially collapse after the second level, showing partially expanded structure.

Apr 2, 2025
Loading thumbnail…

Line chart

This line chart visualizes the relationship between Age and Monthly Income, using smooth curve interpolation to connect data points sourced from an external CSV file. The visualization includes labeled axes for both variables and a tooltip that appears on hover, displaying the specific values of each data point. Built with D3 v7, the chart employs d3.line with curveMonotoneX, d3.axisBottom, and d3.axisLeft to render the SVG elements, with interactive circle markers that respond to mouse events for enhanced data exploration.

Apr 2, 2025
Loading thumbnail…

Area Chart

This example shows how a hovering cursor over an area chart reveals the underlying data point for that year. The chart visualizes the relationship between age and monthly income using a smooth, semi-transparent blue area. Built with D3.js v7, it renders to an SVG canvas, with the area's path created via `d3.area` and its curve smoothed using `d3.curveMonotoneX`. Interactive tooltips appear on mouseover, displaying the exact year and sales values, with the code also incorporating standard D3 axes and scales for plotting.

Apr 2, 2025
Loading thumbnail…

Fork of Area Chart

This fork of a D3 v7 area chart example displays two linked visualizations: a green line chart and a red area chart, both plotting age against monthly income. The code loads CSV data from a GitHub gist, filters invalid entries, and sorts by age before rendering smooth monotone curves on separate SVG elements. Interactive tooltips appear on mouseover of the line chart’s circles, showing the precise age and income values. Both charts share identical linear scales, axes, and margins, with the area chart using the same monotone curve for its filled region.

Apr 2, 2025
Loading thumbnail…

Pie chart

This pie chart displays employee attrition proportions from a CSV dataset, showing the distribution between two categories. The visualization uses D3 v7’s `d3.pie` and `d3.arc` to generate SVG path segments, with a color scale mapping category labels to distinct hues. A custom tooltip appears on mouseover, revealing exact counts, while a legend with colored rectangles and text labels identifies each slice. Data aggregation relies on `d3.rollup` to count occurrences by the Attrition field, and the chart is rendered at a fixed 500x500 pixel SVG size with a centered group transform.

Apr 2, 2025
Loading thumbnail…

Scatter Plot

A scatter plot displays the relationship between age and monthly income for employees in a dataset loaded from a CSV file. Each circle represents an employee, with position determined by the `d3.scaleLinear` scales for age and income. Hovering reveals a tooltip with exact values. The visualization uses D3 v7 to append SVG circles, axes, and labels, with data parsed from a remote CSV source.

Apr 2, 2025
Loading thumbnail…

Fork of Internet Area chart

This example displays a pie chart of population distribution by region, with each slice labeled and colored according to its region. The visualization loads a CSV dataset from a GitHub gist using the `d3.csv` load function. It constructs the chart using D3.js v6, employing the `d3.pie()` and `d3.arc()` generators to create the pie slices. The `d3.scaleOrdinal` scheme provides categorical colors, and the SVG output is rendered within a 500x500 pixel canvas. The chart's labels are positioned using the arc centroid calculation.

Apr 2, 2025
Loading thumbnail…

Line Chart

This example shows a line chart tracking score trends over time, using a blue stroke to connect data points across linear axes for time and score. It loads tab-separated data from a remote GitHub Gist via `d3.tsv`, parses the numeric fields, and renders the visualization with `d3.axisBottom` and `d3.axisLeft`. The line is drawn using `d3.line` with SVG `<path>` elements, while axis labels are added as SVG `<text>` nodes with rotated and anchored positioning.

Apr 1, 2025
Loading thumbnail…

Bar chart

This bar chart displays the total score for several categories using vertical bars, with each category labeled on the x-axis and the numeric score on the y-axis. The data is loaded from a remote TSV file via `d3.tsv`, then processed and added to the SVG canvas. The chart is built with D3 v6, using `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the numeric axis, with bars drawn as SVG rectangles. Hovering over a bar changes its fill from steelblue to darkblue using CSS.

Apr 1, 2025
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between Subject Scores and Team Scores, with each point colored by its subject score and hover interactions revealing exact values via a tooltip. The visualization uses D3 v6 to load TSV data from a GitHub gist, apply linear scales for both axes, and render SVG circles. Grid lines aid readability, while axis labels clarify the metrics. The code leverages `d3.tsv`, `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeCategory10`, and `d3.axisBottom`/`d3.axisLeft` for chart construction.

Apr 1, 2025
Loading thumbnail…

Fork of STUDENT'S SPORTS DATA VIZ

This visualization displays student test scores across favorite subjects, combining an animated orange bar chart with a static skyblue overlay showing average scores per subject. The code loads tab-separated data from a GitHub gist via `d3.text`, parses it into objects, and uses `d3.rollup` to compute subject means. It renders SVG bars with transitions, axes via `d3.axisLeft` and `d3.axisBottom`, and includes hover tooltips using D3 event handlers. The chart animates bars rising from the baseline using `.transition()`, and tooltips display individual subject and score data.

Mar 26, 2025
Loading thumbnail…

STUDENT'S SPORTS DATA VIZ

This scatter plot visualizes the relationship between students' subject scores and team scores. Each data point is rendered as a circle, with blue circles animating in from a zero radius via a D3 transition, and hovering turns a point red while displaying a tooltip with both scores. The visualization uses D3 v7 scales and axes (d3.scaleLinear, d3.axisBottom, d3.axisLeft) to map the tab-separated dataset fetched with d3.text. SVG elements provide the interactive chart, including animated point entry and mouse-based interactivity.

Mar 26, 2025
Loading thumbnail…

STUDENT'S SPORTS DATA VIZ

This example displays a data grid for student sports records, showing how table data can be filtered, refreshed, and re-rendered in real time. The visualization uses the `AgGridReact` component from AG Grid to present row data and column definitions, with `gridApi.setRowData` and `gridApi.setFilterModel` enabling dynamic dataset updates based on user selection or pivot generation. The code conditionally transforms input JSON data using a custom `processData` function, switching between raw rows and a pivot table view depending on the selected line of business, and assigns stable row IDs through `getRowId` when enabled.

Mar 26, 2025
Loading thumbnail…

ICE4-DORAEMON

This example uses D3.js v7 to draw and animate a full-screen SVG portrait of Doraemon against a light orange background. The character is composed from basic SVG shapes—circles for the head, eyes, nose, hands, and legs, ellipses for the pupils, and a path for the smile. The rendering is entirely procedural, with positions calculated relative to the window dimensions. Animation is driven by repeated `transition` calls on the eye ellipses to create blinking, while the head and the "HEY DORAEMON!!!" text bounce by cycling their vertical position through `transition.attr`.

Feb 24, 2025