A

avinashchinta99

@avinashchinta99·29 public vizzes

Loading thumbnail…

ICE 8 - Avinash - Social Network Graph

This social network graph visualizes friendships among a group of ten people, with nodes representing individuals and lines indicating connections. The graph uses a force-directed layout to position nodes, with link distance fixed and charge and collision forces separating them. Built with d3 v6, it uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter` to simulate the layout, while an SVG renders the nodes, labels, and directed link arrows with drag interaction and hover highlighting.

Loading thumbnail…

ICE 8 - Avinash Chinta

This visualization displays a world map using a natural Earth projection, with countries rendered as a single-color choropleth. The sphere background is filled in yellow-green, while each country is drawn in a contrasting green with black outlines. The code imports D3 v5 functions like `geoNaturalEarth1`, `geoPath`, and TopoJSON’s `feature` to parse geographic data from a GitHub-hosted JSON file and generate SVG paths for all countries.

Loading thumbnail…

ICE 8 - Animals Tree

This example displays an animated hierarchical tree of animal classifications, from a root "Animals" node down to individual species like Horse and Canary. It uses d3.stratify() to structure the data and d3.tree() to compute the layout, with each generation assigned a distinct color. SVG circles and text labels represent nodes, while paths animate their drawing from parent to child over 1.5 seconds using transition(). The visualization is rendered with D3 v6 and uses a light pink background for the page.

Loading thumbnail…

ICE 8 - Avinash Chinta

This example displays a family tree as an animated SVG diagram, with each generation distinguished by a unique color. The visualization uses `d3.stratify()` to convert flat parent-child data into a hierarchy, then lays it out with `d3.tree()`. Links animate from their source to target positions using `transition()`, while nodes are drawn as colored circles with bold name labels. The code explicitly sets the tree size to 800x300 pixels and positions it within an SVG that fills the browser window.

Loading thumbnail…

ICE 8 - Avinash Chinta - Japan Map

This interactive map displays Japan’s prefectures as green filled paths with white borders, rendered in SVG using React and D3. The code loads GeoJSON from a GitHub gist and applies a Mercator projection via `d3.geoPath` and `d3.geoMercator`, with a zoom behavior enabling pan and zoom transforms. Prefecture colors come from `d3.scaleOrdinal` and `schemeCategory10`, though the applied fill is overridden by CSS. Topojson’s `feature` extracts administrative boundaries from the source data.

Loading thumbnail…

ICE 8 - Avinash Chinta

This example displays a choropleth map of India using a Mercator projection, with each state filled by a categorical color scale. The visualization is rendered as SVG paths generated through d3.geoPath, with hover interactions changing state colors to green. The code loads TopoJSON data from a GitHub gist, parses it using the topojson feature function, and applies d3.scaleOrdinal with schemeCategory10 for coloring. The map is built with React and D3 v5, featuring zoom support and a title header.

Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India rendered as SVG, with each state filled using a categorical color scale. The map is generated from a TopoJSON file hosted on GitHub, parsed with the TopoJSON `feature` API, and projected using a Mercator projection via `d3.geoMercator` and `d3.geoPath`. The page includes a zoomable viewport (though no zoom interaction is implemented) and highlights states on hover by changing their fill to orange. The code relies on D3 v5, the d3-geo-projection plugin, and React integration, with styling defined in an external CSS file.

Loading thumbnail…

ICE 8 - Avinash Chinta

This visualization presents a natural Earth projection of the world map, with countries rendered as orange paths with black strokes against a light green spherical backdrop. The map is generated using D3.js version 5, leveraging `geoNaturalEarth1` for the projection and `geoPath` to construct the SVG paths. Geospatial data is loaded from a remote JSON file, processed through the TopoJSON `feature` function to extract country boundaries. The visualization demonstrates a straightforward, static choropleth-style rendering, with styling applied via CSS classes (`sphere` and `country`) to define the color scheme.

Loading thumbnail…

ICE7 - Scatter Plot

The visualization is an animated scatter plot of Olympic medal data, using D3.js to render colored, elliptical circles that represent countries by their gold, silver, bronze, and total medal counts. It cycles through different x-axis variables on a timer, updating the scales and axes dynamically. The plot uses D3's `csv` loader for data parsing, `scaleLinear` for axes, and custom SVG circles with hardcoded color mappings for USA, China, and Japan within a `setInterval` loop.

Loading thumbnail…

ICE7 - Scatter Plot

This interactive scatter plot animates through different x-axis variables—petal width, sepal width, petal length, and sepal length—while keeping sepal length on the y-axis, using the classic Iris dataset. Circles are colored by species (setosa, versicolor, virginica) with a custom legend, and the plot updates every few seconds via `setInterval`. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` function, rendering as SVG with appended axis labels and a rotating title.

Loading thumbnail…

ICE7 - Scatter Plot

This animated scatter plot visualizes the Iris flower dataset, cycling through four different measurements (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. Each species is color-coded—setosa in orange, versicolor in blue, and virginica in black—with a static legend and labeled axes. The visualization uses D3.js (v6.7.0) with its `scaleLinear`, `axisLeft`, and `axisBottom` APIs, loading data via `d3.csv` and updating positions on a timer with `setInterval`. Data comes from a GitHub-hosted medals CSV file, and the SVG rendering includes circles with custom radii per data point.

Loading thumbnail…

ICE 7 - Area Chart

This area chart displays the total number of Olympic medals won by the USA from 1984 to 2020, with time on the x-axis and medal count on the y-axis. The visualization combines a smooth curved line with a filled area beneath it, using `d3.line` and `d3.area` with a `curveBasis` interpolation. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while scales use `d3.scaleTime` and `d3.scaleLinear`. Data is loaded from a CSV file using `d3.csv`, and the SVG is rendered with D3 v5.

Loading thumbnail…

ICE 7 - Line Chart

This line chart displays the total number of Olympic medals won by the USA from 1984 to 2020, with years on the x-axis and medal counts on the y-axis. The visualization uses d3.csv to load medal data from a GitHub URL, then renders the chart as an SVG using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line. The chart includes labeled axes, a title, and a purple line path styled via CSS.

Loading thumbnail…

ICE 7 : Pie Chart

This interactive pie chart displays the total medals won by different countries, using a circular layout where each slice’s arc length corresponds to the count. Built with React and D3 v7, it fetches CSV data and renders SVG paths via d3.pie and d3.arc. The chart employs a linear color scale to differentiate countries, with labels and tooltips generated through d3.arc.centroid. Data comes from a public GitHub gist, and the visualization updates smoothly on new data, showcasing a clean, responsive design adapted from a line-chart template.

Loading thumbnail…

ICE 7 - Pie Chart

This pie chart visualizes the top 10 countries by total medals at the Tokyo Olympics, with each slice sized proportionally to a country’s medal count. The chart uses D3 v5 with SVG rendering, employing `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for encoding data into colored slices with labeled values and a legend. Data is fetched as CSV from a GitHub gist using D3’s `csv` method. Each slice displays its numeric total, while the legend pairs country names with their medal tallies.

Loading thumbnail…

ICE 7 - Line Chart

This line chart visualizes automobile sales in India from 1999 to 2012, using d3.csv to load data from a GitHub gist and d3.scaleTime and d3.scaleLinear to map years and sales values. The SVG rendering uses d3.axisBottom and d3.axisLeft for labeled axes, while d3.line generates the path that represents the sales trend over time. The chart includes a title and axis labels styled via CSS.

Loading thumbnail…

ICE - 7

This animated scatter plot cycles through different pairings of the Iris dataset's four measurements, updating every two seconds to reveal changing correlations. Each point is colored by species—blue for setosa, red for versicolor, and yellow for virginica—with white stroke outlines, while axis labels rescale to fit the newly selected dimensions. The visualization uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles, with a `setInterval` callback driving the rotation of x-axis variables. Rendered as an SVG with smooth transitions between states, it highlights how petal width, sepal width, petal length, and sepal length relate differently across flower types.

Loading thumbnail…

ICE6 - Avinash Chinta

This visualization displays Olympic medal data for multiple countries, plotting each nation as a circle based on its total medals and bronze medal count. The color and size of each circle vary according to the country’s gold and silver medal tallies. Built with React and D3 v6, the code uses `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and scale data from a GitHub-hosted CSV, then renders the result as SVG circles with labels.

Loading thumbnail…

ICE6 - Avinash Chinta

This scatter plot visualizes Olympic medal counts by country, using the Data Canvas Sense Your City dataset. The visualization displays each country's total medals on the x-axis against its name on the y-axis, with individual data points rendered as circles. Built with React and D3 v5, the code implements d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, while SVG circles with tooltip titles show precise medal values on hover. The chart includes labeled axes and a distinct teal color scheme for data marks.

Loading thumbnail…

Fork of ICE6 - Avinash Chinta

This visualization displays the relationship between countries and their total medal counts using a circular scatter plot, with each point representing a country positioned along the y-axis and its medal total along the x-axis. The code uses the vega-lite-api to construct the chart, registering with vega, vega-lite, and vega-tooltip for interactive hover details. Data is loaded asynchronously from a CSV file via d3.csv, sourced from the Auto MPG dataset, while the visualization renders to SVG with a customized dark theme and transparent background.

Loading thumbnail…

ICE6 - Avinash Chinta

This interactive scatter plot explores the relationship between miles per gallon, horsepower, and weight across different regions of origin, using data from the UCI Machine Learning Repository's Auto MPG dataset. Each circle’s size encodes vehicle weight, while color distinguishes the car’s origin, and hovering reveals the model name. Built with the Vega-Lite API, the visualization registers Vega, Vega-Lite, and Vega-Tooltip to enable interactive tooltips and responsive rendering. The underlying data is fetched asynchronously via d3.csv, with axes configured to exclude the domain line and styled with custom fonts and colors for readability.

Loading thumbnail…

ICE-6: Avinash Chinta

A horizontal bar chart displays total medal counts for twelve countries in the Tokyo Olympics, with country names on the y-axis and medal totals on the x-axis. Built with React and rendered as SVG, the visualization uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and bars are drawn as `rect` elements with a green fill.

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example displays a message about a dataset loaded from a remote CSV file, showing its size in kilobytes, row count, and column count. The visualization uses D3.js version 7.3.0 to fetch the data via the `d3.csv` method, which parses the CSV and returns an array of objects with a `.columns` property for metadata. The resulting information is rendered in a large, styled `<pre>` element on an HTML page, accompanied by an SVG image. The code directly leverages `d3.csv` and `d3.csvFormat` for parsing and size calculation.

Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and summarize a CSV dataset using D3.js. It fetches data from a remote gist-hosted text file via `d3.csv` and displays the calculated file size in kilobytes, total row count, and column count in a styled HTML `<pre>` element. The page also includes three static restaurant-related images. The visualization uses a React framework with SVG rendering and relies on the D3 v7 API for data parsing and formatting.

Loading thumbnail…

Fork of Fork of Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing a CSV file using D3.js version 7, displaying the resulting data summary in a styled HTML page. The CSV data is fetched from a remote GitHub gist URL, and the script uses the `d3.csv` API to asynchronously retrieve and parse the data. The page then calculates and displays the file size in kilobytes, the number of rows, and the number of columns. A static SVG image named "City.svg" is also embedded in the page, while the D3 code runs within a basic HTML document that includes a styled `<pre>` element for the output message.

Loading thumbnail…

Untitled

This example displays a simple HTML table of form submission data, with columns for submission ID, form ID, IP address, name, email, and message. The page includes a heading and a single row of sample data. The code uses basic HTML table markup with a border attribute, and includes a stylesheet and JavaScript reference. The table presents static data without any interactive features or dynamic behavior.

Loading thumbnail…

Fork of Saahithi face emoji

A yellow emoji-style face is rendered as an SVG with features built from D3 arc paths and circles: blue eyes with orange pupils, brown arc-based ears, a pink mouth, and an orange eyebrow ellipse. The React component uses D3 v7’s `arc()` to generate the mouth, eye, and ear shapes, while circles handle the head and irises. All elements are positioned via SVG transforms relative to the canvas center, with explicit stroke widths and fill colors applied directly in JSX. The visualization is a static, non-interactive illustration of combining React’s declarative rendering with D3’s geometry utilities.

Loading thumbnail…

Fork of Let's make a face with D3.js

This example shows a stylized yellow face built from SVG shapes—a circle for the head, circles for eyes, rectangles for eyebrows, and a half-annulus arc for the mouth. The eyebrows animate up and down in a repeating two-second transition using D3’s `transition().duration()`. The code uses `d3.select` with `d3.arc` to generate the mouth path, and positions elements via SVG attribute methods and template literals. Rendered in a React-free HTML page with D3 v5, the face scales relative to the SVG’s 960×500 dimensions.

Loading thumbnail…

Fork of Fork of smiley face

A yellow smiley face is drawn as a static SVG graphic, centered on a 960 by 500 canvas with a black outline, two black eyes, and a curved mouth. The face is built using React components that return SVG elements, while the mouth’s arc path is generated with the D3 `arc` function using inner and outer radii and specified start and end angles. D3 v7 and React 18 render the visualization, with hard-coded constants for eye offset, radius, and stroke width.