Aashish Pandey

@helloaashish·15 public vizzes

Tree Graph

This example renders a collapsible tree graph in SVG using D3.js v3, with each node representing a person in a nested JSON data structure. Colored rectangles distinguish node types, and links connect parent to child nodes. The tree layout dynamically recalculates its dimensions based on node depth and width, and supports zoom and drag navigation via `d3.behavior.zoom`. Clicking a node expands or collapses its children with a smooth 750-millisecond transition, while tooltips and drop shadows enhance interactivity.

Apr 5, 2022

Loading thumbnail…

ICE-8 (Social Network Graph)

This social network graph visualizes relationships among nine individuals, with nodes sized and colored by their connection count and curved links showing ties. The visualization uses D3 v5’s `d3.forceSimulation` for layout, with forces for centering, charge, and link distance. Node drag and drop via `d3.drag` repositions elements, while labels display names. Links are rendered as SVG paths with varying stroke styles, and node fill uses `d3.interpolateBlues` based on weight.

Apr 5, 2022

Loading thumbnail…

Country Map

This example renders a choropleth-style map of United States counties on an SVG canvas. Each county polygon is drawn as a purple path with white strokes, and hovered counties turn red, with the county name appearing as a tooltip. The visualization uses D3 v5’s `geoAlbersUsa` projection with `geoPath` to generate the shapes, and TopoJSON’s `feature` method to parse county boundaries from the us-atlas dataset. County names come from the TopoJSON properties, while the map loads via a remote JSON URL.

Apr 5, 2022

Loading thumbnail…

World Map

This example uses D3’s geoOrthographic projection and geoPath to render a three-dimensional-looking Earth in SVG. It displays country landmasses in purple, with gray graticules and sphere outlines, plus gray interior borders between countries. The map loads world-atlas TopoJSON data, converts it using topojson’s feature and mesh, and visualizes it with React. The projection and path are generated with d3.geoOrthographic, d3.geoPath, and d3.geoGraticule, producing a static globe view.

Apr 5, 2022

Loading thumbnail…

Line Chart (ICE 7)

This example displays the average population of the United States over time, using a smooth, curved line to connect annual data points ordered by year. The chart is rendered as an SVG with React, using D3’s `scaleTime`, `scaleLinear`, `line()`, and `curveNatural` to map and draw the trend. Axis ticks are generated by reusable React components, and the data is loaded asynchronously from a CSV URL using D3’s `csv` and React’s `useState`/`useEffect`. The visualization is styled with Lato font and a minimal, grid-based aesthetic.

Mar 28, 2022

Loading thumbnail…

Area Chart (ICE 7)

This area chart displays the average population in the US over time, using a smooth basis curve to connect data points. The visualization is rendered as an SVG using D3 v5, with time-scaled x-axis and linear y-axis. It loads data from a CSV file hosted on GitHub, which includes year and population values. The chart features grid lines, axis labels, and a title, with the area under the curve filled in maroon.

Mar 28, 2022

Loading thumbnail…

Untitled

This example presents a bare-bones HTML page that brings together CSS and JavaScript for rendering. The core functionality uses vanilla JavaScript with the D3.js library, specifically demonstrating a force-directed graph layout. The code employs `d3.forceSimulation` to calculate node positions and interactions, while CSS handles the visual styling. The example focuses on the fundamental integration of these technologies, providing a minimal yet functional starting point for more complex visualizations, with the underlying data structure defined within the script itself.

Mar 28, 2022

Loading thumbnail…

Pie Chart (ICE 7)

This example displays a pie chart of the top 10 countries with the most COVID-19 cases, using data loaded from a CSV file via d3.csv. The chart is rendered as SVG paths, with each segment sized by the "Total Cases" value and filled using a d3.scaleOrdinal color scale. A legend on the right pairs each country with its total, formatted in thousands (e.g., "1.234K"). The code uses d3.pie, d3.arc, and d3.select to build and position the chart.

Mar 28, 2022

Loading thumbnail…

Reusable Scatter Plot (ICE 7)

This interactive scatter plot visualizes the Iris dataset, cycling through different measurement pairs every two seconds to reveal patterns across species. Each point is colored by iris type (red, purple, or blue) and rendered as an SVG ellipse with varied rx and ry radii. The visualization uses D3 v6 APIs including scaleLinear, axisLeft, axisBottom, extent, and selection joins, with a reusable scatterPlot factory function that updates axes and circles on each interval. Data loads from a remote CSV file, and the chart animates continuously rather than responding to user input.

Mar 28, 2022

Loading thumbnail…

Bonus ICE - Bart Chart 3D

This example visualizes the top 10 countries by COVID-19 case counts using a 3D stacked bar chart. Each column represents a country, with three stacked segments showing total cases, total recovered, and active cases. The chart uses the Highcharts library with its highcharts-3d module, enabling a rotated perspective via the `options3d` configuration (alpha, beta, and depth). Data is supplied directly in the series arrays, with categories labeled by country names on the x-axis and case numbers on the y-axis.

Mar 11, 2022

Loading thumbnail…

Bonus ICE (3D Scatter Plot)

This example presents a 3D scatter plot of the classic Iris dataset, visualizing relationships between petal length, sepal length, and petal width. It uses Plotly’s `scatter3d` trace type to render the points with semi-transparent markers. The page loads Plotly 2.9.0 and D3 3.5.17 via CDN, and uses D3’s `csv` loader to fetch and parse the data from a gist, then passes the unpacked columns into the plot. The layout has zero margins for the chart.

Mar 11, 2022

Loading thumbnail…

ICE-6 (Bar Chart)

A bar chart displays the top 10 countries by total COVID-19 cases, with country names labeled along the vertical axis and case counts on the horizontal axis. The visualization is built with React and D3 v5, using `csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. SVG rectangles are rendered for each bar, with axes and tick marks generated manually via D3's `max` and `format` functions.

Mar 7, 2022

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and petal width for three species of iris flowers. Each species is distinguished by color: yellow for setosa, green for versicolor, and purple for virginica. The D3 v6 code loads CSV data from a GitHub gist, uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to map the measurements to screen coordinates, and renders colored SVG circles with a fixed radius. The chart also includes rotated and bottom axis labels for sepal length and petal length.

Mar 7, 2022

Loading thumbnail…

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

This example loads a CSV file of corona data using D3.js and displays a summary of its size and structure. The page fetches data from a GitHub gist with `d3.csv`, then uses `d3.csvFormat` to measure the data size in kilobytes, reports the row count, and lists the number of columns. The result is rendered as styled text in an HTML `<pre>` element, alongside a static inline SVG illustration of a snowman figure. The visualization demonstrates basic CSV parsing and text-based output rather than graphical charting.

Feb 24, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a yellow smiley face using React and SVG within a minimal HTML page. It demonstrates how to structure SVG circles for the face, eyes, and mouth, with styling applied through CSS properties like fill, stroke, and strokeWidth. The code uses ReactDOM to mount the component and imports React and D3 v7 via unpkg CDN scripts, showcasing a straightforward React rendering approach without interactions or data binding.

Feb 18, 2022