A

avnreddy95

@avnreddy95·18 public vizzes

Loading thumbnail…

Network graph

This network graph visualizes a small Facebook network of nine people, with green links connecting blue circular nodes. The graph uses a force-directed layout to position nodes, with link thickness proportional to the weight values from the JSON data. The visualization is built with d3.v4, using the d3.layout.force API for simulation and SVG rendering. Node labels appear in red text, and users can click and drag nodes to rearrange the network interactively.

Loading thumbnail…

ICE8 - India map

This visualization displays a choropleth map of India, with each district and state boundary rendered as SVG paths. District polygons are filled with colors from `d3.scaleOrdinal` and `schemeCategory10`, while state outlines appear in green with hover effects turning districts black. The map uses `d3.geoMercator` projection and `d3.geoPath` to render TopoJSON data for districts and states. Users can pan and zoom via `d3.zoom`, with tooltips showing district and state names on hover.

Loading thumbnail…

Species Tree

This example shows a species tree visualization, with a hierarchy of animals arranged from a root node (“Animal”) through categories like Reptile and Mammal to individual species. The code uses D3’s `d3.layout.tree` to compute node positions and `d3.svg.diagonal` to draw the connecting links. Each node is a colored circle with a text label, colored by species name, and hovering reveals the associated info via a styled tooltip div. The animation metadata is not evident in the visible code, but the visualization is built with d3.v2 and renders a static, interactive tree layout.

Loading thumbnail…

ICE8 - World Map

This world map visualization displays country borders as green polygons on a steel-blue background, rendered using SVG. It uses d3’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere and countries, with geographic data loaded from the world-atlas TopoJSON file via `json()` and parsed with `feature()`. Each country is appended as a path element with a black stroke, creating a simple, static choropleth-free view of global landmasses.

Loading thumbnail…

AVN - 3D Scatter plot

This 3D scatter plot visualizes penguin measurements, plotting bill length, bill width, and flipper length along the three axes. A single trace displays all data points as uniformly colored circles with partial opacity, revealing the distribution and potential clusters within the multidimensional dataset. The visualization is generated using the Plotly JavaScript library, with data loaded from a CSV file via D3's `d3.csv` function. Custom axis titles are styled with distinct colors and a Times New Roman font.

Loading thumbnail…

AVN - 3D Bar chart

This example shows car sales data for ten automotive brands in a three-dimensional column chart, grouping four different sales channels (On Store, Exchange, Retail, and Dealer) into stacked columns with depth. The visualization displays the series values along the x-axis categories and y-axis totals, with a z-axis labeled “Sources” to indicate the stacking dimension. Built using Highcharts with the Highcharts-3D module, the chart applies rotation (alpha and beta angles), view distance, and column depth settings to create the perspective effect. The data is hardcoded as JavaScript arrays within the series definitions.

Loading thumbnail…

Untitled

A grid of 3D bars rises from a flat plane, each bar labeled with its height value on top. The visualization uses d3-3d to project cube geometries into SVG paths, with interactive drag rotation that updates the perspective in real time. D3 v4 handles the data binding, transitions, and text tweening, while color comes from the categorical scheme. A button triggers a full data refresh with animated transitions.

Loading thumbnail…

AVN - Pie Chart

This example shows the number of viewers in millions for various sports using a pie chart and an accompanying legend. The data is loaded from a CSV file via `d3.csv`, and each section’s value label and legend entry are formatted with `d3.format`. The pie layout is generated using `d3.pie`, with arcs drawn via `d3.arc` into an SVG canvas, while `d3.scaleOrdinal` maps categorical colors to the slices. React is used as the framework, though rendering is handled directly through D3’s DOM manipulation.

Loading thumbnail…

AVN - Area Chart

This area chart visualizes annual bike sales, with a smooth curve drawn using D3’s `line` and `area` generators with `curveBasis`. The SVG renders an orange filled region beneath a black stroke line, while styled axes include gridlines and labels. Data is loaded via `csv` from a GitHub gist, parsed with `d3.timeParse`, and scaled using `scaleTime` and `scaleLinear`. The React framework hosts the D3 v5 code, with axes generated by `axisBottom` and `axisLeft`.

Loading thumbnail…

AVN - Line chart

This example shows annual bike sales over time as a single blue line chart, with labeled axes for years and sales figures. The visualization is rendered as an SVG using React and D3 v5, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator to map CSV data loaded via D3’s `csv` method. The data source is a raw GitHub gist containing sales-per-year records, parsed with `d3.timeParse` to convert dates before plotting.

Loading thumbnail…

AVN Scatter Plot

This animated scatter plot displays measurements from three penguin species—Adelie, Chinstrap, and Gentoo—with each species represented by a distinct color. Every 2.5 seconds, the x-axis variable cycles through body weight, bill depth, flipper length, and bill length, while the y-axis remains fixed on bill length, reshaping the point positions accordingly. Built with D3 v6, the visualization uses SVG circles, `scaleLinear` for axes, and `setInterval` to drive the transition. Data comes from a CSV file fetched via D3’s `csv` function, with a custom legend and axis labels rendered in white against a black background.

Loading thumbnail…

AVN - Bar chart

This visualization displays the winners of the Indian Premier League (IPL) and their prize money in millions of dollars, with winning teams on the y-axis and prize amounts on the x-axis scaled from 0 to 15. The bar chart is rendered as an SVG using D3 v5, with data loaded from a CSV file via `d3.csv`. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` for the axes. The bars are drawn as `rect` elements, with numeric prize values parsed using the unary plus operator.

Loading thumbnail…

AVN - Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x- and y-axes while encoding species type with color (blue, purple, or cyan). It uses d3.csv for data loading, d3.scaleLinear for scales, and d3.axisLeft and d3.axisBottom for axes, all rendered as SVG circles. The plot also sets extra attributes (rx and ry) on the circles based on sepal measurements, though these do not affect the circle shape since a fixed radius is applied. The data is sourced from a GitHub-hosted CSV file.

Loading thumbnail…

AVN - Penguins Scatter Plot

This interactive visualization displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Each circle is colored by species—green for setosa, orange for virginica, and blue for versicolor—and its horizontal and vertical radii encode sepal length and width, creating an abstract bubble-like representation. Built with D3 v6, the code loads the CSV data via `d3.csv`, uses `scaleLinear` and `extent` for scaling, and renders circles as SVG elements. Axes are drawn with `axisLeft` and `axisBottom`, with custom text labels styled using inline attributes.

Loading thumbnail…

AVN - Fork of Let's make a Bar Graph with D3.js

This example visualizes IPL final results from 2008–2022 as a horizontal bar chart, showing prize money in crores for each winning team alongside their captain and runner-up. It loads external CSV data using `d3.csv`, then renders SVG rectangles positioned with `scaleBand` and `scaleLinear`. The chart applies `axisBottom` with tick formatting, removes default domain lines, and labels axes and title. Data values are parsed to numbers before rendering. The visualization uses D3 v7 with a static SVG container sized 960×500.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5, displaying a summary of the dataset’s file size, row count, and column count in a large text element. The code fetches an IPL dataset from a GitHub gist via `d3.csv`, then uses `d3.csvFormat` to compute the data size in kilobytes before updating the DOM. The page includes simple styling with a blue background and brown text, while the React framework is mentioned but not visibly used in the provided files.

Loading thumbnail…

AVN - Fork of Let's make a face with D3.js

A cartoon face rendered with D3.js v5 draws a yellow circle head with black-outlined eyes, a nose, eyebrows, and an arc-based mouth. The eyes and eyebrows are grouped and animated using chained `transition().duration()` calls, moving the brows up and down over two seconds. The code imports `select` and `arc` from D3, builds the SVG in a React-free HTML page, and centers the face via a translated `<g>` element. The mouth path uses `d3.arc` with inner and outer radii and angle ranges.

Loading thumbnail…

AVN - Fork of Let's Make a Face Part

A static SVG face built with two eye circles and a yellow head circle, rendered at 960 by 500 pixels. The code uses plain SVG elements—`circle` for the head and eyes—with attributes for position, radius, fill, and stroke. It manually centers the head at (480, 250) with a radius of 245, and offsets the eyes horizontally to 350 and 600, demonstrating coordinate-based layout without any JavaScript libraries or data binding.