A

akhil kata

@akhilkata·23 public vizzes

Loading thumbnail…

ICE 8 Social Network Graph

This example visualizes a small social network of six people using a force-directed graph. It shows nodes representing individuals and links representing connections with varying thickness, where thicker links indicate stronger relationships. The graph renders as an SVG canvas and supports interactive dragging of nodes. The code uses the D3.js v4 library, specifically the `d3.layout.force` API for physics simulation, along with `force.drag` for node interaction, and loads the network data from a JSON file containing node names, group assignments, and edge weights.

Loading thumbnail…

Family Tree

This interactive family tree visualizes a multi-generational genealogy, with each family member displayed as a colored, labeled node in a hierarchical layout. The diagram is rendered as an SVG using D3.js v3’s tree layout, with links between relatives and a zoom-and-drag behavior for navigation. Each node’s color encodes a generation type, and hovering or clicking reveals tooltips and expands or collapses branches with a smooth animation. The data comes from a static JSON file, and the visualization updates dynamically as users interact.

Loading thumbnail…

Centered US Map

This visualization displays a map of the United States centered using the Albers equal-area projection. It shows the nation’s landmass with a colored fill, state boundaries as thin strokes, and a graticule sphere outline. Built with React and D3 v5, it loads US Atlas TopoJSON data via `d3.json` and uses `topojson.feature` and `topojson.mesh` to extract land and interior boundaries. The map is rendered as SVG paths generated by `d3.geoPath` with `geoAlbers`.

Loading thumbnail…

World Map

This example displays a world map with pale blue oceans, brown landmasses, and graticule lines, using an SVG rendering approach. The map is built with React components and D3 v5, leveraging `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for projection and geographic path generation. Country borders are highlighted as interior mesh lines. The data comes from a TopoJSON file loaded via `d3.json` and processed with `topojson.feature` and `topojson.mesh`. The visualization renders the sphere, graticules, land features, and country interiors as separate SVG paths.

Loading thumbnail…

BONUS 1: 3D Scatter Plot

This example displays a 3D scatter plot of automobile sales data, plotting model year against Ford and Chevrolet counts from a CSV file. The visualization uses Plotly’s `Plotly.newPlot` method to render the scatter3d trace, with D3’s `d3.csv` handling data loading. Each point appears as a pink circle, with axes explicitly labeled and styled for year, ford, and chevorlet values, while margins are minimized for a compact view.

Loading thumbnail…

Fork of Fork of 3D Scatter Plot with Iris Dataset

This example displays a 3D scatter plot of the Iris dataset alongside a 2D scatter plot of city and state coordinates, with both traces overlaid in a single Plotly chart. It uses Plotly’s `Plotly.newPlot` to render the 2D and 3D scatter traces, while D3’s `d3.csv` loads the data from a GitHub-hosted CSV file. The visualization shows the relationship between sepal length, sepal width, and petal width for Iris samples, though the 2D trace references city and state columns, resulting in a mixed dataset presentation.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart comparing download counts for popular apps across six app stores. The chart uses Highcharts with the highcharts-3d module, enabling a rotated, three-dimensional view with depth and perspective. Each app category is grouped along the X-axis, with stacked bars representing downloads from each store source, and the Z-axis labels the various store sources. Data is loaded directly into the chart’s series configuration, with each series corresponding to a specific store’s download figures.

Loading thumbnail…

Fork of ICE

This example presents a 3D bar chart showing car sales figures for multiple brands across different years, rendered using D3.js and the d3-x3d library. The visualization uses a multi-series bar chart layout, with the x-axis representing car brands and the z-axis (depth) showing years. The chart loads data from a CSV file, parsing it into a structured format where each year contains values for Ford, Chevrolet, Honda, Toyota, Hyundai, and BMW. The code initializes the chart using `d3.x3d.chart.barChartMultiSeries` and applies D3's `csv` and `scaleLinear` functions within an X3D-based rendering environment for interactive 3D exploration.

Loading thumbnail…

Fork of Fork of d3-x3d : 3D Bar Chart Example

This example shows a 3D multi-series bar chart of USA vehicle sales by quarter for major automotive brands in 2021. The visualization renders four quarterly bars per manufacturer using the d3-x3d library, which integrates D3.js with X3DOM for WebGL-based 3D graphics. The code loads CSV data from a GitHub gist, parses each row into a manufacturer and quarterly values, and then binds it to the chart component. It uses D3 v5 scaling and selection methods, alongside the d3-3d library for 3D data handling, all embedded in a plain HTML page with CSS styling.

Loading thumbnail…

Fork of Fork of d3-x3d : 3D Bar Chart Example

This example visualizes USA vehicle sales by quarter for major automotive brands as a 3D bar chart using the d3-x3d library, which bridges D3.js with X3DOM for WebGL rendering. Each manufacturer appears as a series of bars along the x-axis, with quarterly values mapped to bar heights and color-coded across the four quarters. The code loads CSV data from a GitHub gist, parses it with d3.csv, and feeds it into the d3.x3d.chart.barChartMultiSeries component, which handles the 3D scene construction. D3 v5 utilities such as scaleLinear and axis functions are included but not directly applied in the visible rendering pipeline.

Loading thumbnail…

Fork of 3D Bar Plot AISHWARYA-M

This example presents an interactive 3D bar plot of country populations using a cube representation of data points. The visualization loads data from a CSV file and renders animated, draggable 3D cubes that users can rotate to explore. The code combines React with D3 version 4, using the `d3._3d` API from the d3-3d library to handle cube construction and perspective projection, while the data itself comes from the UN Population 2019 dataset. The visualization includes animated transitions for text labels and uses SVG paths for rendering, with user interaction managed through D3's drag events.

Loading thumbnail…

3D- Bar chart AKHIL KATA

A 3D bar chart visualizes annual car sales from 2010 to 2018 using an SVG scene with perspective projection. The bars use a powder-blue front face, blue top, and darker side faces, with pink hover highlighting. The visualization is built with D3.js (version 3.4.8) and lodash, using the custom `bar3d()` function and `perspective()` utility to project 3D coordinates onto 2D space. Data comes from a TSV file, and light animation is supported via D3’s `transition` API.

Loading thumbnail…

Bonus ICE

This 3D bar chart shows the net worth of the top ten billionaires, with bars grouped by country and stacked along a tilted perspective. Using the Highcharts library with the Highcharts-3D module, the chart renders columns with a depth of 40 and an angled view (alpha 25, beta 25). The x-axis lists individual billionaires, while the y-axis measures net worth in billions of USD, with series separated by nationality: United States, France, and India. The code relies on jQuery to initialize the chart within a container div, setting margins and view distance for the 3D effect.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example visualizes car sales from 2010 to 2019 as a 3D bar chart, with each manufacturer’s yearly values rendered as a series of extruded bars. It uses the `d3-x3d` library to bridge D3.js with X3DOM for WebGL-based 3D rendering, alongside `d3.csv` for data loading and D3 v5 scales and axes for layout. The chart is built with `barChartMultiSeries`, and data comes from a remote CSV containing monthly sales figures per manufacturer.

Loading thumbnail…

Fork of Area Chart

This example visualizes the sales of cars in the United States over time using a combined line and area chart rendered as SVG via D3 v5. The line emphasizes the sales trend while the filled area below highlights the cumulative magnitude. The code uses d3.line, d3.area, scaleTime, and scaleLinear, with data pulled from a CSV file where dates are parsed using d3.timeParse. Curves are smoothed with curveBasis, and axes are generated using d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Fork of Line Chart

This line chart tracks annual car sales in the United States from 2010 to 2019. Using D3 v5, the visualization employs `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with a `d3.line` generator drawing the sales trend. The code loads CSV data from a GitHub gist, parses the year, and renders grid lines with styled tick marks. The SVG output includes labeled axes and a powder-blue line, demonstrating a clean, data-driven time-series comparison.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart displays the top 10 medal-winning countries from a CSV file of Olympic medal counts, with a legend listing each country’s name and total. The visualization uses D3 v5’s `pie` and `arc` generators to compute and render the SVG paths, while `scaleOrdinal` maps medal values to a categorical color palette. Data is loaded asynchronously via `d3.csv`, and the chart is drawn with SVG circles and text elements in the D3 selection style.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, mapping petal width and sepal length with points colored by species. A circular color legend identifies the three species categories. The visualization uses D3 v5 with the `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and the `d3.legendColor` library for the legend. Grid lines extend across the chart via tick size settings, and axis labels are rotated for the y-axis. The data is loaded from a CSV file via `d3.csv`.

Loading thumbnail…

Scatter Plot for the IRIS dataset

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and sepal length, with each point representing a sample flower. The visualization is built using React with D3 v6, employing `scaleLinear` for axis scaling and SVG circles rendered via React components. Data is loaded asynchronously from a CSV file using D3’s `csv` function, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. The plot includes axis labels and tooltips displaying formatted values.

Loading thumbnail…

Bar chart for the olympic medals

This bar chart shows the number of Olympic medals won by the top 10 countries, with countries on the y-axis and medal counts on the x-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Axes are customized using `d3.axisLeft` and `d3.axisBottom`, with grid lines and a custom tick format. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and the chart includes axis labels and a title.

Loading thumbnail…

Untitled

This example shows the number of matches for the top 11 sports in 2021 as horizontal bars, using a bar chart layout. The visualization uses React with d3-scale functions (scaleBand, scaleLinear) to map data to positions and sizes, and renders SVG elements directly. Data is loaded from a CSV file via d3.csv. The chart includes axis ticks generated manually, with bars filled in purple and axis lines in blue.

Loading thumbnail…

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

This example demonstrates the process of loading and parsing CSV data with D3.js. It fetches a remote cities.csv file via the `d3.csv` method and displays a summary of the dataset, including its size in kilobytes, row count, and column count. The output is rendered as plain text within an HTML `<pre>` element. The visualization also features decorative elements such as a scrolling flag image and a globe graphic. The code specifically uses D3 v7's `d3.csv` and `d3.csvFormat` APIs to handle the data loading and formatting.

Loading thumbnail…

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

This example animates a smiley face built with SVG, showing its eyebrows moving up and down while the rest of the face remains static. It demonstrates fundamental D3.js DOM manipulation by constructing the face from basic shapes—circles for eyes, rectangles for eyebrows, and arcs for the nose and mouth—using a d3 selection and the `arc` helper. The eyebrow motion is driven by chained `transition.duration(0)` calls that instantly shift the group’s transform attribute. The code uses d3 v5 and orchestrates all elements within a centered SVG group.