A

Anjan Shrestha

@anjanshrestha123·18 public vizzes

Loading thumbnail…

Project - 3D Vertical Bar Chart for Total Profit with Sales-Profit Quadrant of Sub-Category Product

This example displays a 3D vertical bar chart comparing total profit across product sub-categories, grouped into four sales-profit quadrants: low sales/low profit, low sales/high profit, high sales/low profit, and high sales/high profit. Built with Highcharts and the Highcharts-3D module, it renders stacked columns with an isometric perspective using the chart’s `options3d` settings for depth and rotation. Data is hardcoded as arrays of category-index and profit-value pairs, while quadrant assignments are encoded as separate series stacks. The visualization highlights profit distribution patterns within retail categories.

Loading thumbnail…

Project - Horizontal Bar Chart for Total Profit of Sub-Category Product (Using React Tool and d3.js)

This example shows a horizontal bar chart of total profit across product sub-categories, with blue bars on an SVG canvas and labeled axes. It loads CSV data from a GitHub gist using `d3.csv`, processes the profit values with a row function, and renders the chart in React. The visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the profit-driven x-axis, and generates gridlines and tick labels via `xScale.ticks()`. Axis labels and bar rectangles are positioned through SVG `<g>` and `<rect>` elements within a React component.

Loading thumbnail…

Project - Horizontal Bar Chart for Total Sales of Sub-Category Product (Using React Tool and d3.js)

This example shows a horizontal bar chart of total sales for product sub-categories, with bars rendered in blue on an SVG canvas. It uses React to manage state and lifecycle, while d3’s `csv` loads the dataset and `scaleBand` and `scaleLinear` map the categorical and numeric ranges. The chart draws gridlines and tick labels via `xScale.ticks()`, and each bar’s width represents sales value. The data is fetched from a GitHub gist URL.

Loading thumbnail…

ICE-8 (Social Network Graph)

This example shows a social network graph with nine named people connected by curved links. Node size and fill intensity reflect each person’s degree of connectivity, based on the number of incident links. The visualization uses D3 v5’s `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while a custom `tick` function draws curved SVG paths between connected individuals. Nodes are rendered as circles with labels and support dragging via `d3.drag`.

Loading thumbnail…

ICE-8 (Family Tree)

This example shows an interactive family tree visualization built with D3.js (v3) and SVG. It renders hierarchical data from a JSON file as colored, rounded rectangles connected by links, with each node color-coded by generation type. The tree layout uses d3.layout.tree, and users can click nodes to expand or collapse branches. The visualization includes zoom and drag behavior via d3.behavior.zoom, along with tooltips and drop-shadow filters for visual polish.

Loading thumbnail…

ICE-8 (US Map)

This example shows a choropleth-style map of U.S. counties rendered as black filled shapes with subtle gray strokes. The visualization uses D3 v5’s `d3.geoAlbersUsa` projection and `d3.geoPath` to draw each county boundary, while the TopoJSON library’s `feature` method extracts county geometries from a remote US-atlas JSON dataset. County names appear as tooltips via appended `title` elements. Hovering over a county highlights it in black, though the fill remains unchanged. The map is displayed in an SVG container sized at 960 by 500 pixels.

Loading thumbnail…

ICE-8 (World Map)

This interactive world map uses an orthographic projection to render a globe, showing landmasses in green against a dark blue ocean with graticule lines. The visualization retrieves country boundaries from a world-atlas TopoJSON file, then uses d3.geoPath and d3.geoOrthographic to draw the sphere, graticules, and country interiors as SVG paths. Built with React and d3.v7, the map displays loading text until the data is fully processed.

Loading thumbnail…

ICE-7 (Reusable D3 Scatter Plot)

This example presents an animated scatter plot of the Iris dataset using a reusable D3 module. It shows how petal width and sepal length correlate across iris species, with points colored green, blue, or black by species. The visualization cycles through different measurement pairs on the x-axis every two seconds using `setInterval`. It leverages D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll`, rendering as SVG circles with radii set by the `.radius()` method.

Loading thumbnail…

ICE-7 (Area Chart)

This area chart visualizes the population growth rate in Nepal over time, using a maroon-filled path to show the trend. The code loads CSV data and renders an SVG using d3.csv, d3.scaleTime, d3.scaleLinear, d3.area with curveBasis, and d3.axisBottom/axisLeft, including gridlines and labeled axes. The y-axis formats values in billions, and the chart includes a title and rotated axis label.

Loading thumbnail…

ICE-7 (Line Chart)

This example shows a line chart of population growth rates over time, with years plotted on a time-based x-axis and population values on a linear y-axis. The visualization uses React to render SVG elements, with D3’s `scaleTime`, `scaleLinear`, and `line` generator to create the smoothed curve via `curveNatural`. Data is loaded from a CSV via `d3.csv` and formatted using `timeFormat`. Custom `AxisBottom` and `AxisLeft` components draw grid lines and tick labels, while axis titles are added as SVG text elements.

Loading thumbnail…

ICE-7 (Pie Chart)

The visualization displays the top 10 richest people in the world for 2021 as a pie chart, with each slice sized by net worth in billions of U.S. dollars and labeled with a color-coded legend. It uses D3 v5 to load CSV data, scale ordinal colors, and d3.pie and d3.arc to generate SVG path segments. The legend lists each person’s name and their formatted net worth value, while the chart renders with a fixed inner radius of 0 and outer radius of 175 pixels.

Loading thumbnail…

Untitled

This example shows a static pie chart displaying the proportional shares of five named individuals (Alex, Shelly, Clark, Matt, and Jolene) as colored slices with labels. The chart is rendered as SVG using D3 v4, with `d3.pie()` computing the arc angles from the data’s `share` values, `d3.arc()` generating the path geometry, and `d3.scaleOrdinal` assigning a categorical color palette. Labels are positioned via `arc.centroid()` and text elements, while the entire visualization is centered within a 500×400 SVG canvas.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

A horizontal bar chart ranks the ten wealthiest individuals by net worth in billions of dollars, with bars extending rightward from category labels. The visualization is built with React and D3 v5, using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, rendering SVG rectangles. Data is loaded asynchronously from a CSV file via `d3.csv`, and axes are drawn with `d3.axisBottom` and manual text ticks. The chart updates reactively once the data is fetched, showing the top ten entries sorted by descending wealth.

Loading thumbnail…

ICE 6: Iris Dataset Scatter Plot

This D3.js scatter plot visualizes the Iris dataset, mapping petal length and petal width to the x- and y-axes while coloring points by species (setosa, versicolor, virginica). The SVG rendering uses `d3.csv`, `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` to produce a full-width interactive chart. Circles include `rx` and `ry` attributes from sepal measurements, though these do not affect the visible circular markers, which have a fixed radius. The plot loads raw CSV data from a GitHub gist and labels both axes.

Loading thumbnail…

Bonus ICE (3D Scatter Plot)

This 3D scatter plot visualizes the Iris dataset, mapping petal length, sepal length, and petal width onto the x, y, and z axes. Each flower sample appears as a single marker with semi-transparent points and subtle gray outlines. The visualization uses Plotly’s `scatter3d` trace type, loaded via the Plotly.js library, while D3.js fetches the CSV data from a GitHub gist. Margins are set to zero for a clean, full-canvas presentation, with no axes or labels configured.

Loading thumbnail…

Bonus ICE

This interactive 3D bar chart displays the top 10 wealthiest individuals in 2021, with each bar's height representing net worth in billions of USD and color-coded by country of origin (US, France, India). The visualization groups the bars by country using a single stacked column series per nation, with data series named 'United States', 'France', and 'India'. Built with Highcharts and the Highcharts 3D extension, the chart uses the `options3d` configuration to enable a perspective view with specified alpha, beta, and depth settings, rendering the data as extruded columns.

Loading thumbnail…

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

This example demonstrates the initial steps of loading and parsing CSV data using D3.js version 7. The page displays a title, author information, and a static SVG logo composed of colored overlapping circles with drop shadows, rendered directly in the HTML. The code primarily showcases the setup for data handling, with the D3 library included via a CDN link, though no actual CSV loading or parsing logic is implemented in the visible files. The SVG logo is defined inline within the HTML and also as a separate file, `logo.svg`.

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a simple smiley face using React and SVG. The face is composed of SVG circles and a line element positioned within a 960x500 viewport. React code defined in `index.js` uses JSX with inline expressions in curly braces to set coordinates and radii, while plain SVG attributes handle stroke and fill styling. The visualization demonstrates fundamental React rendering with SVG primitives, including a yellow circle for the face, black eyes, and a white smile. The page loads React, ReactDOM, and D3 via CDN scripts, embedding the visualization in a `#root` div.