G

Guntupalli Mohan kalyan

@KalyanGuntupalli465·18 public vizzes

Loading thumbnail…

Network ICE 8

This example shows a small force-directed network of six tech companies and research organizations, with weighted links representing collaborations. It uses D3 v7’s `d3.forceSimulation` with a link force, many-body charge force, and centering force to position nodes. Nodes are rendered as colored SVG circles based on type (company, research, hardware), with draggable behavior via `d3.drag`. Links appear as gray lines, and labels display each entity’s name. The simulation updates node and link positions on each tick.

Loading thumbnail…

Tree ICE 8

This example shows a hierarchical tree of the technology industry, with a root node for "Technology" branching into software, hardware, and e-commerce categories, each leading to specific companies. The visualization uses d3.hierarchy and d3.tree to compute the layout, then renders SVG paths for links and distinct shapes—rectangles for the root, orange circles for categories, and green circles for leaves—with labels positioned below each node.

Loading thumbnail…

Country map ICE 8

This choropleth map shows crime rate values for U.S. states, encoded with a threshold color scale ranging from light blue to dark navy. The map renders SVG paths via `d3.geoPath` with a `d3.geoAlbersUsa` projection, using TopoJSON data from the us-atlas repository. State values are loaded from a CSV file and mapped to fill colors, with a legend displaying the color bins alongside interactive tooltips on hover.

Loading thumbnail…

world map ice8

This world map visualizes global internet usage percentages across countries, with a purple sequential color scale indicating usage rates from 0-30% to 91-100%, and hover interactions revealing exact country names and usage values via a tooltip. Data from a CSV file is joined to TopoJSON country geometries loaded from world-atlas, projected using `d3.geoNaturalEarth1()` and rendered with `d3.geoPath()`. The map uses D3's `scaleThreshold` for color binning, with a custom legend and styled SVG paths for the choropleth display.

Loading thumbnail…

Reusable Scatter plot - ICE 7

This example shows a reusable scatter plot of sales versus profit across 160 monthly data points, with each point colored by a constant category to demonstrate the chart’s legend. The visualization is built using D3 v7, leveraging `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for coloring, and `d3.axisBottom` and `d3.axisLeft` for gridlines. Data is loaded from a CSV file via `d3.csv`, and the chart is implemented as a configurable function with setters for x, y, color, and label accessors.

Loading thumbnail…

Line chart - ICE 7

This line chart visualizes monthly Sales, Profit, and Expenses across 160 data points, using three distinct colored lines with circular markers to highlight each metric. Rendered as an SVG using D3 v7, the chart employs a point scale for the x-axis and a linear scale for the y-axis, with axes labeled and tick text rotated for readability. Data is loaded from a CSV file via d3.csv, and tooltips are provided through SVG title elements appended to the markers. A legend identifies the three series, which show linear growth trends throughout the months.

Loading thumbnail…

line chart ICE 7

This line chart visualizes the growth of electric vehicle sales over time, with the x-axis representing years and the y-axis measuring sales in thousands. The chart uses a steel-blue line with circular markers to highlight data points, and includes clear axis labels and a bold title. Built with D3 v7, the visualization loads data from a CSV URL, uses `d3.scaleLinear()` for both axes, applies `d3.axisBottom()` and `d3.axisLeft()` for tick marks, and generates the line via `d3.line()`. Data points are added as SVG circles.

Loading thumbnail…

Area Chart ICE 7

This example shows monthly Sales, Profit, and Expenses trends over 160 months using a multi-series area chart with overlaid lines and circles. The chart uses d3.area and d3.line generators to render semi-transparent filled regions and stroke lines, while a d3.scalePoint maps months to x positions. Axes, rotated labels, a legend, and tooltip titles are added via d3-axis and SVG title elements, with data loaded from Sales.csv using d3.csv.

Loading thumbnail…

Pie Chart ICE 7

This pie chart visualizes the distribution of total Sales, Profit, and Expenses from a CSV dataset containing 160 monthly records. D3 v7 computes the column sums and renders three color-coded slices with category labels, using `d3.pie()` and `d3.arc()` for the SVG paths and `d3.scaleOrdinal` for colors. A legend lists the exact aggregated values for each category.

Loading thumbnail…

Ice 6 Scatter Plot

This scatter plot visualizes the relationship between petal length and sepal length for Iris flowers, with each black circle representing a sample from the dataset. The chart uses D3 v6’s `csv` loader to fetch the Iris dataset from a GitHub gist, then applies `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map values and render axes. SVG circles are positioned via `attr('cx')` and `attr('cy')`. Axis labels and a bold title clarify the variables, while the plot fills the entire browser window using `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

ICE6

This interactive bar chart shows monthly sales figures, with each bar representing a month’s sales value from the `Sales.csv` dataset. The chart supports clicking on a bar to highlight it, visually distinguishing the selected month by changing its fill to white with a black stroke. The visualization is built with React and D3 v7, using `d3.csv` to parse the data, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom` and `d3.axisLeft` for axes, all rendered as SVG within a responsive container.

Loading thumbnail…

ice 6 combined

This combined bar-and-line chart displays monthly sales and profit trends using a sampled subset of the CSV data. Bar heights represent sales figures, while a red line with circular markers overlays profit values on the same axes. Built with D3 v7, the visualization uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the profit path, with points rendered as SVG circles.

Loading thumbnail…

ICE 6 multi line

This example displays a multi-series line chart titled "Sales Multi-Series Line Chart," plotting Sales, Profit, and Expenses across 161 time points. The chart filters the CSV data to every tenth month, reducing visual clutter. Built with D3.js v7, the visualization uses `d3.line` to create three distinct colored paths and renders the output as SVG. The code also includes axes, a legend, and data point markers, with the y-axis scaled to accommodate the maximum value across all three series.

Loading thumbnail…

Scatter Plot ICE 6

A scatter plot displays 75 data points across a simple two-dimensional space, with each circle positioned at its corresponding x and y coordinate. The visualization uses D3 v7's selection and data join methods to render the circles as SVG elements, with the React framework managing the component lifecycle and container sizing. The dataset is imported from a separate JavaScript module, and the circles are drawn with a fixed radius of 30 pixels. No axes, labels, or interactivity are present in this minimal example.

Loading thumbnail…

Assignment 5

This example summarizes a laptop dataset by displaying basic file statistics—file size, row count, and column count—as text in the browser. It fetches a CSV file from a GitHub gist, parses it with `d3.csvParse`, and prints the resulting metadata to both the console and the HTML body. A static SVG graphic, created with D3’s `append` and `attr` methods, renders rectangles depicting a stylized laptop shape. The page uses D3 v7 and simple CSS styling to present a minimal, test-oriented view of the data.

Loading thumbnail…

Fork of HTML Starter

This example showcases a static composition of basic geometric shapes rendered as SVG elements. It begins by selecting the SVG canvas and appending a series of shapes, including two rectangles and two circles, each with hardcoded coordinates and fill colors. The visualization relies on the D3.js library (v7) to manipulate the SVG, using methods like `append` and `attr` to define the shapes' properties. The rendering is done entirely through SVG, with no external data source, and the layout is fixed, not responsive to any user interaction.

Loading thumbnail…

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

This example draws a smiling face using D3.js in an SVG canvas, with a yellow circular head, two white eyes with black pupils, an orange triangular nose, and a black arc mouth. The face is built through a sequence of D3 selection and attribute-setting calls, including `d3.select` for the SVG container and `d3.arc` to define the curved mouth path. A short animation moves the eyebrows vertically via chained transition operations, giving the static face a lively, animated expression over a two-second cycle.

Loading thumbnail…

Fork of CV: Loading CSV Data

Five circles read from a CSV file form a static scatter plot over a responsive full-viewport container. Clicking a circle toggles its selection state, highlighting it with a white fill and black stroke. The React app loads the data with `d3.csv`, manages container dimensions using a `ResizeObserver` hook, and renders the SVG circles via `d3.select` and `d3.scaleLinear`.