RupeshGandham

Fork of India Map

This example displays a choropleth map of India’s states, colored with d3.scaleOrdinal and schemeCategory10, with each state labeled by name. It uses d3.geoMercator projection, d3.geoPath, and topojson.feature to render state boundaries from a TopoJSON file of India’s administrative regions. The first feature is removed with shift(), and state names are placed at each polygon’s centroid. SVG paths and text elements are generated via data joins, with titles appended for tooltip support.

Jul 22, 2022

3D Bar Chart

This example visualizes Norway new car sales by model using an interactive 3D bar chart, where each bar represents a manufacturer and its quarterly sales figures. The visualization uses the d3-x3d library to bridge D3.js and X3DOM, rendering the chart in a WebGL-based 3D scene. Data is loaded from a CSV file and parsed with D3's csv function, then bound to the chart component via the datum method. The page also includes a background image and axes generated from the data’s value extent.

Jul 15, 2022

social network graph

This interactive social network graph visualizes relationships among seven individuals, with nodes representing people and links denoting connections. Node size and link thickness reflect connection weights from the graphFile.json dataset. The graph uses d3.layout.force for physics-based positioning, allowing users to click and drag nodes to rearrange the network. D3 v4 renders the visualization as SVG elements, with circles for nodes and lines for links, while text labels display each person’s name. The force simulation adjusts node positions on each tick, creating an animated, explorable representation of social ties.

Jul 10, 2022

Family Tree

This example visualizes a family tree as a hierarchical node-link diagram. It uses D3 v5’s `d3.stratify()` to convert flat parent-child data into a tree structure, then `d3.tree()` to compute layout positions. Nodes are rendered as SVG circles colored by depth (violet, yellow, red, green), connected by curved cubic Bézier paths, with each person’s name labeled via SVG text. The code runs in a React environment but renders entirely with SVG elements, with the dataset hardcoded in the script.

Jul 10, 2022

Australia Map

This example displays a map of Australia with its electoral regions, each filled with a distinct color from a categorical palette using `d3.scaleOrdinal` and `schemeCategory10`. The map is rendered as SVG paths generated by `d3.geoPath` with a `geoMercator` projection, using TopoJSON data from `australia.json`. State and territory names are overlaid at each region’s centroid via `pathGenerator.centroid`. The visualization relies on D3 v5 and the `topojson` library for feature extraction.

Jul 9, 2022

World Map

The visualization displays a world map using a natural Earth projection, with countries rendered as green filled regions outlined by black borders. The code builds the map by fetching country boundaries from the world-atlas dataset via `json()`, then processes them through `topojson.feature()` to extract geometries. D3's `geoNaturalEarth1` projection and `geoPath` generate the SVG paths for each country, while a separate path with class 'sphere' draws the globe's outline. The map appears static, with no interaction or data encoding beyond geographic boundaries.

Jul 9, 2022

People BMI 3D Scatter Plot

This example displays a 3D scatter plot of people’s Body Mass Index (BMI) using height, weight, and index values loaded from a CSV file. The plot renders pink elliptical markers in three-dimensional space, with axis titles for Height, Weight, and Index styled in brown. It uses the Plotly `scatter3d` trace type via `Plotly.newPlot` to draw the visualization, while D3’s `csv` function handles data loading and parsing. The layout configuration sets margins and custom axis title fonts.

3D Scatter Plot with Species

This example visualizes Iris flower measurements as a 3D scatter plot, displaying two species traces in the same interactive scene. The plot shows sepal length, width, and an additional dimension for each sample, using color and marker style to distinguish between groups. The code loads a CSV dataset with D3 and renders the three-dimensional chart using Plotly’s `scatter3d` trace type, with markers sized at 12 and a custom gray line color. The `Plotly.newPlot` API draws the scene inside a designated HTML division.

Fork of 3D Scatter Plot with Penguin Dataset

This example displays a 3D scatter plot of the Palmer Penguins dataset, plotting bill length and bill depth on the x and y axes, with the z-axis left unspecified (empty string). Each penguin is represented by a marker, with fixed size, partial opacity, and thin grey outlines. The visualization is built using the Plotly.js library (via the `Plotly.newPlot` function) within a React page, while the data is loaded asynchronously from a remote CSV file using `d3.csv`. The chart is rendered inside a dedicated `<div>` with margins zeroed out for a clean, immersive view.

3D Bar Graph

This example visualizes USA car sales by major automotive brands using a 3D bar chart. The chart displays quarterly sales data across multiple manufacturers, with bars extruded in three dimensions to represent the values. The visualization is built with D3 v5, the d3-3d library for 3D plotting, and d3-x3d to render the scene in X3DOM, an HTML5 3D viewer. Data is loaded asynchronously from a CSV file and parsed into a multi-series format, with the chart updating once the data arrives.

Fork of 3D Scatter Plot with Penguin Dataset

This example uses Plotly to create a 3D scatter plot of the Palmer Penguins dataset, displaying three measurements—bill length, bill depth, and flipper length—as points in a three-dimensional space. Two nearly identical traces are layered, sharing the same axes and dimensions but differing only in marker styling and opacity, which produces a subtle visual overlay effect. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted CSV file, and the rows are unpacked into arrays using a custom function. The chart is rendered into a `<div>` element using `Plotly.newPlot` with minimal margins.

Pie Chart

This pie chart displays the top 10 countries by COVID-19 deaths, with each slice labeled in thousands and a corresponding legend. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute and position the slices, while SVG renders the chart. Data is loaded asynchronously from a CSV file via `d3.csv` and sorted to select the top entries. The code also employs `d3.format` for readable tick labels and color-coded legend rectangles.

Reusable Scatter Plot

This animated scatter plot visualizes the Iris flower dataset, cycling through four feature combinations on the x-axis while keeping sepal length on the y-axis. Data points are colored by species—orange for setosa, blue for versicolor, and black for virginica—with a dynamic legend that updates alongside axis labels. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, and `axisLeft` within a reusable `scatterPlot` module, driven by `setInterval` to rotate the displayed attribute. The SVG rendering includes custom circle shapes with elliptical radii and a color-coded species legend.

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This interactive scatter plot visualizes the Iris dataset, cycling the x-axis through four flower measurements while keeping petal width on the y-axis. It uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisBottom and axisLeft for grid lines. SVG circles are colored by species—orange, blue, and black—with a static legend and rotating axis labels via setInterval. The reusable scatterPlot function manages the chart structure and updates.

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot cycles through different combinations of Iris flower measurements, displaying sepal and petal dimensions on the x- and y-axes. The visualization uses D3 v6 to render circles colored by species (setosa, versicolor, virginica) with a custom legend, while a `setInterval` triggers updates to the axis scales and labels. Data comes from a CSV of the classic Iris dataset loaded via `d3.csv`. The code leverages reusable chart patterns from `scatterPlot.js` with `scaleLinear`, `axisLeft`, and `axisBottom` APIs, alongside a fixed y-axis label for sepal length.

Line Chart

This line chart displays the annual number of Facebook users from 2008 to 2017. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render an SVG with labeled axes and a red, bold stroke. The data is loaded via `d3.csv` from a GitHub gist, with year values parsed into Date objects and user counts converted to numbers. The chart includes a title, axis labels, and grid lines styled via CSS.

area chart

This area chart visualizes the runs scored by a cricket team each year from 2007 to 2021. The SVG render uses D3 v5’s `scaleTime` and `scaleLinear` to map years and run totals, with `d3.area` and `d3.line` generators drawing the filled region and its boundary using a basis curve. CSV data is loaded via `d3.csv`, and axes are styled with custom tick formatting and labels. The chart highlights overall scoring trends over the 15-year period.

Fork of Fork of Reusable D3 Scatter Plot- ICE7

This visualization presents the classic Iris dataset as an animated scatter plot, cycling through different pairings of sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Each species—setosa, versicolor, and virginica—is color-coded in red, cyan, and grey respectively, with data points rendered as SVG circles and a legend showing the color mapping. The animation updates the x-axis scale and labels via `setInterval`, and the plot is built using D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The data is loaded from a CSV URL, and the plot re-renders its axes and circles on each interval tick.

Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, using D3.js to visualize relationships between sepal and petal measurements, with each species represented by a distinct color (red, darkblue, orange). The visualization cycles through different attribute combinations every two seconds, updating both the x-axis and y-axis mappings dynamically. Built with D3’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, it demonstrates a reusable scatter plot component with animated transitions, SVG rendering, and custom styling via the Share Tech font.

Fork of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot that cycles through different dimensions of the Iris dataset every two seconds, showing how petal width, sepal width, petal length, and sepal length correlate with sepal length. The visualization uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for ticks, with SVG circles animated via setInterval and the chart’s configurable xValue method. The plot updates axes and circles in place, highlighting the reusability pattern from Towards Reusable Charts.

Fork of Fork of Reusable D3 Scatter Plot

This visualization presents the classic Iris Dataset as an animated scatter plot that cycles through the four measured features on the x-axis every two seconds. The plot uses a reusable `scatterPlot` function built with D3 v6, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and SVG circles. Data loads via `d3.csv` from a GitHub Gist, with the animation driven by `setInterval` to update the x-value mapping, demonstrating the reusable chart pattern.

Fork of Reusable D3 Scatter Plot

This interactive scatter plot presents the Iris Dataset, allowing viewers to explore relationships between different flower measurements. The visualization cycles through four variable pairings every two seconds, shifting the x-axis between petal width, sepal width, petal length, and sepal length while the y-axis remains sepal length. Built with D3 v3, it employs a reusable scatter plot component that uses `d3.scaleLinear` for scaling, `d3.extent` for domains, and `d3.axisLeft` and `d3.axisBottom` for axes. The SVG rendering animates data point positions using D3's selection join pattern with the `setInterval` function.

Scatter Plot

A D3 scatter plot displays the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis using linear scales and axis generators. Each flower is rendered as a circle with a fixed radius of five pixels. The visualization fills the browser window by sizing the SVG to the viewport dimensions. It loads CSV data with `d3.csv`, parses numeric fields, and uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the plot.

Jun 26, 2022

ICE-6

This visualization displays the top 20 companies by value using a horizontal bar chart, with company names on the y-axis and numerical values on the x-axis. It loads data from a CSV file via `d3.csv` and renders SVG elements using React. The chart leverages `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with manually drawn tick lines and labels. Data is transformed with a row function that ensures value fields are parsed correctly before rendering red rectangular bars.

Jun 26, 2022

ICE-5 DV

This example demonstrates the basic workflow of loading and inspecting a CSV dataset with D3.js. It fetches student performance data from a GitHub-hosted CSV file using `d3.csv`, then displays the file size in kilobytes, the number of rows, and the number of columns in a prominent HTML `<pre>` element. The visualization also includes a static SVG illustration composed of paths, ellipses, and lines, rendered with a darken blend mode and Gaussian blur filters. The page is built with plain HTML, CSS, and D3 v7, without React or additional frameworks.

Jun 22, 2022

Fork of Smiley Face Part II - Mila PWD

This example renders a Portuguese water dog face named Mila using React and SVG. The drawing features a black head silhouette, white eyes with brown pupils, a brown nose with black nostrils, and a red tongue inside a white mouth, all positioned around a central coordinate system. The code uses ReactDOM to mount the component, calculating the canvas dimensions from `window.innerWidth` and `window.innerHeight`. All shapes—polygons, circles, ellipses, and rectangles—are placed relative to the viewport center using SVG group transforms.

Fork of Dog graphics using Figma design. Used bezier curve.

This graphic shows a stylized dog portrait named "Rock" rendered with SVG, created via a Figma design and exported as a fork of the original. The illustration uses a series of bezier curve paths to define the head, ears, and facial features, with the main face filled in a warm orange tone. The eyes are represented by black circles with white highlights. A data source is not present; the rendering solely relies on the SVG specification, directly embedded in HTML with basic CSS styling for the page background.

Fork of Fork of Smiley Face Part II

A stylized cartoon face renders a large yellow circular head with expressive eyes and a smiling mouth, drawn using React components and SVG elements. The `Eyes` and `Smile` components define complex layered paths, ellipses, and circles with various fill colors, while `index.js` positions and scales them within an SVG canvas. The composition uses hardcoded coordinates and transforms, with ReactDOM rendering the final SVG to the page.

Fork of Not so Smiley Face

A stylized smiley face rendered as SVG via React, with a yellow circular head and black eyes offset symmetrically from the center. The mouth is drawn as an arc using the `d3.arc()` generator, positioned separately from the head group. The example demonstrates mixing React components with D3 v6 shape APIs, using inline SVG elements within a React component tree. Data is hardcoded as numeric constants for dimensions, with no external dataset.

Fork of Fork of Smiley Face Part II

A cartoon smiley face is rendered as a composite of separate eye and smile SVG components, drawn with React and displayed within a larger SVG canvas. The application uses React to define the `Eyes` and `Smile` components, which are then imported and placed using SVG `<g>` transforms for positioning, rotation, and scaling. The face is built from SVG shapes like circles, ellipses, and paths, with colors applied via CSS classes, resulting in a static, stylized illustration.