Skip to main content
Log in
A

Arram Anila

@anilaarram·12 public vizzes

Loading thumbnail…

Network 11719939

This network graph visualizes electric vehicle charging stations, with nodes colored by charger type and linked when they share the same station operator. The layout is computed using d3.forceSimulation with forceLink and forceManyBody, while links are drawn as SVG lines and nodes as labeled circles. Data comes from a CSV file loaded via d3.csv, containing station IDs, operators, and charger types. The simulation updates node and link positions on each tick, producing a clustered view of operator relationships.

Apr 9, 2025
Loading thumbnail…

Tree 11719939

This interactive tree visualizes EV charging stations grouped hierarchically by charger type, station operator, city, and station ID from a CSV data source. Users can click nodes to expand or collapse branches at each level. The D3 v7 implementation builds the hierarchy with `d3.group`, lays it out with `d3.tree`, and animates node movements and curved link transitions using `transition().duration()`. Colors differentiate depth levels, and zooming is enabled via the `d3.zoom()` API.

Apr 9, 2025
Loading thumbnail…

Area Chart 11719939

This area chart visualizes the relationship between wine sample ID and alcohol content using a dataset from a CSV file, with the data sampled every tenth point. The visualization employs D3.js v6 with SVG rendering, using d3.csv to load data, d3.scaleLinear for axes, and d3.area and d3.line to create a light blue filled area beneath a brown line plot.

Apr 2, 2025
Loading thumbnail…

Line Chart 11719939

This line chart visualizes the relationship between wine sample ID and alcohol content using a log-scaled y-axis and a smoothed, curved line. It loads a CSV dataset from a GitHub gist via `d3.csv`, samples every tenth data point, and applies a moving average to reduce noise. The chart is rendered in SVG with D3 v7, using `d3.scaleLog`, `d3.line` with `curveCatmullRom`, and `d3.axisBottom`/`d3.axisLeft`. Axis labels and a title annotate the visualization.

Apr 1, 2025
Loading thumbnail…

Pie Chart 11719939

This pie chart visualizes the distribution of wine quality ratings from the WineQT dataset. The chart renders as a circular SVG, with each slice labeled directly with its quality score and a legend beneath displaying the count of wines per rating. It uses d3.csv to load the remote dataset, d3.rollup to count occurrences by quality, and d3.pie with d3.arc to generate the slices, colored via d3.scaleOrdinal with d3.schemeSet3.

Apr 1, 2025
Loading thumbnail…

Fork of Reusable D3 Scatter Plot 11719939

This scatter plot visualizes the relationship between sulphates and quality in a wine dataset. It shows individual data points as small steel-blue circles, with the distribution revealing potential correlations between the two variables. The visualization is built using D3 v7, creating an SVG chart with linear scales for both axes and a simple data loading pipeline. The code uses `d3.csv()` to fetch the WineQT dataset from a GitHub Gist, then applies padding to the scale domains and renders axes with `d3.axisBottom` and `d3.axisLeft`.

Apr 1, 2025
Loading thumbnail…

ICE6 Scatter Plot 11719939

This scatter plot visualizes the relationship between the age and weight of individual cats, with each point colored by gender (blue for male, red for female). The code loads a CSV dataset via `d3.csv` and maps the data to positions using `d3.scaleLinear` for both axes. Interactive tooltips, implemented with D3 mouseover events, display breed, age, weight, and gender for each point. The SVG rendering includes labeled axes and a light blue background, all styled through standard CSS.

Mar 26, 2025
Loading thumbnail…

ICE6 Scatter Chart

This bar chart visualizes the average age of different cat breeds, computed from a CSV dataset using D3 v7. The chart displays a green bar for each breed, with age labels above each bar and grid lines for readability. It uses `d3.csv` to load the data, `d3.rollup` and `d3.mean` to aggregate average ages by breed, and D3 scales and axes to render the chart as SVG. The chart also includes axis labels, a title, and rotated x-axis tick labels for breed names.

Mar 25, 2025
Loading thumbnail…

ICE6 Bar Chart 11719939

This bar chart visualizes the average age of different cat breeds, sourced from a CSV dataset. Each breed is represented as a green bar, with the average age labeled above it. The chart is rendered as an SVG using D3.js v7 and dynamically sized based on the number of breeds. The code employs D3’s `d3.csv`, `d3.rollup`, and `d3.mean` to aggregate the data, then uses `d3.scaleBand` and `d3.scaleLinear` to position bars and axes. The visualization includes rotated x-axis labels, grid lines, and axis titles.

Mar 25, 2025
Loading thumbnail…

Fork of ICE6 cat dataset

This visualization presents summary statistics for the ICE6 cat dataset, displaying the average age for each distinct cat breed as a horizontal bar chart. A data summary panel reports the total dataset size, column count, row count, average age, average weight, and number of breeds. The chart is rendered as an SVG using D3 v7, with bars and rotated labels built via `d3.select`, `d3.scaleLinear`, and the `d3.rollup` function to compute breed-level averages, with data loaded remotely via `d3.csv`.

Mar 25, 2025
Loading thumbnail…

ICE5 cat dataset

This visualization presents a dataset of cat breeds, showing both summary statistics and a breed-by-breed comparison of average age. A scrollable bar chart displays the mean age for each breed, with breed labels rotated beneath the bars. The code loads CSV data via `d3.csv`, computes averages and summaries using `d3.mean` and `d3.rollup`, and renders the chart with D3 v7’s SVG selection and scale APIs. A dynamic SVG width accommodates the full breed list, while the summary panel reports data size, row and column counts, and overall averages.

Mar 19, 2025
Loading thumbnail…

ICE4 11719939

A whimsical SVG animation of a three-layer cake with dripping frosting and two flickering candles, rendered on a red plate against a pastel background. The cake layers use CSS gradients in pink, yellow, and blue, while the frosting includes an animated drip path that moves via a CSS keyframe loop. Candle flames flicker and change color using JavaScript's `setInterval` to toggle background color and opacity. The composition is built with HTML divs, CSS positioning, and a single SVG path for the drips, with no external libraries.

Mar 18, 2025