Skip to main content
Log in
N

nikhilagopi

@nikhilagopi·24 public vizzes

Loading thumbnail…

Cars Tree

This example displays a hierarchical tree of car manufacturers and models, with interactive nodes that expand and collapse. Built with D3.js v3, it loads data from a JSON file and renders the tree using SVG elements. The visualization incorporates CSS styling and jQuery alongside D3’s layout algorithms. It demonstrates custom tooltips, node selection, and pan/zoom capabilities, with links and nodes colored by data type properties.

Apr 13, 2023
Loading thumbnail…

India Map

This interactive map of India displays state and district boundaries overlaid on a Mercator-projected SVG. Users can pan and zoom the map using d3.zoom, with districts colored via d3.scaleOrdinal and schemeCategory10. Hovering over a district reveals its name and state in a tooltip. The visualization uses d3.geoPath, d3-geo-projection, and topojson to render geographic data from two JSON sources containing state and district boundaries, with text labels placed at path centroids.

Apr 13, 2023
Loading thumbnail…

World map

This example shows an interactive world map rendered as an SVG, with countries filled in green that turn red on hover against a sky-blue sphere background. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using the `feature` method from TopoJSON. The visualization uses D3’s `geoEquirectangular` projection and `geoPath` to generate country outlines, while `select` and `selectAll` manage the SVG path elements. The map is drawn entirely with D3 v5 and CSS styling for hover effects.

Apr 12, 2023
Loading thumbnail…

Friends Network

This interactive network graph from d3.v4 and React visualizes connections among a group of Instagram friends, with nodes representing individuals and weighted links showing relationship strength. Nodes are positioned using a force-directed layout via `d3.layout.force`, with gravity, charge, and distance parameters controlling the simulation. Users can click and drag nodes to rearrange the layout, while hovering over a node triggers a tooltip displaying the person's name. The graph renders as an SVG with animated tick updates, and node circles are colored green with violet overlays for tooltip interaction.

Apr 12, 2023
Loading thumbnail…

World map

This example displays a world map rendered as yellow countries on a gray sphere using an equirectangular projection. The code loads geographic data from a TopoJSON file, converts it to GeoJSON with `topojson.feature`, and draws the paths with `d3.geoPath`. Country shapes change color to blue on hover, and the visualization loads D3 and TopoJSON from UNPKG, demonstrating ES6 module imports within VizHub.

Apr 11, 2023
Loading thumbnail…

3D Scatter Plot

A 3D scatter plot visualizes nutrient data for various vegetables, mapping calcium, vitamin, and protein content along the three axes. The chart uses blue circular markers with green outlines and an opacity setting, rendered within a styled layout that includes axis titles and no margin. It loads a CSV dataset from a GitHub gist using D3's `d3.csv` function, then constructs the plot with Plotly's JavaScript API, specifically the `Plotly.newPlot` method and `scatter3d` trace type.

Apr 5, 2023
Loading thumbnail…

3D bonus ICE

This chart visualizes top car brand sales across ten countries as a 3D column graph, with each bar representing a single country’s revenue in billions of USD. Using Highcharts with the highcharts-3d extension, the chart applies an isometric perspective through `options3d` settings (alpha, beta, depth) and stacks series without grouping. The x-axis lists car brands, while the y-axis shows sales figures. Each data point is explicitly mapped to a category index, and series are labeled with country names.

Mar 31, 2023
Loading thumbnail…

3D bar chart

This interactive 3D bar chart visualizes the stock prices of top companies from January to June, with a multi-series dataset loaded from a CSV file. The visualization renders each company's monthly values as three-dimensional bars using the d3-x3d library, which integrates D3.js with X3DOM for WebGL-based rendering. The chart is animated and supports hover interactions, allowing users to inspect individual data points. Additional libraries including AnyChart are loaded but not utilized in the visible code, while the styling is handled through custom CSS.

Mar 31, 2023
Loading thumbnail…

3D Bar chart

This example shows a 3D vertical bar chart comparing the team sizes of six IT roles across seven major technology firms. Each firm appears along the x-axis, with bars grouped and stacked by role, such as Project Management, Security, and Support Team, while the use of depth and rotation makes the comparison visually dimensional. The chart is built with Highcharts and the Highcharts 3D module, using column series with `options3d` enabled and explicit `depth` and `groupZPadding` settings to create the three-dimensional effect and separate stacked groups. Data is loaded directly as static arrays in the script.

Mar 31, 2023
Loading thumbnail…

ICE-7 Line Chat

This visualization shows how mobile phone costs change over time, with a single red line charting monthly price data from a CSV file. The x-axis represents months parsed with `d3.timeParse` from MM/DD/YYYY format, while the y-axis shows cost values scaled from zero to the maximum data point. Using D3 v5, the chart renders as SVG with `d3.line`, `scaleTime`, `scaleLinear`, and axis components, including gridlines and labeled axes for month and cost.

Mar 30, 2023
Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes the cost of mobile phones over time, with a red line and green shaded region representing the trend. The chart uses a time-based x-axis for months and a linear y-axis for cost values, with blue axis labels and grid lines. The code leverages D3 v5’s `scaleTime`, `scaleLinear`, `line`, and `area` generators with a basis curve for smoothing, alongside `axisBottom` and `axisLeft` for ticks. Data is loaded from a CSV file and rendered as SVG within a React framework.

Mar 30, 2023
Loading thumbnail…

ICE-7 Pie Chart

This pie chart displays the number of films and events for the top eight countries, sorted by total library size and colored from a categorical scale. The visualization is built with D3 v5, using `d3.pie` and `d3.arc` to generate the slices and a legend with rectangles and text. Data is loaded from a remote CSV file using `d3.csv`, and the interactive mouseover logs each slice’s library size to the console. The SVG output is positioned at a fixed location with a transform.

Mar 30, 2023
Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot displays the Iris dataset, cycling through different x-axis attributes every two seconds to reveal patterns across petal and sepal measurements. Circles are colored by species (setosa, versicolor, virginica) and sized according to sepal dimensions. Built with d3.js v6, it demonstrates a modular `scatterPlot` function using `scaleLinear`, `axisLeft`, `axisBottom`, and SVG circle elements, with data fetched from a GitHub Gist. The animation uses `setInterval` to update the plot, while axes and marks redraw dynamically.

Mar 29, 2023
Loading thumbnail…

ICE-7 Resuable scatter plot

This interactive scatter plot animates through different pairings of Iris flower measurements, cycling between petal width, sepal width, petal length, and sepal length every two seconds. Circles representing individual flowers are colored by species—green for setosa, indigo for versicolor, and red for virginica—using D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs within a reusable `scatterPlot` module. The SVG visualization loads CSV data from a GitHub gist and updates axes and circle positions via `setInterval`, with all rendering handled by D3 selections and joins.

Mar 29, 2023
Loading thumbnail…

ICE_6_BG

This visualization compares Amazon Prime membership costs across twelve states using a horizontal bar chart. Each bar’s length encodes the monthly basic plan price, with state names listed on the y-axis and dollar amounts on the x-axis. Built with React and D3 v5, the code loads CSV data via `d3.csv`, scales bars with `scaleBand` and `scaleLinear`, and renders tick marks and rectangles as SVG elements. The chart emphasizes a single category of data rather than temporal or geographic trends.

Mar 23, 2023
Loading thumbnail…

ICE_6_car_details

A horizontal bar chart displays the top ten car models by sales units, using skyblue rectangles scaled by a linear axis. The visualization loads CSV data from a GitHub gist, processes it with D3's `csv` method, and renders the chart in an SVG via React. D3's `scaleBand` and `scaleLinear` position the bars, while `axisBottom` tick marks are manually drawn with red lines. The React component manages state with `useState` and fetches data asynchronously using `useEffect`.

Mar 23, 2023
Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower specimen while coloring points by species (setosa, versicolor, or virginica). Built with D3 v6 and React, it uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for ticks. The SVG circles use attributes `rx` and `ry` to encode sepal dimensions, though these are not visually discernible because the radius remains fixed. The plot fills the viewport with axis labels in red.

Mar 23, 2023
Loading thumbnail…

Scatter_plot_iCE7

This scatter plot shows the relationship between average horsepower and average torque for various car brands, with each point colored by manufacturer. The visualization uses D3.js v6 within a React framework, rendering as an SVG. The code reads data from a CSV file and employs `d3.csv`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to construct axes. Interactive tooltips appear on hover, displaying the brand and exact values, while a categorical color scale (`d3.scaleOrdinal`) differentiates brands in the legend.

Mar 21, 2023
Loading thumbnail…

ICE_6_scatter_plot

This scatter plot visualizes the Iris Dataset, showing sepal length on the x-axis and petal length on the y-axis across three species of iris flowers. Each species is represented by a unique color, with a color legend identifying the categories. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `schemeCategory10`, `axisLeft`, `axisBottom`, and `selection.join` to render the plot, axes, and legend. Data is loaded and parsed from a CSV file using `csvParse` and fetched asynchronously.

Mar 21, 2023
Loading thumbnail…

ICE_6_Bar_Graph

This example visualizes the average monthly cost of basic internet service across twelve countries using a horizontal bar chart, with country names on the y-axis and cost in dollars on the x-axis. The React component loads CSV data via `d3.csv` and renders the chart as an SVG, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Red gridlines, generated from the x-axis ticks, extend across the plot area, while each bar’s width reflects the data value. The visualization omits axis labels and tooltips, keeping the focus on comparing costs directly from the raw data source.

Mar 21, 2023
Loading thumbnail…

ICE-5

This visualization displays a summary of a dataset, reporting the number of rows, columns, and approximate file size in kilobytes. The page loads an external CSV file and uses the D3.js library’s `d3.csv` function with the `d3.autoType` parser to automatically infer data types. After parsing, the code calculates the formatted data length and row count to construct a text message, which is rendered in a `<pre>` element using JavaScript's `getElementById` and `textContent`. The visualization also includes a static SVG image and links to the source data.

Mar 9, 2023
Loading thumbnail…

ICE 5

This example displays a placeholder message and fetches weather data from a remote CSV file using D3 v7's `d3.csv` method. The code computes and logs the formatted data size in kilobytes, total row count, and column count derived from `d3.csvFormat(data).length`, `data.length`, and `data.columns.length`. The page uses basic HTML/CSS styling with a black background and white text to present the message area. No chart or visualization is rendered; the data is only summarized in the browser console.

Mar 9, 2023
Loading thumbnail…

ICE4-buddha

A generative Buddha image is rendered as a dense field of small, randomly positioned SVG circles, each with a semi-transparent RGB fill, overlaid on a dark navy background. The visualization uses React to map a nested array structure, generating circles with randomized coordinates and colors, while a separate SVG path traces the Buddha figure in red. The example demonstrates how React components can compose dynamic SVG elements with both algorithmic randomness and predefined vector geometry.

Mar 1, 2023
Loading thumbnail…

nikhila-buddha

The visualization shows a generative composition of rotated ellipses and circles distributed randomly across a gradient background, creating a dense, organic field of colorful shapes. The artwork is built with React, using custom `Ellipse` components that render overlapping pairs of ellipses via SVG. Each of the 500 items is positioned using `Math.random()` with values scaled by loop index, while colors are derived from the progression ratio `p`, generating a gradient from dark to bright hues.

Mar 1, 2023