kuraakhila9@gmail.com

@kura-akhila·10 public vizzes

ICE8 - Network Graph

The visualization shows a force-directed network graph of celebrity friendships, with each node representing a person and links indicating connections. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Node and link data come from `data.json`, which is loaded with `d3.json()`. Links display arrows via SVG markers, and nodes are draggable circles with white text labels. The layout is rendered in SVG with fixed dimensions of 1100 by 800 pixels.

Mar 28, 2024

Loading thumbnail…

ICE8 - Network Graph

This network graph visualizes social connections among eight individuals, showing friend relationships with directed arrows that point from the source to the target person. The SVG rendering uses D3 v6’s force-directed simulation (`d3.forceSimulation`) with link, charge, collision, and center forces to position nodes dynamically. Interactive drag behavior is implemented using `d3.drag()`, allowing users to reposition nodes while the simulation continues. Nodes display person IDs as text labels, and relationships are encoded as lines with arrow markers, all rendered from a JSON data source containing only friend links.

Mar 28, 2024

Loading thumbnail…

ICE8 - Family Tree

This family tree visualization uses an animated D3.js v6 SVG render to display a multi-generational hierarchy of celebrity names. Node circles are color-coded by generation depth (green, blue, brown, orange) and connected via animated straight-line paths. The tree structure is built using the `d3.stratify()` utility to derive parent-child relationships from an explicit data array, then laid out with `d3.tree()`, with nodes, links, and labels rendered through SVG transitions that animate their appearance.

Mar 28, 2024

Loading thumbnail…

ICE7 - Area Chart

This area chart visualizes the quantity of sales items in a superstore over time, using a smooth curve to show trends. The chart is rendered as an SVG, with axes labeled for year and quantity. Built with d3.v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` and `line` generators with `curveBasis` to create the filled region and outline. Data is loaded from a CSV file and parsed with `d3.timeParse`.

Mar 25, 2024

Loading thumbnail…

ICE7 - Line Chart

This visualization displays the profit trends of a Super Store for 2023, using a line chart to show how profits change over the months. The chart is built with React and D3 v7, using `scaleTime` for the x-axis and `scaleLinear` for the y-axis. Data is loaded from a CSV file via `d3.csv`, and the line is rendered as an SVG path using `d3.line` with the `curveBasis` smoothing. The axes include tick marks and labels, with the months formatted using `timeFormat('%b')` and the plot styled with custom CSS.

Mar 25, 2024

Loading thumbnail…

ICE7 - Pie Chart

This pie chart visualizes regional sales distribution, with each slice representing a region's proportion of total sales and a legend showing region names with percentage values. The code loads sales data from a GitHub-hosted CSV using d3.csv, then renders the chart with d3.pie and d3.arc functions, applying colors via scaleOrdinal. SVG elements are appended to the page using d3.select, with legend text formatted via d3.format to display percentages. The visualization uses d3.v5 and outputs the result as scalable vector graphics.

Mar 25, 2024

Loading thumbnail…

ICE7 - Scatter Plot

A reusable scatter plot built with D3.js 6.7.0 visualizes sales, profit, and discount data from a remote CSV file. The plot displays circles for each data point, with axes and labels, and each circle is rendered with a white stroke and black fill. Every two seconds, the plot cycles the x-axis between the Profit, Discount, and Sales columns, updating the axis labels and re-rendering the points accordingly. The implementation uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scaling and axis generation.

Mar 25, 2024

Loading thumbnail…

ICE6 - Scatter Plot

This scatter plot visualizes the correlation between sales and profit using a dataset from a public GitHub repository. The visualization displays individual data points as circles, with sales on the x-axis and profit on the y-axis. The code uses d3.csv to load and parse the data, d3.scaleLinear to map the data values to pixel coordinates, and d3.axisLeft and d3.axisBottom to render the axes. The chart renders as SVG, with each data point represented by a circle of radius 5, and includes axis labels for both dimensions.

Mar 19, 2024

Loading thumbnail…

ICE6 - Bar Chart

This bar chart displays Super Store sales totals across different states, sourced from a CSV of the first 100 records of the dataset. The visualization uses React to manage the data-fetching state and D3.js to render the scalable vector graphics (SVG) bars and axes. Specifically, `scaleBand` and `scaleLinear` position the bars, while custom tick rendering replaces default axes, with gridlines drawn in blue. The chart encodes sales values as bar lengths, making state-level comparisons straightforward. Data is loaded asynchronously via `d3.csv`, with each row’s `Sales` field converted to a numeric `Cost` value for plotting.

Mar 19, 2024

Loading thumbnail…

Health Bar Chart Visualization

This bar chart displays the population estimates for the ten most populous countries, using a horizontal layout where each bar’s length corresponds to the population in thousands. The visualization relies on D3’s `scaleBand` and `scaleLinear` to position bars and map values, while `axisLeft` renders the y-axis. Data comes from the un-population-estimates-2024 dataset, filtered to include only country-level entries and sorted in descending order. The chart includes labeled axes for country names and population values, with a gray inner rectangle framing the plotting area.

Mar 19, 2024