Skip to main content
Log in
K

KOLLIPATI NIKHIL

@nikhilkollipati·27 public vizzes

Loading thumbnail…

World Map

This example displays a world map using a Natural Earth projection. It renders each country as a filled SVG path with a light blue fill and dark stroke. The map is drawn from TopoJSON data loaded from the `world-atlas` package, converted to GeoJSON features via `topojson.feature`. The visualization uses `d3.geoNaturalEarth1` to define the projection and `d3.geoPath` to generate the SVG path data.

Nov 9, 2025
Loading thumbnail…

US Map

A choropleth map of the United States colors individual states by population, using a threshold color scale that ranges from light yellow to dark amber. The visualization loads US state boundaries from the us-atlas TopoJSON file and renders them as SVG paths via d3.geoPath with an Albers USA projection. Population values are mapped to FIPS codes using a JavaScript Map, and the d3.scaleThreshold assigns fill colors based on population brackets. Hovering over a state triggers a native SVG title tooltip displaying the FIPS code and population figure.

Nov 9, 2025
Loading thumbnail…

Tree Diagram

This tree diagram visualizes a small, three-level dataset of animals, showing the hierarchical structure from the root "Animals" through categories like "Mammals" and "Birds" down to individual species. Nodes are drawn as colored circles, with a distinct color per depth level, connected by horizontal links. The example uses D3 v7 APIs including `d3.tree`, `d3.hierarchy`, `d3.linkHorizontal`, and `d3.scaleOrdinal`, with SVG rendering for all elements.

Nov 9, 2025
Loading thumbnail…

Network

A social network graph displays six people grouped by category—Family, Friends, or Work—with colored nodes and labeled connections. The visualization uses a D3 force-directed layout via `d3.forceSimulation`, `forceLink`, and `forceManyBody` to position nodes and links dynamically. Node colors are mapped with a `d3.scaleOrdinal` against a hardcoded dataset of names and relationships. Interactions are minimal, with the simulation updating SVG circle and line positions on each tick.

Nov 9, 2025
Loading thumbnail…

World Map

A choropleth map of the United States colors individual states by population using a D3 threshold scale, with darker shades representing higher population values. The visualization loads geographic boundaries from a TopoJSON file via the `us-atlas` package and converts them to GeoJSON using `topojson.feature`. A `d3.geoAlbersUsa` projection is fitted to the SVG dimensions, and `d3.geoPath` renders each state as an SVG path. Population data for ten states is provided inline as a Map, with states lacking data shown in the lightest color.

Nov 9, 2025
Loading thumbnail…

Area chart

This area chart shows the average fuel efficiency (MPG) of cars by model year, using data from the auto-mpg.csv dataset. The code loads the CSV with d3.csv, filters out invalid entries, aggregates averages with d3.rollups, and renders a smooth, semi-transparent blue area using d3.area with curveMonotoneX. Axes are drawn with d3.axisBottom and d3.axisLeft, and the chart is built in SVG.

Oct 28, 2025
Loading thumbnail…

Line chart

This line chart visualizes the average fuel efficiency (MPG) of automobiles by model year, using data from the auto-mpg.csv dataset. The visualization aggregates individual car records into yearly averages, with each year represented as an orange dot connected by a blue line. The chart is rendered as an SVG using D3.js v7, employing d3.csv for data loading, d3.rollups for aggregation, d3.mean for calculating averages, d3.scaleLinear for both axes, and d3.line for the path generation.

Oct 28, 2025
Loading thumbnail…

pie chart

A pie chart visualizes the average miles per gallon (MPG) for cars grouped by their region of origin within the Auto-MPG dataset. Three slices—colored blue, orange, and teal—represent the USA, Europe, and Japan, with labels and a legend identifying each category. The code loads the CSV with `d3.csv`, cleans missing values, and aggregates the data using `d3.rollups` to compute mean MPG per origin. It then renders the chart with `d3.pie` and `d3.arc` in an SVG, styled by a `d3.scaleOrdinal` color scale.

Oct 28, 2025
Loading thumbnail…

pie chart

A pie chart visualizes the average miles per gallon (MPG) for cars grouped by their region of origin within the Auto-MPG dataset. Three slices—colored blue, orange, and teal—represent the USA, Europe, and Japan, with labels and a legend identifying each category. The code loads the CSV with `d3.csv`, cleans missing values, and aggregates the data using `d3.rollups` to compute mean MPG per origin. It then renders the chart with `d3.pie` and `d3.arc` in an SVG, styled by a `d3.scaleOrdinal` color scale.

Oct 28, 2025
Loading thumbnail…

scatter plot

This scatter plot visualizes the relationship between horsepower and miles per gallon for a collection of cars from the Auto MPG dataset. Each point represents a vehicle, with its color denoting the country of origin and its size reflecting the car's weight. The visualization is rendered as an SVG using the D3.js library, specifically leveraging `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` for categorical color encoding, with animated tooltips providing details on hover.

Oct 27, 2025
Loading thumbnail…

Combined chart Assignment

This visualization presents retail sales trends for Electronics, Clothing, and Groceries across 150 months using two SVG charts. The first chart displays three multi-series line graphs with a dashed annotation marking the peak Electronics sales month. The second chart combines a bar chart of total monthly sales with an overlaid line for Electronics revenue. Built with D3 v7, the example loads CSV data, uses `d3.line` and `d3.scaleBand`/`d3.scaleLinear`, and includes gridlines and legends to clarify the dual representations.

Oct 19, 2025
Loading thumbnail…

Multi series Assignment

This visualization presents retail sales trends for Electronics, Clothing, and Groceries across 150 months using a multi-series line chart. The top panel displays three colored lines representing each product category, while the bottom panel combines a gray bar chart of total sales with an overlaid blue line for Electronics. The example uses D3 v7 (d3.v7) with the scaleLinear, scaleBand, axisBottom, axisLeft, line, and csv APIs to render interactive-free SVG charts. Data is loaded from a local CSV file, and colors are assigned via d3.scaleOrdinal.

Oct 19, 2025
Loading thumbnail…

Scatter plot assignment

A scatter plot visualizes the relationship between sepal length and petal length for 40 samples from the Iris dataset, with each point representing a single flower. The D3.js v7 code loads the CSV data using `d3.csv` and `d3.autoType`, then renders circles in SVG with `d3.scaleLinear` for both axes. Axis elements are generated via `d3.axisBottom` and `d3.axisLeft`. Points are drawn with uniform steelblue fill and opacity, and the chart includes labeled x- and y-axes.

Oct 19, 2025
Loading thumbnail…

retail transactions

This bar chart visualizes total sales revenue by product category from the `retail_transactions.csv` dataset. It loads data with `d3.csv`, aggregates the "Total Amount" field using `d3.rollups` and `d3.sum`, and renders the result as steel-blue bars. The chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with rotated category labels and value labels above each bar. The SVG canvas is 900 by 520 pixels with specified margins.

Oct 19, 2025
Loading thumbnail…

Retail_Transactions

A bar chart displays total sales for product categories, aggregating the "Total Amount" field from a retail transactions CSV. The visualization ranks categories in descending order of sales. The implementation uses D3 v7 within an SVG canvas, employing `d3.csv` for data ingestion, `d3.rollups` with `d3.sum` for aggregation, and `d3.scaleBand` with `d3.scaleLinear` to construct the axes and bars.

Oct 19, 2025
Loading thumbnail…

Retail sales bar chart

This visualization is a horizontal bar chart comparing the total sales amounts for the top ten product categories from a retail transaction dataset. The chart is built using D3.js version 7 within a React application, employing a data join approach to render and update the SVG elements. The bars are colored teal, with a clickable red highlight for a selected category. It uses `scaleLinear` and `scaleBand` for the axes, and `axisBottom` and `axisLeft` for the tick marks, with the data loaded from a local `data.csv` file and aggregated using `d3.rollups`.

Oct 19, 2025
Loading thumbnail…

Retail Sales Bar Chart

This example shows a bar chart of the top 10 most populous countries, using the UN population estimates dataset. The chart displays population values on the y-axis and country names on the x-axis, with a light gray inner rectangle framing the plot area. It uses D3’s `scaleBand` and `scaleLinear` for positioning, `axisLeft` for the y-axis, and custom `xAxis` and `yAxis` label functions from `@curran/axis-labels`. The data is filtered to country-level entries and sorted in descending order before rendering the bars.

Oct 19, 2025
Loading thumbnail…

Retail Sales Bar Chart

This bar chart displays total retail sales by product category, from a CSV dataset that is grouped and summed with `d3.rollups` and `d3.sum`. The top ten categories are sorted descending and rendered as steel-blue rectangles using an SVG `scaleBand` and `scaleLinear`. Axis labels are rotated via `d3.axisBottom`, and the chart includes a title and y-axis gridlines generated with `d3.axisLeft`.

Oct 19, 2025
Loading thumbnail…

Fork of Retail Sales Bar Chart

This example shows a bar chart of total retail sales aggregated by product category, highlighting the top 15 categories by revenue. It loads a CSV dataset and uses `d3.rollups` to group and sum the “Total Amount” field for each category. The visualization is rendered as an SVG using D3 v7, with a band scale for category positioning, a linear scale for sales values, gridlines, value labels on each bar, and rotated axis tick labels for readability.

Oct 19, 2025
Loading thumbnail…

Retail Sales Bar Chart

This bar chart shows total retail sales for the top 15 product categories, with each bar’s height representing the sum of transaction amounts. The visualization uses d3.csv to load tabular data, d3.rollups to aggregate totals by category, and d3.scaleBand with d3.scaleLinear to position and size bars. Value labels appear above each bar, while rotated category names and a gridline layer improve readability. The SVG rendering includes axis ticks formatted with d3.format, and the layout is driven by custom margins defined in the script.

Oct 19, 2025
Loading thumbnail…

Fork of Bar chart assignment

This visualization displays average monthly sales data as a bar chart, with each bar representing a month’s sales value across multiple years of data. The chart uses D3.js (v7) scales and axes to map the categorical month values to the x-axis and the continuous sales values to the y-axis, rendering the bars as SVG rectangles. The code loads the data from a CSV file using `d3.csv`, then applies `d3.scaleBand` and `d3.scaleLinear` for positioning, with rotated x-axis labels and a fixed margin for the plot area.

Oct 19, 2025
Loading thumbnail…

Bar chart assignment

This example shows a bar chart of average monthly sales across multiple years, with months from January through December on the x-axis and sales amounts on the y-axis. The visualization uses D3 v7 to load data from a CSV file via `d3.csv`, then binds the data to SVG rectangles using `data().enter().append("rect")`. It employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with axes rendered by `d3.axisBottom` and `d3.axisLeft`. The bars are filled with a steelblue color, and the chart includes a titled heading.

Oct 19, 2025
Loading thumbnail…

Bar Chart assignment

This bar chart shows average monthly sales trends across a year, with each bar representing a month’s sales value from the CSV dataset. The visualization aggregates and displays repeated monthly entries as individual bars, making seasonal patterns and overall growth apparent. Built with D3.js v7, the code loads data via `d3.csv`, maps values using `d3.scaleBand` and `d3.scaleLinear`, and renders the chart as an SVG. Axes are added with `d3.axisBottom` and `d3.axisLeft`, and the chart is titled “Average Monthly Sales Bar Chart” with a rotated x-axis label for readability.

Oct 19, 2025
Loading thumbnail…

Fork of Fork of D3 Starter

This example presents an average monthly sales bar chart, displaying sales data from a CSV file across repeated calendar years. The visualization aggregates repeated monthly entries into bars, showing the overall sales distribution for each month. Built with D3 v7, the code loads data via `d3.csv`, maps sales values to numbers, and constructs the chart using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. SVG rectangles represent each bar, while `d3.axisBottom` and `d3.axisLeft` render the axes, with a title added as an SVG text element.

Oct 19, 2025
Loading thumbnail…

Fork of D3 Starter

This bar chart visualizes average monthly sales data across multiple years, displaying sales figures for each month from January through December. The chart uses a steel blue color scheme and rotated x-axis labels to improve readability of the month names. The visualization is built with D3 v7, loading CSV data through the `d3.csv` API and rendering the bar chart as SVG elements. The code uses `d3.scaleBand` for the categorical month axis and `d3.scaleLinear` for the continuous sales values, with axes generated using `d3.axisBottom` and `d3.axisLeft`.

Oct 19, 2025
Loading thumbnail…

Fork of D3 Starter

This example displays the text "Hello D3" in the browser, demonstrating the minimal setup required for a D3.js project. It creates a static HTML page with an import map that loads the D3 library from a CDN, then uses a single `select` call from D3 to set the body's text content. The page is styled with large, centered font size to make the output visually prominent.

Oct 19, 2025
Loading thumbnail…

Fork of HTML Starter

This example shows a simple HTML table of shape data alongside a static SVG graphic containing a red circle, a blue rectangle, and a green polygon. The page summarizes the dataset with a total shape count and the average area. The visible code uses SVG shapes and a JavaScript `fetch` call to load a CSV file from a GitHub gist, dynamically populating the table and computing the summary from the parsed rows.

Oct 4, 2025