SubhamChhetri

@SubhamChhetri·11 public vizzes

D3 Reusable Chart

This example demonstrates a reusable scatter plot built with D3 and React, displaying the classic Iris dataset with petal length on the x-axis and sepal length on the y-axis. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while `svg.call()` applies the reusable chart function to the selected SVG element. Each data point is drawn as a circle with an interactive tooltip showing its exact measurements. The chart is configured entirely through method chaining, including dimensions, margins, legends, and title, showcasing a modular pattern for D3 visualizations within a React application.

Mar 20, 2023

Loading thumbnail…

Dynamic Scatter Plot including Species

This interactive visualization displays the Iris flower dataset as a dynamic scatter plot, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus let viewers select which quantitative or categorical attributes to plot on the X and Y axes, with smooth animated transitions updating the points and axes. The visualization uses D3.js scales, axes, and transitions within a custom React-based scatterPlot component, while the menu system leverages D3’s dispatch for event handling. Data is loaded asynchronously via d3.csv from a remote gist.

Mar 20, 2023

Loading thumbnail…

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

This example uses D3.js v5 and TopoJSON to render an interactive map of Bhutan as a static SVG visualization. The code imports `geoMercator` and `geoPath` to project geographic coordinates onto a 960×500 canvas, with the country’s polygon data embedded directly in the script. A blue sphere background and light-green country fill with subtle black strokes are styled via CSS. The map is rendered using SVG paths, demonstrating a straightforward Mercator projection without additional interaction or animation.

Mar 9, 2023

Loading thumbnail…

Bar Chart

This bar chart displays the population of ten countries, ranked along a vertical axis with horizontal bars representing each nation’s population in thousands. The visualization uses D3 v7 with `scaleLinear` and `scaleBand` to map population values to bar widths and country names to band positions, rendering an SVG that fills the browser window. Population data loads from a CSV file, and the chart includes axes via `axisLeft` and `axisBottom`, while bars are appended as `rect` elements with tooltips showing exact values.

Mar 7, 2023

Loading thumbnail…

D3 Charts

This example presents several D3 chart types—an animated bar chart, a grouped bar chart with a legend, and a stacked bar chart—with controls for interacting with the data. The animated bar chart uses a D3 module pattern with a reusable `barGraph` function, including scale bands, grid lines, transitions, and sorting capabilities. The grouped and stacked bar charts use D3’s `.stack()` and `.scaleBand()` to display categorical data from a CSV file, with each subgroup assigned a distinct color. The visuals are rendered in SVG and canvas, and the graph modules are composed in a single HTML document with a menu for switching between chart views.

Feb 23, 2023

Loading thumbnail…

Dynamic Scatter Plot

This dynamic scatter plot displays the Iris flower dataset, allowing users to explore relationships between four measured attributes through interactive dropdown menus. Built with React and D3.js, the visualization renders animated SVG circles that smoothly transition between positions when the X or Y axis selection changes. The chart includes axis labels, a title, and a legend, with data fetched from a CSV file. The code employs D3 modules like `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to handle scaling, axis rendering, and animation, while the menu interface uses a custom `menu` factory built on D3's `dispatch` event system.

Feb 16, 2023

Loading thumbnail…

D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization renders circles as marks in an SVG, with scales defined using `scaleLinear` and axes created via `axisLeft` and `axisBottom`. Data is loaded asynchronously from a CSV URL using `d3.csv`, with numeric fields parsed through a custom row function. The chart fills the browser window, with margins applied to position the axes and plot area.

Feb 13, 2023

Loading thumbnail…

3. D3

This example shows a group of ten to fifteen animated circles moving in a smooth, wave-like pattern across the screen, with their vertical positions and radii oscillating sinusoidally over time. The visualization is built with D3 v6 and rendered as SVG elements, with new circle properties updated 60 times per second using a `setInterval` loop and the data join pattern `selection.selectAll().data().join()`. The `makeData` function generates the dynamic coordinates using D3’s `range` helper, while the `vizData` module handles the attribute updates for `cx`, `cy`, and `r`.

Feb 11, 2023

Loading thumbnail…

D3

This example animates a set of circles moving in a horizontal wave pattern across the screen. The number of circles changes over time, increasing and decreasing in response to a sine function. Built with D3 v6, the visualization updates at roughly 60 frames per second using `setInterval`, joining new data with `selection.join` to create and position the SVG circles. The `range` and `select` APIs generate the data and manage the DOM.

Feb 11, 2023

Loading thumbnail…

2. D3

A large SVG displays horizontal and vertical stripes created from 100 rectangles each, layered with two circular masks. The overlapping masked striping produces a radial, sunburst-like pattern centered on the canvas. Built with D3.js, the code uses `range`, `selectAll`, and `join` to generate the bars, while `symbol` and `symbols` define the circular mask paths. The viewport is sized dynamically to the browser window.

Feb 10, 2023

Loading thumbnail…

D3 Implementation

This example demonstrates how D3’s selection and data-join methods can create intersecting horizontal and vertical stripes across the full viewport. Two groups of rectangles, each bound to an array of 100 values via `d3.range`, are drawn with alternating orientations—one set spanning the width, the other the height. Using SVG `mask` elements, two circular masks are applied: one reveals the horizontal stripes inside a white circle on a black background, while the other does the reverse for vertical stripes. The result is a cross-hatched pattern visible only within the defined circular regions.

Feb 10, 2023