U

Uday Kiran

@Duvvala-Uday-Kiran·31 public vizzes

Loading thumbnail…

Ice 8 network graph

An interactive network graph visualizes an organization chart with force-directed layout. Nodes represent employees, colored distinctly for the CEO, managers, and other staff, with links showing reporting relationships. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces to position nodes, while `d3.drag` enables interactive repositioning. Data loads from a CSV file, and nodes and links render as SVG circles, lines, and text labels, updating positions on each simulation tick.

Loading thumbnail…

Ice 8 network

This example shows an interactive organizational hierarchy as a force-directed network. A CSV file supplies the parent-child relationships, which d3.csv loads and converts into nodes and links. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position the nodes, which are rendered as colored SVG circles based on role (CEO, Manager, or other). Labels accompany each node, and a drag behavior lets users reposition elements, with the simulation updating positions on each tick.

Loading thumbnail…

Fork of Ice 8

This example shows an organizational hierarchy as a tree diagram, with a blue rectangular root node for the CEO, green circles for department heads, and orange circles for team members. It uses D3 v7’s `d3.stratify` to convert CSV data into a hierarchy, `d3.tree` for layout, and `d3.linkHorizontal` for curved edges. Labels are positioned differently based on depth, and node colors encode organizational level.

Loading thumbnail…

Ice 8

This interactive organizational chart visualizes a company hierarchy using a tree layout, with a rectangular root node for the CEO, green circular nodes for department heads, and orange circles for team members. The code builds the tree using D3.js v7’s `d3.tree()` and `d3.stratify()` APIs, loading data from a CSV file hosted on GitHub Gist. It renders the structure as SVG paths and shapes, with horizontal curved links connecting parent and child nodes based on depth-based styling.

Loading thumbnail…

ICE 7 Area chart

This area chart visualizes daily temperature readings for seven days in April 2024, using filled steelblue regions to emphasize the magnitude of values over time. The chart is rendered as SVG using d3.v6, with d3.scaleTime for the date axis and d3.scaleLinear for the temperature axis. The area path is generated with d3.area, connecting points with y0 set to the baseline. Both axes are labeled, with rotated date ticks for readability, and temperature values are shown in degrees Celsius.

Loading thumbnail…

ICE 7 Area chart

This area chart displays daily temperature readings over a one-week period in April 2024, with a steel-blue filled region beneath the line emphasizing the values. The visualization uses D3 v6 with an SVG rendering approach, employing `d3.area()` to generate the filled path, `d3.scaleTime()` for the date axis, and `d3.scaleLinear()` for the temperature axis. The chart includes rotated x-axis labels and axis titles for Date and Temperature (°C), with the area set to 50% opacity. Sample data is embedded directly in the script.

Loading thumbnail…

line chart ice 7

This line chart displays daily temperature readings over a week, using a steel-blue line with crimson dots to mark each data point. The visualization plots dates on the x-axis and temperatures on the y-axis, with labels for both dimensions. Built with D3 v6, the code uses d3.timeParse to convert date strings, d3.timeFormat for axis tick labels, and d3.scaleTime and d3.scaleLinear for the coordinate systems. The chart is rendered as SVG, with axis text rotated for readability.

Loading thumbnail…

ICE-7 Line chart

This line chart displays daily temperature readings for seven days in April 2024, using a steel-blue polyline and crimson dot markers to highlight individual data points. The visualization plots temperature in degrees Celsius against parsed dates, with rotated x-axis labels for readability. Built with D3 v6, it uses `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` for ticks. The SVG renderer also adds axis titles for both date and temperature.

Loading thumbnail…

ICE-7 line chart

This line chart displays the relationship between Weight (kg) and Price (USD) from a Bitcoin dataset, with weight on the x-axis and price on the y-axis. The visualization uses D3.js v7 to load the CSV data, then applies linear scales (`d3.scaleLinear`) and axis generators (`d3.axisBottom`, `d3.axisLeft`). A line generator (`d3.line`) creates the steelblue path connecting sorted data points. The SVG rendering includes labeled axes and a fixed 800x500 pixel canvas with margins.

Loading thumbnail…

Ice 7 line chart

A line chart tracks Bitcoin’s daily closing price over time, with a single steelblue path rising and falling across an SVG canvas. The x-axis encodes dates using `d3.scaleTime`, while the y-axis uses `d3.scaleLinear` for USD values. Data loads from a remote CSV, parsed with `d3.timeParse` and rendered via `d3.line` and `d3.axisBottom`/`d3.axisLeft`. The chart includes labeled axes for date and price, and handles malformed rows with the `defined` method.

Loading thumbnail…

ICE-7 line chart

This line chart displays the price (USD) of grocery items from an ICE-6 CSV dataset, using D3.js v7 with SVG rendering. It maps item names on the x-axis and price values on the y-axis, scaling the linear y-axis with `d3.scaleLinear` and `d3.max` for the domain. A categorical band scale (`d3.scaleBand`) positions items, and x-axis labels appear at the band centers. The chart is created by loading external CSV data via `d3.csv`, parsing numeric columns, and generating a path with `d3.line` while adding axes and labels through `d3.axisBottom`, `d3.axisLeft`, and SVG text elements.

Loading thumbnail…

Line Chart ice 7

This line chart displays Bitcoin prices from March 2025, using a monotone curve to smoothly connect daily price points over time. The visualization includes a grid with dashed horizontal lines, a formatted y-axis showing price values with comma separators, and rotated date labels on the x-axis for readability. Built with D3 v7, the chart loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and renders the path using `d3.line` with `d3.curveMonotoneX`. The SVG output applies a brown stroke to the line and uses time and linear scales to map data to screen coordinates.

Loading thumbnail…

line chart ice 7

This line chart displays website traffic by source, showing the number of visitors for each source alongside a monotone-smoothed trend line. The implementation uses D3 v7 with an SVG canvas, reading data from a CSV file. The visualization employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for labeled axes with rotated source labels, and `d3.line` with `d3.curveMonotoneX` to render the smoothed path. Gridlines are added via a dashed `d3.axisLeft` layer.

Loading thumbnail…

line chart ice 7

This line chart visualizes website traffic by source category, plotting visitor counts for each named website source and connecting them with a smooth monotone curve. The SVG chart uses D3 v7 to load CSV data from a GitHub gist, with a linear x-scale representing categorical indices and a linear y-scale for visitor values. The code applies d3.axisBottom and d3.axisLeft for rotated and formatted ticks, includes dashed gridlines via a custom grid class, and renders the data-driven line path using d3.line with a curveMonotoneX interpolation.

Loading thumbnail…

Ice 7 line chart

A line chart displays website visitors by source, with visitor counts plotted along the y-axis and source categories along the x-axis. The visualization uses d3.v7's `d3.csv` to load data from a remote gist URL, `d3.scaleLinear` for both axes, and `d3.line` to generate the steelblue path. Axis labels are rendered with `d3.axisBottom` and `d3.axisLeft`, and source labels are rotated 40 degrees. The chart title and axis titles are added as SVG text elements.

Loading thumbnail…

ice 7 pie chart

A pie chart displays the distribution of website traffic by traffic source, with each slice labeled by source name and visitor count in parentheses. The code fetches a CSV file from a GitHub gist, parses the data, and renders the visualization using Chart.js on an HTML canvas element. Twelve predefined semi-transparent colors differentiate the slices, and the legend is positioned on the right side with a title indicating visitors are measured in thousands.

Loading thumbnail…

Fork of ice 7 pie chart

This pie chart shows the distribution of website traffic by source, displaying each source name next to its visitor count in the legend. The chart is rendered on an HTML5 Canvas using Chart.js, which fetches its data from a remote CSV file hosted as a GitHub Gist. The dataset includes visitor counts per source, and the JavaScript code parses the CSV and creates a pie chart with a semi-transparent color palette and a legend positioned on the right.

Loading thumbnail…

ice 7 pie chart

This pie chart visualizes the distribution of website traffic by source, with visitor counts in thousands. It fetches data from a CSV file hosted on GitHub and renders the chart using Chart.js on an HTML canvas element. The chart displays twelve labeled categories with distinct translucent colors and a legend positioned on the right side. The code retrieves the data asynchronously via the `fetch` API, parses the CSV rows, and configures the pie chart with responsive settings and a descriptive title.

Loading thumbnail…

pie chart ice 7

This pie chart visualizes website traffic source distribution using a React component with D3.js v5. It loads CSV data from a GitHub gist and renders slices with `d3.pie` and `d3.arc`, colored by `d3.scaleOrdinal` with `schemeCategory10`. Hovering a slice displays a tooltip via D3 selection showing the source, visitor count, and percentage. Labels are positioned using arc centroids, with a legend omitted. The chart updates reactively through React’s `useState` and `useEffect` hooks after asynchronous data loading.

Loading thumbnail…

pie chart ice 7

This pie chart visualization displays website traffic by source, measured in thousands of visitors, with each slice labeled directly on the chart and accompanied by a color-coded legend. The code uses D3 version 6, specifically the `d3.pie()` layout function, `d3.arc()` for defining the pie geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring. Data is loaded asynchronously from a raw GitHub Gist CSV file via `d3.csv()`, with each visitor value converted to a number before being passed to the pie layout. The visualization renders as SVG, with arcs drawn using `path` elements and centroid-based text labels, while the legend is constructed separately using `rect` and `text` elements positioned on the right side of the chart.

Loading thumbnail…

Ice 7 pie chart

This pie chart displays the distribution of website traffic by source, with each slice sized according to the number of visitors and a legend positioned on the right. It loads data from a CSV file using `d3.csv` from the D3 v7 library, then renders the chart on a Canvas element via the external Chart.js library, not through D3’s own rendering APIs. The chart uses a predefined color palette for the slices and includes a title indicating traffic values are in thousands.

Loading thumbnail…

pie chart

A pie chart displays website traffic sources with visitor counts for each source. The visualization loads CSV data using d3.csv from d3.v7, then renders it on a Canvas element via the Chart.js library. Each slice uses a distinct background color with white borders, and the legend appears on the right side. The chart title indicates traffic values in thousands, while the responsive layout adapts to the container size.

Loading thumbnail…

ice 7 pie chart

This pie chart shows the population distribution across US states, with each state represented as a colored slice labeled directly on the chart. It uses d3.csv to load population data, then applies d3.pie and d3.arc generators to compute the slice geometry and render the SVG paths. Colors are assigned via d3.scaleOrdinal with a schemeCategory10 palette, and a separate legend lists all states with their matching colors. Labels are positioned using the arc centroid method, and the visualization is styled with a custom Google Font called Share Tech.

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the relationship between trading dataset attributes, cycling through variable pairs every three seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. The chart animates by dynamically updating its `xValue` and `yValue` accessors, demonstrating the flexibility of a chainable scatter plot function. Data loads from a CSV via `d3.csv` with numeric parsing.

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the relationship between trading dataset attributes, cycling through variable pairs every three seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. The chart animates by dynamically updating its `xValue` and `yValue` accessors, demonstrating the flexibility of a chainable scatter plot function. Data loads from a CSV via `d3.csv` with numeric parsing.

Loading thumbnail…

Ice 7 reusable scatterplot

This reusable D3.js module renders a scatter plot comparing open and close prices from a trading dataset, with each point using blue circles. The chart is created using `d3.scaleLinear` for both axes, with `d3.extent` determining the domain and `d3.axisBottom` and `d3.axisLeft` providing labeled axes. The code exports a configurable `scatterPlot` function that accepts `.x()`, `.y()`, `.width()`, and `.height()` setters, allowing the chart to be re-bound to different data columns. Styling uses a 24px "Share Tech" font.

Loading thumbnail…

Ice 7 reusable scatterplot

This interactive scatter plot displays the Iris dataset, animating through different attribute pairings every two seconds. Built with D3 v6, it uses a reusable scatter plot function that scales axes to the current data extents, renders SVG circles, and updates axis components on each interval. The visualization cycles between petal width, sepal width, petal length, and sepal length on the x-axis, while sepal length remains fixed on the y-axis. Data is loaded from a remote CSV file, with margins and radius configurable through the plot's API.

Loading thumbnail…

Ice 7 scatterplot

This scatter plot analyzes stock trading data by mapping opening prices on the x-axis and closing prices on the y-axis. Each point is colored green for gains and red for losses, with a dashed reference line showing where prices are equal. The visualization uses D3.js v7 with the `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` APIs, loading data from a GitHub Gist CSV file. Interactive tooltips display date, open, close, and price change details on hover.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays monthly sales figures across six retail categories, with each circle’s horizontal position encoding the month, vertical position encoding sales amount, and color distinguishing product types. The visualization uses a reusable custom D3 module that employs `scaleOrdinal` for the categorical x-axis and legend colors, `scaleLinear` for the sales axis, and `axisLeft`/`axisBottom` for tick labels. The SVG output is generated from hardcoded data via the provided `index.js` and `scatterPlot.js` files.

Loading thumbnail…

Pizza

This example uses D3.js version 6 to render an SVG illustration of a pizza. It layers concentric circles for the base, sauce, and cheese, then positions fixed pepperoni slices, draws eight slice-divider lines using trigonometric calculations, and scatters randomly generated chili flakes. The code demonstrates basic SVG element construction, data-driven point placement, and geometric coordinate generation within D3, all composited on a gradient-themed background.

Loading thumbnail…

Pizza

The pizza visualization depicts a stylized pizza built from concentric circles for crust, sauce, and cheese, with five pepperoni slices and a lattice of eight cut lines radiating from the center. Fifteen randomly positioned red dots represent chilli flakes. The code uses d3.select, d3.range, and d3 data joins with SVG circle and line elements to construct the graphic, rendered on a canvas sized 400 by 400 pixels.