HariniPotla@my.unt.edu

Network

The visualization displays a network of six Texas cities connected by routes, rendered as a force-directed graph on an SVG canvas. Nodes are green circles with labels positioned below, while gray lines represent links between cities. The code uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter forces to calculate positions, with d3.drag enabling interactive node movement. A tick handler updates link coordinates, node positions, and label placement, allowing users to rearrange the network dynamically.

Apr 12, 2026

tree

This example shows a hierarchical tree of programming languages, grouping frontend, backend, and data science categories with their child technologies. Developed with D3 v7, it uses `d3.hierarchy` and `d3.tree` to compute node positions, then renders curved `d3.linkVertical` paths for connections and SVG circles for nodes. Node colors vary by depth—orange for the root, teal for categories, and blue for leaves—with text labels above each circle. The static dataset is hard-coded in the script, and the output is a 900x500 SVG visualization.

Apr 12, 2026

Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of daily sales data, with light blue area fill beneath the points and red circles marking each data value. It loads CSV data from a GitHub gist via `d3.csv`, converts the fields to numbers, and uses `d3.scaleLinear` for both axes with `d3.axisBottom` and `d3.axisLeft` for tick marks. The reusable `scatterPlot` module defines configurable accessors for width, height, margins, and radius, though the main script directly builds a static SVG area chart.

Fork of Fork of Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot displays sales data over time, with a line connecting red circular markers on a steelblue stroke. The code uses the D3.js v6 API, including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line`, to load CSV data and render an SVG. It includes axis labels and a custom Share Tech font. A separate `scatterPlot.js` module defines a reusable chart function with setters for configuration.

Fork of Fork of Reusable D3 Scatter Plot

A donut chart displays sales values by day, with each slice labeled by its corresponding day number and a legend mapping colors to days. Built with D3 v6, the visualization uses `d3.pie` and `d3.arc` to generate slices, `d3.scaleOrdinal` with `schemeCategory10` for coloring, and SVG `path` elements for rendering. Data is loaded from a CSV via `d3.csv`, with values parsed as numbers. A separate, reusable `scatterPlot` module using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` is also included, though not instantiated in the main script.

Fork of CV: Scatter Plot

This interactive scatter plot displays the classic Iris dataset, plotting sepal length against sepal width for 150 flowers across three species. Built with React and D3 v7, the visualization renders circles as SVG elements, with clicking a point highlighting it by turning it white with a black stroke. The code uses `d3.scaleLinear` and `d3.extent` to create scales, `d3.axisBottom` and `d3.axisLeft` for axes, and a `ResizeObserver` to make the chart responsive to its container.

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot that maps daily visitors on the x-axis against sales on the y-axis, with each point sized by a fixed radius. The visualization loads CSV data from a GitHub gist, parsing numeric fields for day, sales, profit, orders, and visitors. Built with D3 v6, the code uses scaleLinear for axes, extent to compute domains, and axisLeft/axisBottom for rendering ticks. The scatterPlot function follows a reusable pattern, making it configurable via method chaining for width, height, margins, and data accessors, while SVG circles are joined to the DOM using selectAll and data.

ICE6-combinedchart

This combined chart displays sales as steelblue bars and profit as a red line across 28 days, using a band scale for the x-axis and a linear scale for the y-axis. The code loads CSV data via `d3.csv`, converts numeric fields with unary plus operators, and renders the visualization with SVG. It constructs the bar layer with `selectAll('rect')` and the line path using `d3.line`, then adds axes through `d3.axisBottom` and `d3.axisLeft`. The chart highlights the relationship between daily sales volume and profit trends.

ICE6-multiline

This multi-series line chart displays Sales and Profit trends over time, with two lines drawn in steel blue and green on a shared axis. The visualization uses D3.js v7, loading CSV data from a GitHub gist and mapping numeric Day, Sales, and Profit fields. The code employs `d3.csv`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to construct the SVG rendering, including labeled axes and a title.

ice-3-scatterplot

This scatter plot visualizes the relationship between visitors and sales, with each orange circle positioned according to its data values. The chart uses D3.js version 7 to load CSV data, applies linear scales for both axes, and renders SVG circles. The code explicitly converts visitor and sales values to numeric types, adds axis tick marks using `d3.axisBottom` and `d3.axisLeft`, and includes a title text element at the top of the visualization.

ICE6-barchart

This example shows daily sales performance as a static bar chart, with each bar representing one day’s sales value in steel blue on an SVG canvas. It loads CSV data from a GitHub gist, parsing numeric fields for Day, Sales, Profit, Orders, and Visitors. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Only every fifth day is labeled on the x-axis to reduce clutter, and titles for the chart and axes are added as SVG text elements.

Fork of Fork of HTML Starter

This example loads a personal expense CSV and displays a summary of its structure, including row count, column count, and column names, in an HTML div. It then renders two static SVG shapes—a steelblue rectangle and an orange circle—on a separate SVG canvas. The code uses the Fetch API to retrieve the CSV, d3.csvParse to parse it, and basic D3 selections and attribute setters to draw the shapes. The visualization serves as a minimal starter template for combining textual data summaries with simple SVG graphics.

Feb 27, 2026

Fork of HTML Starter

This example displays a static page with the text "Hello HTML!" centered and enlarged to a huge size. The page is built with a basic HTML structure that links a CSS stylesheet and an external JavaScript module. The stylesheet defines the visual styling for the message, while the JavaScript file simply logs "hello world" to the console. The code uses no data sources or visualization libraries, serving as a minimal starter template.

Feb 27, 2026