A

ashishkommanaveni05@gmail.com

@AshishKommanaveni·18 public vizzes

Loading thumbnail…

ICE 8

This interactive network visualization displays a conceptual city flight route network, with seven cities colored by regional group (East, Central, West) and nine connecting routes. The layout is driven by a physics-based force simulation using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` forces. Nodes are rendered as SVG circles with city labels, and users can drag nodes to reposition them, which dynamically updates the simulation. The explicit node and link data are defined in arrays within the code.

Loading thumbnail…

ICE 8

This example shows a hierarchical tree diagram of programming languages, with a root node, three category branches for Frontend, Backend, and Data Science, and leaf nodes for individual languages. Each depth level uses distinct colors and shapes—circles for the root and leaves, rectangles for the middle layer—to visually separate the tree’s levels. The code builds the hierarchy with `d3.hierarchy()` and lays it out using `d3.tree()`, rendering links as curved paths via `d3.linkHorizontal()`. Node styling and labels are applied directly to SVG elements, with a legend added to clarify the level color coding.

Loading thumbnail…

ICE 8-2

This example shows a hierarchical tree diagram of animal categories, with the root node "Animals" branching into Mammals, Birds, and Reptiles, each leading to leaf nodes like Lion, Eagle, and Snake. Nodes are distinguished by depth: the root is a large circle, branches are rounded rectangles, and leaves are smaller circles, with a distinct green, blue, and red color scheme. The tree is rendered as SVG using d3.hierarchy, d3.tree, and d3.linkHorizontal for curved links, with labels and a legend added via D3 selections. The data is hardcoded as a JSON-like JavaScript object, and the layout is positioned manually with a translate transform.

Loading thumbnail…

ICE-8

This visualization displays a world map where countries are colored to show the number of car records in the accompanying cars_dataset.csv. The map focuses on the geographical distribution of car manufacturers, with darker purple shades indicating higher record counts. It uses d3.geoPath with a natural Earth projection to render the map and topojson-client to convert the world-atlas TopoJSON data. Hovering over a country triggers a tooltip showing the country name and its car record count, while a threshold color scale distinguishes different data ranges.

Loading thumbnail…

ICE-8

The visualization displays a color-coded map of the United States, where each state is shaded according to its geographic region, using a dataset of cars to provide context. It renders geographic boundaries with D3.js v7 and TopoJSON, employing `d3.geoPath` with an Albers USA projection to draw state shapes. The map highlights regional distributions by assigning distinct colors to the West, Midwest, South, and Northeast areas, based on FIPS codes. The visualization includes a tooltip for interactivity and relies on the `cars_dataset.csv` file for supplementary data.

Loading thumbnail…

ICE--7

This area chart displays the average fuel mileage (MPG) of cars grouped by model year, using a dataset of 30 vehicles parsed from a CSV file. The visualization aggregates individual car records by year, then draws a steel-blue filled area with a darkblue boundary line, red circular data points, and numeric value labels. Built with D3 v7, the code uses `d3.csvParseRows` to clean the data, `d3.rollup` with `d3.mean` for aggregation, and `d3.area()` along with `d3.line()` generators to render the SVG paths.

Loading thumbnail…

ICE--7

This example visualizes the average vehicle fuel efficiency by year using a line chart with red data points and labeled values. The chart is built with D3 v7, loading CSV data from a cars dataset and parsing it with `d3.csvParseRows`. The code groups the data by year and calculates the mean mileage using `d3.rollup` and `d3.mean`, then renders the trend with a line generator and axes. The visualization is rendered as an SVG, showing how average MPG varies across model years.

Loading thumbnail…

ICE--7

This visualization displays the distribution of fuel types among 30 cars, using a pie chart generated from a CSV dataset. The chart shows the proportional share of each category, such as Gas, Electric, Hybrid, and Diesel, with a legend providing counts. It is built with D3 v7, using `d3.csvParseRows` to load and parse the data, `d3.rollups` to count occurrences, and `d3.pie` and `d3.arc` to construct the slices and labels. The SVG is rendered with a Tableau10 color scheme, and the chart is positioned on an 850x500 pixel canvas.

Loading thumbnail…

ICE--7

This scatter plot visualizes the relationship between engine size and fuel mileage for 30 cars from a dataset, with points colored by fuel type. The visualization uses D3 v7 with an SVG rendering approach, implementing a reusable scatter plot function that reads the CSV data manually. It uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and `d3.axisBottom` and `d3.axisLeft` for tick marks, with a legend showing fuel type categories.

Loading thumbnail…

ICE-7

A scatterplot displays five fixed points across a 2D plane, each represented by a solid circle with a radius of 30 pixels. The visualization uses an SVG rendering approach with React, where the `App` component measures its container to set the chart dimensions. D3 v7 handles data binding and element creation through `select` and `selectAll`, while hardcoded `x` and `y` values from a local `data.js` file position the circles.

Loading thumbnail…

ICE 7

This example presents a reusable scatter plot built with D3.js v7 inside a React application, using the SVG rendering approach. It visualizes a car dataset, plotting engine size against fuel mileage, with each dot representing a vehicle. The chart leverages D3 scales and axes for positioning, and custom styling with hover effects. Based on index.html, the code parses a CSV file with d3.csv and constructs a scatter plot demonstrating the relationship between car engine capacity and efficiency.

Loading thumbnail…

ICE6-SDV

The ICE6-SDV visualization displays three time-series trends derived from a cars dataset, comparing average price, mileage, and engine size by model year. The multi-series line chart uses a normalized 0–100 scale to make the disparate metrics visually comparable. Built with React and D3 v7, the code parses a CSV file, aggregates data with `d3.rollup`, and renders separate line paths using `d3.line` and `d3.scaleLinear`. The same SVG canvas contains all visualization elements, including gridlines, axes, and a legend.

Loading thumbnail…

ICE6 SDV

This example shows a scatter plot of the classic Iris dataset, comparing sepal length against petal length. The D3.js library (v7) is used within a React (v19) application, where the plot is built inside an SVG element using `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` for tick marks. Each of the 150 data points from the CSV is rendered as a semi-transparent, steelblue circle. The chart includes a title and axis labels, and is created programmatically with a `useEffect` hook that fetches and parses the data with `d3.csv`.

Loading thumbnail…

ICE6

This bar chart shows the average car price by brand using D3.js within a React application. The code uses `d3.text` to load the CSV file, `d3.csvParse` to parse the data, and `d3.rollup` to calculate the mean `PriceUSD` for each brand. Bars are rendered with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axis labels generated via `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of React & D3 Starter

A minimal starter template demonstrates the integration of React and D3 by rendering a single text message. The code combines React's `useRef` and `useEffect` hooks with D3's `select` function to update a DOM element. The example uses React 19 and D3 v7, with the React root rendering a component that displays "Hello D3 & React" in large, centered text. This serves as a foundational example for building more complex data visualizations with these two libraries together.

Loading thumbnail…

ICE5 Cars dataset

This example presents a dataset summary for the ICE-5 cars CSV, displaying key statistics—file size, row count, and column count—as encoded horizontal bars within an SVG. D3 v7 fetches and parses the remote CSV with `d3.csvParse`, computes the metadata, and appends SVG `<rect>` and `<text>` elements to visualize the values, complemented by a simple decorative circle.

Loading thumbnail…

Cars_dataset

This example displays a static HTML page with the message "Hello HTML!" centered in large type. The visualization consists solely of this text element, styled with a font size of 12 em units via the `styles.css` file. No interactive behavior or data rendering occurs; the page loads `index.js`, which simply logs "hello world" to the console. The structure relies on plain HTML, standard CSS, and JavaScript, with no third-party libraries or data visualization APIs implemented.

Loading thumbnail…

Fork of HTML Starter

This example displays the static text “Hello HTML!” centered on a blank page, styled with a twelve-em font size. The visualization uses basic HTML, CSS, and JavaScript, with an `index.js` script that only logs “hello world” to the console. The rendering relies on a standard HTML `<div>` element and CSS rules, with no data sources, charting libraries, or dynamic behavior.