R

Rohith arabati

@rohith2803·28 public vizzes

Loading thumbnail…

Social Network graph

This example visualizes a small social network of seven named individuals using a force-directed graph. Nodes represent people, with links indicating connections between them, and thicker green strokes denote stronger relationships based on weight data. The visualization loads node and link data from a local `graphFile.json` file. It uses the older `d3.layout.force` API (from d3.v2/v3, despite the d3.v4 script tag) to simulate physics, with draggable nodes, circular markers, and labels rendered as SVG elements. Styling is applied via CSS classes.

Loading thumbnail…

ICE-8: Family Tree

This interactive visualization shows a family tree graph using D3.js version 6 within a React framework, rendered as animated SVG elements. The code uses d3.stratify to convert a flat array of parent-child relationships into a hierarchical structure, then d3.tree() to compute node positions. Links animate from source to target positions via transition.duration(), while descendant nodes appear as skyblue rectangles with brown borders, displaying names through text elements. The visualization demonstrates how d3.js transitions bring static hierarchical data to life through sequential path and text animations.

Loading thumbnail…

Centered US Map

This map uses the geoAlbers projection to center the United States, showing state boundaries as black interior lines against a green landmass. The sphere is filled with sky blue, while graticules are rendered subtly in gray, though the graticule paths are defined but not explicitly drawn in the visible code. Data comes from US Atlas TopoJSON, converted using the `feature` and `mesh` methods from topojson. The visualization is built with React, rendering SVG paths generated by `d3.geoPath` and `d3.geoGraticule`.

Loading thumbnail…

ICE-8 World Map

This example displays a natural Earth projection world map with countries rendered as grey filled paths with white borders, set against a sky-blue sphere background. It uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to generate SVG paths, while TopoJSON’s `feature` API parses country boundaries from a remote JSON file hosted on GitHub. The map is static, with no interactivity or transitions.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart visualizes the top 10 countries by vehicular deaths from air pollution in 2020, with each segment labeled in thousands and a legend listing states and their corresponding values. The chart is rendered as an SVG using D3 v5, loading CSV data from a GitHub gist. The code employs d3.pie and d3.arc to generate segments, d3.scaleOrdinal for color mapping, and d3.select for DOM manipulation, with text and legend elements added manually.

Loading thumbnail…

Fork of Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width for each sample. Points are colored by species (setosa, versicolor, and virginica) using a switch statement. The visualization is built with D3 v6 and rendered as SVG in a React framework. It uses D3's `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to load data, scale axes, and draw the plot. Axis labels and tick marks are customized with CSS styling in the HTML page.

Loading thumbnail…

Area chart-ICE-07

This chart visualizes total car sales from 2013 to 2022 as a smooth sky-blue area curve. It uses d3.scaleTime and d3.scaleLinear for the axes, with d3.area and d3.curveBasis to generate the filled path. The sales data is loaded from a remote CSV file, and d3.axisLeft and d3.axisBottom render the labeled axes with gridlines. The title and axis labels are added as SVG text elements.

Loading thumbnail…

Fork of line chart section 3

This example shows a line chart tracking total car sales per year from 2013 to 2021, with time on the x-axis and sales on the y-axis. Using D3 v5, it loads CSV data from a GitHub gist and parses dates with `d3.timeParse`. The chart employs `scaleTime` and `scaleLinear` for axes, while `d3.line` generates the red path. Grid lines are drawn via `axisBottom` and `axisLeft` with tick sizes spanning the plot area, and axis labels rotate for the y-axis.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the population of the top 10 countries as horizontal bars within an SVG, using a bar chart layout. The visualization is built with React and D3, where React manages the component state and rendering, while D3's `scaleBand`, `scaleLinear`, `max`, and `csv` functions handle data loading, scaling, and layout. The SVG is rendered using React's declarative syntax, with axes and tick marks generated from D3's scale methods. The code references a CSV data source and displays a loading message while fetching data.

Loading thumbnail…

Piechart ICE - 7 Rohith Arabati

This pie chart visualizes annual car sales for different companies in India, sourced from a CSV file hosted on GitHub. The visualization displays each company’s sales as a slice with a proportional angle, color-coded via an ordinal scale, and includes a legend and value labels. Built with D3.js v5 and rendered as SVG, the code uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to structure the chart, with data fetched using `d3.csv`.

Loading thumbnail…

Fork of Fork of ICE - 7 Pie Chart

A pie chart displays annual car sales for different companies in India, with each slice labeled with its sales value in thousands and accompanied by a color-coded legend showing company names and corresponding totals. The visualization uses d3.pie() and d3.arc() to generate the chart, with d3.scaleOrdinal assigning colors from a predefined palette. Data is loaded asynchronously from a CSV file using d3.csv, and text labels are positioned using the arc centroid method. The SVG rendering relies on d3 v5, with formatting applied via d3.format.

Loading thumbnail…

Fork of Stylized Line Chart

This line chart shows temperature readings over the course of a week using a smooth, natural curve. The React app loads CSV data from a GitHub-hosted dataset about San Francisco temperatures, then renders the visualization as SVG. It uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line with curveNatural to draw the path, with styled tick marks and axis labels in the Poppins font.

Loading thumbnail…

Fork of VizHub User Count Over Time

This fork of a VizHub dashboard shows the cumulative growth of unique users over time, from the platform’s launch in August 2018 through March 2022. A single black line traces the upward trend, with small circles marking each data point. D3 v4’s `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and axis components render the SVG chart, while the `d3-svg-annotation` library adds labeled callouts for notable events like the VizHub 2.0 Kickstarter and the Datavis 2020 launch. Data comes from local CSV file `users.csv`.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart shows annual car sales for different companies in India, with each slice labeled with its sales value in thousands and accompanied by a color-coded legend listing company names and corresponding figures. The visualization uses D3 v5, loading CSV data via `d3.csv` and computing arc paths with `d3.pie` and `d3.arc`. Colors are assigned through `d3.scaleOrdinal`, and the chart renders as SVG elements, including a centered pie and a legend positioned to the right, with labels formatted using `d3.format`.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an interactive scatter plot of the Iris dataset, cycling through different feature pairings on the x-axis every two seconds. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to SVG circles. The chart is reusable via a custom `scatterPlot` function that exposes setters for width, height, data, margins, and accessor functions, allowing the x-axis to dynamically switch between petal width, sepal width, petal length, and sepal length while the y-axis remains fixed on sepal length.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the latest population of different countries, with each slice representing a country and its death count in thousands. The visualization uses D3.js v5 to load CSV data from a GitHub gist, then applies the `d3.pie` and `d3.arc` functions to generate SVG paths and text labels positioned at each segment’s centroid. A legend on the right pairs colored rectangles with country names and values, while `scaleOrdinal` maps death counts to a fixed palette of ten colors.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot built with D3.js that visualizes the Iris dataset, cycling through different attribute combinations on the x-axis every two seconds. The chart is implemented using a configurable `scatterPlot` function that leverages D3’s `scaleLinear`, `extent`, and axis helpers to render SVG circles and axes. Data is loaded asynchronously from a CSV file using `d3.csv`, and the plot updates dynamically by rebinding the x-value mapping and re-rendering through the SVG container. The visualization uses a custom font and fills the entire browser window.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot built with D3.js that visualizes the Iris dataset, cycling through different attribute combinations on the x-axis every two seconds. The chart is implemented using a configurable `scatterPlot` function that leverages D3’s `scaleLinear`, `extent`, and axis helpers to render SVG circles and axes. Data is loaded asynchronously from a CSV file using `d3.csv`, and the plot updates dynamically by rebinding the x-value mapping and re-rendering through the SVG container. The visualization uses a custom font and fills the entire browser window.

Loading thumbnail…

Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6 within a React-free HTML page, leveraging `d3.csv` for data loading, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for ticks. Circles are rendered via SVG with a fixed radius, and the code also destructures sepal dimensions but only uses them as unused attributes on each circle, not for positioning. The visualization fills the browser window with a large bottom margin.

Loading thumbnail…

IRIS Dataset Scatter plot

This scatter plot visualizes the Iris dataset, showing sepal length against petal length for individual flowers. Each circle represents a sample, though the code does not differentiate species by color. The visualization uses D3 v5 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a GitHub gist. SVG circles are positioned via margin-based linear scales, while axis labels are rotated and placed manually. The chart auto-sizes to the browser window using `innerWidth` and `innerHeight`.

Loading thumbnail…

IRIS Dataset Scatter plot

This example visualizes the classic Iris dataset, plotting sepal length on the x-axis against petal length on the y-axis for each flower specimen. Each circle represents one data point, with the scatter plot revealing the overall distribution and clustering patterns across the three species. The visualization is built using React with D3 v5, leveraging `d3.csv` to load the data, `scaleLinear` and `extent` for scaling, and `axisLeft` and `axisBottom` to render the axes. The SVG chart is rendered full-screen, with axis labels for Sepal Length, Petal Length, and Species.

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays sales data for the top 11 best-selling books, sourced from a CSV file. The visualization uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering marks as SVG rectangles within a React `<svg>` element. The code imports specific D3 functions like `select`, `csv`, and `scaleLinear`, and employs React's `useState` and `useEffect` hooks to load and process the data before rendering.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing sepal length against petal length for individual iris flowers, with color encoding species. The visualization uses D3 v5's `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color, and `d3.legendColor` for the color legend. Points are rendered as SVG circles positioned using D3's `axisBottom` and `axisLeft` scales, with the data loaded from a CSV file.

Loading thumbnail…

csvdata

This example demonstrates how to load and parse a CSV file using D3 v4 within a React application, displaying the dataset's basic statistics—file size in kilobytes, row count, and column count—in a styled HTML paragraph. The SVG background includes decorative vector shapes and icons, while the main interaction relies on `d3.csv` to fetch data from a GitHub Gist URL and log the parsed result to the console. The page uses CSS for visual formatting, with the message rendered via the DOM's `textContent`.

Loading thumbnail…

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

This example demonstrates how to load and parse CSV data with D3.js, displaying key dataset statistics in a styled HTML page. The code uses `d3.csv` to fetch a remote CSV file from a GitHub gist, then computes and presents the data size in kilobytes, row count, and column count within a styled `<pre>` element. It also includes a static SVG image in the page. The example uses D3 v7, SVG rendering, and standard HTML/CSS for visual presentation. The underlying data source is a CSS color palette stored as a CSV file.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example renders a simple emoji-like face using React and D3’s arc generator for the mouth. The SVG drawing consists of a green circle for the head, two white eyes with black outlines, and a curved red mouth path created with d3.arc. The code demonstrates how to transform a group element to center shapes, use React’s JSX for layout, and import D3 utilities from a CDN. All graphics are drawn declaratively via SVG elements within a React component.

Loading thumbnail…

Fork of Hello HTML

This example shows a stylized smiley face built entirely from SVG primitives. A yellow circle with a black outline forms the head, two solid black circles serve as eyes, and a curved mouth is drawn as a partial ring. The face is constructed from modular React components, including `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is generated using the D3 `arc` API to define a path, while the entire composition is centered within an SVG using a translated group.

Loading thumbnail…

Fork of Smiley Face Part IV

This example renders a classic smiley face using React components and D3’s `arc` generator to create the mouth path. A yellow circle serves as the face, stroked in red, with two black eyes positioned symmetrically on either side. The D3 arc function defines the mouth’s inner and outer radii and angular range, while React handles the SVG structure with JSX and a reusable `BackgroundCircle` component. The visualization is static, with all geometry computed from fixed constants and drawn entirely through SVG elements.