pragnyalipsa96@gmail.com

@pragnya217·13 public vizzes

Fork of Network

This example shows a force-directed network of flight routes between eight major US cities. Node size represents hub importance based on connection count, and gray lines indicate direct flight paths. The visualization uses D3 v7’s `d3.forceSimulation`, applying `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` to position nodes. Users can drag nodes to reposition the graph, which renders as an SVG with white-stroked circles and city labels.

Nov 3, 2025

Loading thumbnail…

Fork of Tree

This fork of a tree visualization displays a biological taxonomy hierarchy, showing the classification of living organisms from the kingdom level (Animalia) down to specific species like Lion, Eagle, and Octopus. The diagram uses colored nodes and connecting links to distinguish four taxonomic layers: Kingdom, Phylum, Class, and Species, with a legend explaining the color coding. Built with D3 v7, the visualization constructs the hierarchy from a flat list of parent-child relationships using `d3.stratify`, then renders the result as an SVG tree with labeled circular nodes. The HTML page includes a styled chart container and a color legend, presenting the data vertically with a viewBox of 1000 by 800 pixels.

Nov 3, 2025

Loading thumbnail…

Fork of Map

This interactive visualization presents two distinct maps—a world map and a US map—that can be panned and zoomed using D3’s zoom behavior. It renders geographic features from the TopoJSON data in the world-atlas and us-atlas packages, using a natural Earth projection for the world and an appropriate projection for the US. The SVG maps include hover effects that change country and state fills, and they feature on-screen zoom control buttons to adjust the view.

Nov 3, 2025

Loading thumbnail…

Fork of pie chart

This D3.js example visualizes traffic accident distribution by weather condition as an interactive pie chart. It loads CSV data from a GitHub gist, aggregates accident counts per weather category using `d3.rollups`, and renders SVG pie slices with labels and a legend. The chart uses `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10`, and a reusable `pieChart` function pattern with configurable width, height, and data properties. The visualization displays weather types directly on slices and provides a side legend with count values.

Oct 27, 2025

Loading thumbnail…

Fork of Pie Chart

A pie chart displays the distribution of traffic accidents by weather condition, using categorized data from a CSV file. The visualization groups records by weather type—such as Clear, Rainy, or Foggy—and sizes each slice by the count of accidents in that category. It renders in an SVG canvas with `d3.pie` and `d3.arc` generators, colors slices with `d3.scaleOrdinal`, and labels each segment with its weather name. The chart also includes a bold title positioned above the plot, generated through a reusable `pieChart` function.

Oct 27, 2025

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes traffic accident data, plotting speed limits against the number of vehicles involved, with points color-coded by weather condition and shaped by accident severity. The visualization cycles through different x-axis variables every three seconds, alternating between speed limit and driver experience. Built with D3.js v6, the example uses `scaleLinear` for axes, `scaleOrdinal` for categorical color and shape encoding, and `symbol()` for point markers. Data comes from a CSV file fetched via `csv()`, rendered as an SVG with axis labels, legend, and custom styling.

Oct 27, 2025

Loading thumbnail…

ICE

This animated scatter plot visualizes simulated traffic accident data, showing the relationship between the number of vehicles and two alternating x-axes: speed limit and driver experience. The reusable chart, built with D3 v7, uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.symbol` to render colored shapes representing weather and road type. Every three seconds, a `setInterval` callback switches the x-axis accessor, updating the title and re-rendering the SVG with smooth transitions. The data loads from a GitHub-hosted CSV file with numeric fields parsed for quantitative scaling.

Oct 27, 2025

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot, built with D3 v7, visualizes traffic accident data by mapping vehicle counts against speed limits and driver experience. The chart uses color-coded symbols to distinguish weather conditions and road types, with legends and axis labels providing context. Implemented using Mike Bostock’s reusable chart pattern, the scatterPlot function exposes chainable setters for x, y, color, and symbol accessors. Two SVG instances render the same dataset with different configurations, while an optional index.js variant cycles the x-axis variable every three seconds to demonstrate the chart's reusability through D3’s selection.call method.

Oct 27, 2025

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

An animated scatter plot visualizes traffic accident data from a CSV file, cycling through four quantitative columns—Speed Limit, Number of Casualties, Number of Vehicles, and Accident Severity—as its axes every two seconds. The visualization uses a reusable D3 scatter plot module that dynamically updates the axis domains and circle positions based on the currently selected variables. Rendered as an SVG via D3 6.7.0, the chart employs `scaleLinear`, `axisLeft`, and `axisBottom` utilities to construct axes and scales, with a fixed y-axis origin and a radius of five pixels for each data point.

Oct 25, 2025

Loading thumbnail…

ICE7

This visualization displays a scatter plot of traffic accident data, comparing Speed_Limit, Number_of_Casualties, Number_of_Vehicles, and Accident_Severity. The plot animates every two seconds, cycling through different columns on the x-axis while keeping Number_of_Casualties fixed on the y-axis, with axis labels updating dynamically. Using the d3.v6 library, the code employs `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom reusable `scatterPlot` module for SVG rendering. Data is loaded from a GitHub-hosted CSV file via `csv` and parsed with custom row handlers.

Oct 25, 2025

Loading thumbnail…

ICE5-Q3

This example demonstrates loading a CSV dataset of traffic accident predictions from a remote URL, parsing it with `d3.csvParse`, and displaying key statistics about the file, including its size in kilobytes, row count, and column count. It then renders a preview table of the first five rows of data, with column headers generated dynamically from the parsed data's `columns` property. The visualization uses D3 v7’s `select`, `append`, and `enter` APIs to build the HTML table, styled with custom CSS for a clean, readable layout.

Oct 6, 2025

Loading thumbnail…

ICE5-Q2

This example demonstrates loading and parsing a remote CSV dataset, displaying the file size, row count, and column count in a styled message container. The page fetches the traffic accident prediction CSV from a GitHub gist using the Fetch API, then parses it with `d3.csvParse`. A static SVG with a rectangle, circle, and text label provides a simple visual backdrop while the data summary updates dynamically in the DOM.

Oct 6, 2025

Loading thumbnail…

Fork of D3 Starter

This example displays a summary of a traffic accident prediction dataset, showing the total row count and a table with the first five records. It loads the CSV file from a GitHub gist using `d3.csv` and then populates the table by iterating over the data, appending headers and cells with D3’s selection methods. The interface includes a heading and a basic styled table, with error handling that displays a red message if the data fails to load.

Oct 3, 2025