A

Anvesh Chinta

@anvesh2129·16 public vizzes

Loading thumbnail…

ANV_ICE-8 Network Map

This interactive network map visualizes a personal social network, showing connections between the author and nine friends. The visualization uses a force-directed layout to position nodes, with links representing relationships and thicker strokes indicating stronger ties. The graph renders as an SVG using D3.js v4, employing the deprecated `d3.layout.force` API to simulate the physics. Node colors and labels distinguish individuals, while the force simulation handles positioning and drag interactions. The map initially loads data from an external JSON file, with darker green styling for the title and a light green page background.

Loading thumbnail…

Anv_ICE-8 Tree Graph

This example displays a hierarchical tree graph of TATA car models, organized into parent platforms and sub-brands. Rendered as SVG, it uses a custom dataset with parent-child relationships and d3.stratify to build the hierarchy, d3.tree to compute positions, and d3.v5 to create circular nodes with depth-based color coding and curved links. The graph shows the vehicle lineup from base platforms like ALFA and OMEGA down to individual models, with text labels beside each node.

Loading thumbnail…

Anv_ICE8_Argentina_(Topojson)

This example displays a choropleth-style map of Argentina’s provinces and departments, rendered with a Transverse Mercator projection and interactive zoom. The map shows administrative boundaries filled in green, with a title tooltip revealing each department’s name and province on hover. It uses D3’s `geoPath`, `geoTransverseMercator`, and `zoom` APIs, along with TopoJSON’s `feature` method, to load and draw geographic data from a GitHub-hosted JSON file. The SVG output includes a styled ocean sphere and country paths.

Loading thumbnail…

ANV_ICE-8 World Map

This example displays a world map using a light green fill for countries, white stroke outlines, and a light blue sphere background, rendered as an SVG. The map uses a Mercator projection via `d3.geoMercator()` and `d3.geoPath()`. Country boundaries are drawn from TopoJSON data loaded from a remote GitHub gist, processed with `topojson.feature()`. The visualization assigns CSS classes to style the sphere and country paths.

Loading thumbnail…

Anv_ICE8 - Interactive Tree

An interactive tree diagram displays the model hierarchy of Tata cars, organizing product families and their variants. The visualization divides the data into branches for ALFA, OMEGA, and multiple EV generations, with clickable nodes used to expand or collapse child elements. Rendered as SVG with animation, the layout uses D3.js libraries including `d3.layout.tree` and `d3.svg.diagonal` to position nodes and draw links. The tree transitions smoothly between states via D3's transition API, providing a static yet interactive exploration of the car model relationships.

Loading thumbnail…

Anv Bonus ICE - 3D Scatter plot

This 3D scatter plot visualizes Xbox game sales across different regions, using three traces to compare Global, North America, and Europe sales figures for each game title over time. The x-axis represents sales values, the y-axis lists game titles, and the z-axis shows the release year. Built with Plotly.js and D3.js, the visualization loads CSV data from a GitHub gist and renders interactive scatter3d markers, with distinct colors for each regional sales category and axis labels for clarity.

Loading thumbnail…

Anv Bonus ICE - 3D Interactive Bar Chart

This 3D interactive bar chart visualizes Xbox game sales across 14 titles, segmented into five regional series (North America, Europe, Japan, Rest of the World, and a total). Built with the Highcharts JavaScript library and its `highcharts-3d` module, the chart uses `chart.options3d` with `alpha` and `beta` rotation angles, and configures column depth and stacking via `plotOptions.column`. The regions appear as separate stacks, with data arrays in `x,y` pairs. jQuery initializes the chart inside a container div.

Loading thumbnail…

Anv Bonus ICE - 3D Bar Chart

This example visualizes Xbox game sales across multiple countries using a 3D bar chart rendered through X3DOM. It displays sales data for each game across Global, North America, Europe, Japan, and Rest of World regions via a multi-series bar chart. The visualization loads CSV data using `d3.csv`, parses rows with a custom function, and builds the chart using the `d3-x3d` library’s `chart.barChartMultiSeries()` API. The code integrates D3 v5 and the d3-3d library to create an interactive 3D representation within an HTML page.

Loading thumbnail…

Anv_ICE-7 Area Chart

This area chart visualizes yearly PlayStation console sales in millions of units, using a green line with a light blue filled area beneath it. The x-axis maps time with `d3.scaleTime` and the y-axis uses `d3.scaleLinear`, with tick formatting via D3’s `format('.3s')` for abbreviated numbers. Data is loaded from a CSV using `d3.csv` and parsed with `d3.timeParse` to convert years into date objects. The chart employs D3 v5 to generate SVG paths with the `d3.line` and `d3.area` generators, smooth curves via `curveBasis`, and gridlines from axis ticks.

Loading thumbnail…

Anv_ICE-7 Line Chart

This line chart visualizes Xbox console yearly sales (in millions of units) from 2001 to 2022, sourced from a CSV file hosted on GitHub. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map years and sales values, with axes generated via `axisBottom` and `axisLeft`. A single orange path, created with the `line` generator, displays the sales trend over time. The SVG rendering includes styled grid lines, axis labels, and a title, all defined in the accompanying CSS.

Loading thumbnail…

Anv_ICE-7 Pie Chart

This pie chart visualizes the proportion of total game sales for nine games, with each slice labeled by its percentage and a corresponding legend listing game names alongside their sales percentages. The chart is rendered as an SVG using D3.js v5, which computes the arc paths via the `pie` and `arc` functions. Data is fetched as CSV from a GitHub gist, and colors are assigned using a categorical scale based on `schemeCategory10`, with text and legends styled through CSS.

Loading thumbnail…

Anv_ICE-7 Scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping petal and sepal measurements to the x- and y-axes while color-coding points by species. Built with D3 v6, it uses `d3.csv` for data loading, `d3.scaleLinear` for axes, and a reusable `scatterPlot` module. An animation cycles through different measurement pairings every 2.5 seconds, and a legend identifies the three species. The chart renders as an animated SVG with custom color mapping and axis labels.

Loading thumbnail…

Anv_ICE-6 Bar Graph

This bar chart displays the number of motorcycle models produced by each brand in India, based on CSV data fetched from a GitHub gist. The visualization uses React to manage state and render the SVG, while D3 v5 handles data loading, scales, and axes. Horizontal bars are drawn using D3’s `scaleBand` for the categorical brands and `scaleLinear` for the model counts, with gridlines and labeled axes. The code also incorporates custom padding and a title, presenting the data in a clean, readable layout.

Loading thumbnail…

Anv_ICE-6 Scatter plot

This scatter plot visualizes the relationship between top speed and maximum torque for Indian motorcycles, sourced from a CSV file of bike specifications. Each dot represents a bike, with its position determined by torque on the x-axis and top speed on the y-axis, while color encodes torque values on a blue-to-red scale. The visualization uses D3.js v7, employing `d3.csv` for data loading, `scaleLinear` for positioning and color mapping, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. An SVG rendering approach displays circles, with a custom rotated legend indicating torque values.

Loading thumbnail…

ICE-5_5320_Anv

This page displays metadata about a CSV file containing plane crash data from 1918 to 2022, including its size, column count, and row count. It also embeds a static SVG image visualizing the dataset. The page fetches the CSV using the `fetch` API, parses the text to compute file statistics, and uses JavaScript to update the HTML elements. The interface is styled with CSS, and the page is built with standard HTML, CSS, and JavaScript, with no external visualization libraries.

Loading thumbnail…

overlapping Buddha_Anv

This example visualizes a dense field of 300 randomly generated star-shaped polygons, each filled with a random RGB color, scattered across a large SVG canvas. A single large Buddha silhouette path is rendered on top, scaled and positioned prominently over the stars. The code uses React to build the SVG elements, with random coordinates and star geometries generated via JavaScript math functions. The rendering relies on React's declarative component structure and SVG's `<polygon>` and `<path>` elements to compose the layered composition.