R

RaajithaSabbineni

@RaajithaSabbineni·18 public vizzes

Loading thumbnail…

ICE-8 Fruits Tree

This interactive tree diagram displays a hierarchical classification of fruits, branching from a root "Fruits" node into "NonSweet" and "Sweet" categories with child items like Avocado, Tomatoes, Banana, and Papaya. The visualization uses the D3.js library (v3.5.17) with the `d3.layout.tree` algorithm to structure nodes and `d3.svg.diagonal` for curved link paths. Nodes are rendered as SVG circles with text labels, styled with green and red strokes. Users can click any node to collapse or expand its children, triggering animated transitions that reposition elements over 750 milliseconds.

Loading thumbnail…

ICE-8 state map

This example displays a choropleth map of the Indian state Andhra Pradesh, rendering its districts as green-filled polygons with white boundaries. The map uses a Mercator projection via `d3.geoMercator` and `d3.geoPath`, with district interiors derived from TopoJSON mesh data. On hover, a district highlights in red. The visualization is built with React, using `useData` to fetch TopoJSON and `Marks` to draw SVG paths, styled with CSS hover effects.

Loading thumbnail…

ICE-8 world map

This example displays a world map with country boundaries, graticules, and a stylized color scheme, using an Equirectangular projection. It renders the map as SVG paths, with landmasses filled in orange and the ocean sphere in blue, while interior boundaries appear as black lines. The visualization loads world country data from the World Atlas TopoJSON, then processes it with the `topojson` library’s `feature` and `mesh` functions. Built with React and D3, it applies `d3.geoPath` and `d3.geoGraticule` to construct the map’s geometry and decorative grid lines.

Loading thumbnail…

ICE8 - Social Network Graph

This interactive social network graph visualizes friendship connections among eight people. The visualization uses a force-directed layout, rendering nodes as labeled circles and links as red, arrow-tipped lines. Users can drag nodes to rearrange the network, which dynamically updates the link positions. The implementation leverages d3.forceSimulation for the physics-based layout, with d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter. Nodes are drawn as SVG circles with sky blue fill and text labels, while hovering highlights a node with an orange stroke.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map with country boundaries and a graticule overlay, rendered as SVG using D3.js v5. It shows countries as light green polygons with subtle black strokes against a blue sphere background. The code uses `d3.geoNaturalEarth1()` for projection, `d3.geoPath()` for path generation, and TopoJSON’s `feature` method to convert World Atlas TopoJSON data (from unpkg) into GeoJSON. A graticule is drawn with `geoGraticule`, and the sphere outline is generated via `pathGenerator({type: 'Sphere'})`.

Loading thumbnail…

ICE -8

This example displays a world map using D3 v5 with a natural Earth projection, rendering country boundaries as green paths over a blue sphere. It loads TopoJSON data from the World Atlas repository and converts it to GeoJSON using the topojson.feature function. The visualization applies geoPath to project geographic coordinates onto an SVG canvas, with a black stroke at low opacity for country borders.

Loading thumbnail…

3D Scatter

This 3D scatter plot visualizes used car data, showing two series of markers that map selling price against kilometers driven, with the z-axis comparing mileage for one series and maximum power for the other. The visualization uses Plotly.js to render the interactive scatter3d plots and D3.js to load and parse the CSV data from a GitHub gist, with styling applied through HTML and CSS.

Loading thumbnail…

ICE bonus

This interactive 3D bar chart visualizes used car data, comparing numeric attributes like selling price, kilometers driven, max power, and mileage for each car model. It uses the d3-x3d library to render the multi-series bar chart, with data loaded from a CSV file using d3.csv. The visualization is built with D3 v5 and displayed within an HTML page, styled with a simple heading.

Loading thumbnail…

ICE-7 Line chart

This line chart visualizes average anime ratings from 1963 to 2022, with the year on the x-axis and the average rating on the y-axis. Using D3 v5, the chart scales time and linear data with `d3.scaleTime` and `d3.scaleLinear`, and renders axes with `d3.axisBottom` and `d3.axisLeft`. A green, three-pixel-wide line is drawn with `d3.line` and `curveBasis`. The data is fetched via `d3.csv` from a GitHub Gist, and the SVG output includes custom labels and a title.

Loading thumbnail…

ICE-reusable scatter

This example demonstrates a reusable scatter plot implemented with D3.js, visualizing a used car dataset. It plots selling price against various attributes—max power, kilometers driven, mileage, or selling price—which rotate automatically every two seconds. Each point is color-coded by car status (sold in green, unsold in red) with a legend. The chart leverages D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` APIs, and uses SVG rendering with animated transitions between attribute axes.

Loading thumbnail…

ICE-7 Area chart

This area chart displays the average anime rating from 1960 to 2022, with the x-axis representing time in years and the y-axis showing the average rating. The visualization uses D3 v5 with scaleTime and scaleLinear to map the data, along with axisBottom and axisLeft for the axes. The chart renders as an SVG and combines a line path with a skyblue filled area beneath the curve, using d3.area and d3.line with curveBasis. The data is loaded from a CSV file hosted as a GitHub gist.

Loading thumbnail…

ICE-7 Pie chart

This pie chart displays the top 10 highest-rated anime, using a slice per title with its rating label and a color-coded legend listing each anime’s name and numerical value. The chart is rendered as an SVG, with data fetched from a CSV URL and processed using d3.csv, d3.pie, d3.arc, and d3.scaleOrdinal. Each slice’s fill color maps to its rating value via a sequential ordinal scale, while labels and a legend are appended using D3’s selection and enter/append methods. The visualization uses D3 v5 and a custom segment color array for the ten entries.

Loading thumbnail…

ICE-7

This example presents a dynamic scatter plot of used Ford vehicle data, cycling through different numeric attributes (engine size, mileage, MPG, and price) on the x-axis every two seconds. The plot maps vehicle transmission type to point color, with blue for automatic and purple for manual transmissions. Built as a reusable chart component using D3.js, it employs `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` APIs, alongside the `select` and `csv` modules for data loading and DOM manipulation. The visualization renders in SVG with a custom "Share Tech" font and full-screen dimensions.

Loading thumbnail…

ICE-7

This animated scatter plot visualizes used car data, comparing selling price against various attributes including maximum power, mileage, and kilometers driven. The visualization cycles through different x-axis variables every two seconds, allowing viewers to explore correlations between car characteristics and market value. Built with D3.js, the chart uses a reusable scatter plot function with linear scales for both axes, implementing smooth transitions through a `setInterval` callback. The SVG rendering incorporates the Share Tech font and displays data points as circles, with axis labels updating dynamically to reflect the currently selected variable.

Loading thumbnail…

ICE-6

A horizontal bar chart displays the top 20 rated anime, with each bar’s length proportional to its rating. The visualization loads CSV data via `d3.csv`, sorts by rating, and renders SVG bars, axes, and labels using React components. It uses D3 scales (`scaleBand`, `scaleLinear`), axis ticks, and text elements for annotation. The chart is styled with CSS in the HTML file, and the React app updates state after data retrieval.

Loading thumbnail…

Scatter Plot - ICE6

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The code uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render ticks. Circles are appended and filled via d3-selection, with hardcoded color values per species. The SVG spans the full window, and axis labels are added as text elements with rotated positioning.

Loading thumbnail…

ICE-5

This example presents a static SVG illustration of a cat alongside a text summary of the Anime List dataset. The visualization shows the total data size in kilobytes, row count, and column count, which are computed using D3 v7’s `d3.csv` and `d3.csvFormat` methods. The page uses plain HTML with embedded CSS styling, rendering the illustration and message in the browser without any interactive elements or dynamic charting.

Loading thumbnail…

ICE- make a face

A smiling face with yellow skin, black outlines, eyes, a nose, and a red tongue is rendered full-screen in SVG using React. The face is composed of circles and arcs defined with the d3.arc generator, with angular ranges controlling the mouth and tongue shapes. Positioning uses React transforms, and the scene adapts to the browser window by reading `window.innerWidth` and `window.innerHeight`. The explicit eye arcs and rotated elements create a playful, cartoonish expression.