rakeshkommineni

@rakeshkommineni·12 public vizzes

ICE 8 Social Network Graph

This example shows a small social network of six Marvel-inspired characters, with nodes representing individuals and weighted links showing connections between them. The graph uses d3.layout.force to simulate physical forces, pulling connected nodes together while repelling unconnected ones. Nodes are rendered as SVG circles with labels, styled via CSS, and the data is loaded from an index.json file. Users can click and drag nodes to rearrange the layout, with D3’s force tick function updating link positions and node transforms in real time.

Apr 7, 2023

Loading thumbnail…

Country Map

This example displays a choropleth map of the 50 US states, rendered as SVG paths with a blue fill and black state borders. The visualization uses the `geoAlbersUsaTerritories()` projection and `d3.geoPath()` to draw geographic features, while `useData` fetches TopoJSON data from the `us-atlas` package. State boundaries are generated via the `feature()` and `mesh()` functions from TopoJSON, and hovering highlights a state blue.

Mar 30, 2023

Loading thumbnail…

Fork of Dog Family Species

This interactive tree diagram visualizes the ancestry of dog breeds, tracing from a root labeled "Mudd" through mixed-breed crosses to purebred species like Labrador Retrievers, Chow Chows, Golden Retrievers, and German Shepherds. Built with D3.js version 3.5.17, the visualization uses the `d3.layout.tree` and `d3.svg.diagonal` APIs to position nodes and draw curved links. Users can click any node to collapse or expand its children, triggering smooth 750-millisecond transitions via `d3.transition`. The SVG rendering includes styled circles and text, with the data structure defined as a hierarchical JSON array in JavaScript.

Mar 30, 2023

Loading thumbnail…

world map

This interactive world map displays country boundaries using a natural Earth projection rendered as SVG paths. The visualization loads geographic data from a JSON file, converts it into GeoJSON features via the `topojson.feature` API, and draws each country with `d3.geoPath` and `d3.geoNaturalEarth1`. The sphere background is styled skyblue, while countries fill with a blue tint and cyan strokes. The code uses D3 v5’s selection and JSON loading methods to fetch remote data from a GitHub gist.

Mar 29, 2023

Loading thumbnail…

ICE-7 Line Chart

This chart visualizes the trend of car sales from 2004 to 2022, using a blue line to connect annual data points with the year on the x-axis and sales figures on the y-axis. The D3.js v5 code employs `scaleTime` and `scaleLinear` for axis scaling, with `axisBottom` and `axisLeft` to render tick marks and labels. The line is generated via `line()`, and the data is loaded from a CSV file in a GitHub gist. SVG output is used, with margins and labels styled via an external stylesheet.

Mar 13, 2023

Loading thumbnail…

ICE7 Pie Chart

This pie chart visualizes the top car sales in 2022, with each slice sized proportionally to the number of units sold and a legend displaying car names and sales counts. The chart renders using D3 v5’s `pie` and `arc` generators to compute segment geometry, with colors assigned via `scaleOrdinal` and `d3.schemeCategory10`. Data is loaded asynchronously from `carsales.json` using `d3.json`, and the SVG is built by appending `path` and `rect` elements. The presentation uses an SVG container with a legend offset to the side, and sales values are formatted with `d3.format`.

Mar 13, 2023

Loading thumbnail…

ICE 7 Area Chart

This area chart displays car sales from 2004 to 2022, with time on the x-axis and sales volume on the y-axis. The visualization uses D3 v5 with React, rendering as SVG. It employs `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the shaded region, and `axisLeft`/`axisBottom` for ticks. Data comes from a CSV file loaded via `d3.csv`, with values parsed using `d3.timeParse`.

Mar 13, 2023

Loading thumbnail…

ICE-7 Reusable D3 Scatter Plot for IRIS

This scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with distinct D3 symbol shapes. Using d3.csv to load data and d3.scaleLinear for axes, the code applies a reusable factory pattern via `scatterPlot()`, with d3.scaleOrdinal and d3.symbol to generate marks. SVG rendering includes labeled axes and a title, while the plot adapts to the full browser window size with margins defined in the configuration.

Mar 12, 2023

Loading thumbnail…

ICE 6-Penguin Data set scatter Plot

This visualization displays a scatter plot of the Palmer Archipelago penguin dataset, plotting flipper length on the x-axis against body mass on the y-axis. Each point is colored by species: blue for Adelie, green for Gentoo, and brown for Chinstrap penguins. The code uses D3 v5 scales and axes from `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` (aliased in the destructured import) to render the SVG plot. Data is loaded asynchronously via `d3.csv` from a GitHub gist, with numeric fields parsed on ingestion.

Mar 12, 2023

Loading thumbnail…

ICE 6 Bar charts

This example displays the top 10 countries by population using a horizontal bar chart, with the x-axis formatted in billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering marks as SVG rectangles. Data is loaded asynchronously via `csv` from a UN population dataset, and tooltips show exact values on hover.

Mar 8, 2023

Loading thumbnail…

ICE-4

The visualization displays a full-screen raster landscape, using a single embedded JPEG image rendered as an SVG pattern across the entire viewport. It is designed as a static background rather than an interactive data chart. The implementation relies on SVG scaling and pattern elements to tile the image smoothly, with the image data embedded directly via a base64-encoded href. The example is built with Vue and serves as a minimal demonstration of SVG image handling for a visualization gallery.

Mar 1, 2023

Loading thumbnail…

smiley

A smiley face rendered in red and green is displayed on a black-and-white background. The face is composed of two separate React components, <code>Eyes</code> and <code>Smile</code>, each defined as SVG elements with precise path and ellipse data. The main <code>App</code> component positions these parts using SVG <code>transform</code> attributes, applying scaling and rotation. The rendering uses React's declarative SVG output, with all styling defined in an external CSS file.

Feb 23, 2023