V

VReddy913

@VReddy913·27 public vizzes

Loading thumbnail…

VarshaGNetwork

This interactive social network diagram shows ten people connected by directed “Friend with” relationships, rendered as an SVG force-directed graph. The visualization uses `d3.forceSimulation` with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag behavior allows users to rearrange them. All nodes are colored orange, and hover interactions highlight a node with a thick green outline. Data is loaded from a local JSON file, and the arrow markers on links indicate the direction of each friendship edge.

Loading thumbnail…

VarshaGNetwork

This example shows a force-directed network of seven named nodes connected by weighted links, with purple circles labeled by green text. The visualization uses D3 v4's `d3.layout.force` to simulate node positions, applying gravity, charge, and link distance, while rendering SVG lines and groups. Data loads from a local JSON file with node names and link weights. Users can click and drag nodes, and the tick handler updates line coordinates and node transforms dynamically. Link thickness encodes weight via `Math.sqrt(d.weight)`, and the SVG canvas is sized 1000 by 500 pixels.

Loading thumbnail…

Tree Example

This example shows an interactive family tree using D3.js version 3. The visualization renders hierarchical data as a collapsible tree diagram, where clicking a node toggles its children. The code uses `d3.layout.tree` for layout, `d3.svg.diagonal` for curved links, and animated transitions via `transition()` with 750ms duration. Nodes are drawn as red-stroked circles with text labels, while links are green paths. The SVG output displays three generations of names, starting with Satyaveda as the root.

Loading thumbnail…

VarshaGSweden

This example displays a choropleth-style map of Sweden’s counties, highlighting internal boundaries in cyan and county fill in dark blue on a light background. Using React with D3 v5, it loads TopoJSON data from a GitHub gist, converts it to GeoJSON with `topojson.feature`, and renders paths via `d3.geoPath` with a Mercator projection fitted to the viewport. Interior mesh lines are drawn separately using `topojson.mesh`. The visualization updates reactively when data loads.

Loading thumbnail…

Fork of ICE 8 - Country Map

This choropleth map of the United States displays state boundaries as green paths with dark gray strokes on a blue SVG canvas, emulating an ocean backdrop. The visualization uses `d3.json` to load state geometries from the us-atlas states-10m dataset, then projects them with `d3.geoAlbersUsa()` and renders paths via `d3.geoPath()`. Built with D3 v4 and topojson-client, it also uses the React framework for layout.

Loading thumbnail…

VarshaGAustraliaMap

This visualization displays the electoral regions of Australia, colored with a categorical palette and labeled with their names. It uses the `topojson` library to convert data from `australia.json` into geographic features, which are then rendered as SVG paths using `d3.geoPath` with a `d3.geoMercator` projection. State boundaries are highlighted with a black stroke, and each region's name is positioned at its centroid.

Loading thumbnail…

VarshaGWorldMap

This example displays a natural Earth projection world map with countries rendered in light green and outlined in green, set against a black sphere background. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas countries-110m dataset. Country boundaries are drawn via a data join over the parsed `feature` collection, with the sphere path added separately.

Loading thumbnail…

VarshaG3D-2

This example uses Plotly’s `scatter3d` trace type to render an interactive 3D scatter plot of Body Mass Index data, mapping Weight, Height, and BodyFat to the x, y, and z axes. The data is loaded from a remote CSV file using `d3.csv` and then unpacked into arrays. The chart emphasizes markers with a square symbol, red fill, and pink outline, while axis titles are styled in purple. The visualization is built with the Plotly `newPlot` method and embedded in a minimal HTML page that also loads D3.js.

Loading thumbnail…

VarshaG3D-1

This example shows a 3D column chart comparing COVID-19 case counts across the top ten affected countries, with each country’s active, recovered, and total cases displayed as stacked bars along separate z-axis categories. Using Highcharts with the highcharts-3d module, the chart applies an isometric perspective through the `options3d` settings (alpha, beta, viewDistance, depth) and renders each series with distinct colors (red, green, orange). Data is provided inline as arrays for the three series, with categories for countries on the x-axis and case numbers on the y-axis.

Loading thumbnail…

VarshaG3D

VarshaG3D is an interactive 3D column chart visualizing download counts for seven popular apps across six different app stores. The chart presents grouped, non-stacked vertical bars in three-dimensional space, with each group representing an app and each column within the group representing a source. Built with Highcharts and the Highcharts 3D module, the visualization uses `options3d` to set alpha, beta, and depth parameters, with `groupZPadding` separating the store categories along the z-axis. The code defines series for each store, including App Store, Playstore, OneStore, Softonic, GalaxyStore, and VivoStore, with the app names set as x-axis categories.

Loading thumbnail…

ICE7-4VarshaG

This D3.js area chart shows the number of Android users over time, spanning a range of years with the y-axis labeled "users." The chart uses an SVG rendering with a time-scaled x-axis and a linear y-axis. The code imports `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` from the D3 library, and it draws a smoothed area curve using the `curveBasis` method. The data is loaded from a CSV file, with the date column parsed via `d3.timeParse`.

Loading thumbnail…

ICE7-3VarshaG

This visualization displays the average air temperature over time as a smooth, red line chart. The data is loaded from a CSV file and rendered as an SVG using React and D3 v7. The code uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and a `line` curve with `curveNatural` to create the smoothed path. Axis ticks are generated with `.ticks()`, and the chart includes labeled axes for "Time" and "Average air temperature (°C)".

Loading thumbnail…

ICE7-2VarshaG

This visualization displays US mortality rates across states using a pie chart, with each slice sized by the number of deaths and labeled with the state name. The chart is rendered as SVG elements using D3 v5, employing the `pie` and `arc` generators to compute slice geometry, while `scaleOrdinal` maps death counts to a fixed set of colors. A legend on the right lists each state with its corresponding color and formatted death count. Data is loaded asynchronously from a CSV file fetched from a GitHub Gist using D3’s `csv` method.

Loading thumbnail…

ICE7-1-VarshaG

This scatter plot visualizes automobile data, mapping engine displacement and horsepower to the x and y axes while encoding weight through circle size and origin through color. The visualization is built using Vega-Lite’s declarative grammar via the `vega-lite-api` wrapper, with `markCircle` and encodings for quantitative and nominal fields. Data is loaded from a CSV file using d3’s `csv` method, and the chart is rendered as an interactive SVG with tooltips provided by `vega-tooltip`.

Loading thumbnail…

ICE7-1-VarshaG

This interactive scatter plot explores the relationship between fuel efficiency (mpg) and horsepower across vehicles, with color mapped to origin and point size to weight. It renders the 398 cars from the UCI Auto MPG dataset using the vega-lite-api library, building a single circle mark with tooltips for names. The visualization adapts to the full viewport, and the accompanying vega-tooltip handler displays each vehicle's details on hover.

Loading thumbnail…

Fork of ICE7-1-VarshaG

This visualization explores the relationship between fuel efficiency, horsepower, weight, and origin in the Auto MPG dataset from the UCI Machine Learning Repository. A scatter plot positions each car by miles per gallon and horsepower, with color encoding the region of origin, while the size of each circle encodes vehicle weight. Tooltips reveal the car name on hover. The chart is built with the vega-lite-api, which registers Vega and Vega-Lite, and loads the CSV data using d3.csv. Custom configuration adjusts axis labels, tick colors, and font sizes for improved readability.

Loading thumbnail…

Fork of VarshaICE7

This visualization displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset as a scatter plot, mapping fuel efficiency (mpg) against horsepower, with point size encoding vehicle weight and color marking the country of origin. The chart is built using the vega-lite-api library, which wraps Vega-Lite and Vega, and renders interactively with tooltips showing car names. Data is loaded asynchronously via d3.csv from a remote Gist, while the visualization is configured with custom fonts and axes for improved readability. The layout fits the browser window, adjusting dynamically to viewport dimensions.

Loading thumbnail…

VarshaICE7

This visualization uses a scatter plot to explore the relationship between fuel efficiency (mpg) and horsepower across vehicles, with color indicating origin and point size encoding weight. Built with the vega-lite-api library and rendered using vega-lite and vega, the plot loads data from the UCI Auto MPG dataset via d3.csv. A tooltip from vega-tooltip displays each car’s name on hover. The visualization fits the entire browser window, and axis labels are styled with a custom configuration for improved readability.

Loading thumbnail…

VarshaICE7

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG dataset. Each red semi-transparent circle represents a car, with the title clearly stating the variables being compared. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `axisLeft` and `axisBottom` for tick marks, and `extent` to compute domains. Axis labels and a title are added via appended text elements, while gridlines are generated through tick size adjustments.

Loading thumbnail…

VarshaICE6-2

This visualization plots the Iris dataset as a scatter plot, showing petal length versus sepal length for individual flowers, with each species color-coded. The plot includes labeled axes and a color legend for the three species. The code uses d3.csv to load the data, then creates linear scales for the axes and an ordinal color scale. SVG circles represent data points, and the axes and legend are rendered using d3.axisBottom, d3.axisLeft, and d3.legendColor.

Loading thumbnail…

VarshaICE6

This bar chart displays the average engine horsepower for seven car brands, sorted in ascending order and colored with a sequential red color scale. Built with D3 v6 and rendered as SVG, the visualization uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for axes, and d3.legendColor to add a legend. A hover tooltip shows precise values, while the code references data from a local barchart.csv file.

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

A fork of Colm Lang's bar chart, this p5.js visualization displays the average share of renewable energy production from 2000 to 2020 across EU member states. The data is loaded via `loadTable` from a remote CSV file, with a canvas rendering gridlines, axis ticks, and labeled axes using custom drawing functions. Each bar's height is scaled proportionally to the maximum value in the dataset, with country years plotted along the x-axis. The sketch uses p5.js 1.4.0 and processes the data directly from the CSV without additional libraries.

Loading thumbnail…

VarshaICE5

This visualization displays metadata about the Trees Dataset, which contains information on 31 trees including circumference, height, and volume. The page uses D3 v7's `d3.csv` to fetch and parse the dataset from a GitHub gist, then calculates and displays the dataset size in kilobytes, row count, and column count. The presentation combines a custom background image with HTML headings and a pre-formatted text container, while the CSS file styles the page layout and centers the content.

Loading thumbnail…

VarshaICE5

This example displays a message about a dataset loaded from a CSV file hosted in a GitHub gist. It shows the file size in kilobytes, row count, and column count within a large, centered text element. The code uses D3.js to fetch and parse the CSV data via `d3.csv`, and D3's `select` function to update the page. The message text is defined in a separate local module, demonstrating ES6 imports.

Loading thumbnail…

Fork of VarshaReddyG

This example shows a stylized Danny Phantom face rendered with React and D3.js v6 as scalable vector graphics. It displays a yellow circular face with eyes, irises, pupils, eyebrows, a nose, mouth, and green hair, arranged around the screen’s center. The code uses D3’s `arc` generator for the mouth path, while all shapes—circles, rectangles, polylines, and polygons—are positioned using constants derived from window dimensions. Coordinates for the hair polygon are hardcoded, reflecting the character’s reference image.

Loading thumbnail…

VarshaReddyG

This React and D3.js (v6) visualization draws a stylized Danny Phantom face using SVG primitives. It constructs the face from a circle, layered eye elements, rectangular eyebrows, and polygon hair, all positioned relative to the viewport center via computed coordinates. The D3 `arc` function generates the mouth path, while React 16.9.0 renders the SVG to the page. The illustration uses a pastel color palette for skin, eyes, and hair.

Loading thumbnail…

VarshaG

A smiling yellow face drawn with SVG shapes demonstrates basic D3.js DOM manipulation. The page uses D3 selections to append and position the head, eyes, eyebrows, and an arc-based mouth. An animated transition shifts the eyebrow group up and down repeatedly using chained `transition().duration()` calls, creating a blinking-like motion. The example relies on D3 v5’s `select`, `arc`, and attribute methods, with all coordinates computed from the SVG’s width and height attributes.