A

Asherpranayp

@Asherpranayp·18 public vizzes

Loading thumbnail…

Fork of Social Network Graph ICE-8

A force-directed social network graph visualizes connections between individuals from the `data.json` file. Nodes represent people, and lines with arrow markers depict friendships, with edge thickness possibly indicating relationship strength. The visualization uses `d3.forceSimulation` with link, many-body, collision, and centering forces to position nodes. Built with D3 v6 and React, it renders as an SVG and allows interactive node dragging through `d3.drag`.

Loading thumbnail…

Fork of Social Network Graph ICE-8

A social network graph maps named individuals to their connections, with nodes labeled by person ID and edges drawn as directed, arrowed lines. The visualization uses a force-directed layout via `d3.forceSimulation`, combining link, many-body charge, collision, and centering forces for layout. Nodes are rendered as cyan circles in SVG, with interactive drag-and-drop support. Data comes from a `data.json` file containing arrays of nodes and links, styled with CSS for hover effects and edge appearance.

Loading thumbnail…

Fork of Family Tree

This example renders a hierarchical family tree from a JSON structure, depicting relationships between a person and their schools. It uses D3.js v3 with a custom tree layout to position nodes, and SVG is used for drawing the graph. The visualization features interactive nodes that are colored by type and can be clicked, with links between them and a tooltip that appears on hover. The animation is handled by D3's transition system, and the view can be zoomed and dragged.

Loading thumbnail…

ICE-8 United States of Amercia Map

This visualization presents a map of the United States using an Albers equal-area projection, rendered as SVG paths. The landmass is filled in green, with state boundaries shown as white interior lines against a white spherical background. Built with React and D3 v5, it employs `d3.geoAlbers`, `d3.geoPath`, and TopoJSON’s `feature` and `mesh` functions to load and process the US Atlas data from a CDN. The graticule is defined but not rendered.

Loading thumbnail…

Fork of World Map IC8

This example displays a world map rendered as black countries outlined with a subtle maroon stroke on a cyan sphere, using the Natural Earth projection. The visualization loads geographic data from a JSON file via `d3.json`, converts it to features with `topojson`, and draws each country path using `d3.geoPath` with a `geoNaturalEarth1` projection. The SVG output and styling are managed through `d3.select` and CSS classes.

Loading thumbnail…

ICE - 7 Area Chart for Car Sales in Canada

This visualization shows car sales in Canada over time using a smooth area chart, with the y-axis labeled “Sales in Canada” and the x-axis labeled “In through the Years.” The chart employs D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `line` generators with `curveBasis` to render a curved line and filled area beneath it. Sales data is parsed from a CSV file, with years converted via `d3.timeParse`. Axes are drawn using `axisLeft` and `axisBottom`, and gridlines are created through tick size settings. The SVG rendering includes styled paths for the line and area, with margins defining the plot region.

Loading thumbnail…

The Line Chart

This visualization shows Canadian car sales over time as a green line chart, with the x-axis representing years and the y-axis representing sales figures. The code uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to construct the SVG chart. Data is loaded from a CSV file via `d3.csv`, with the year parsed using `d3.timeParse` and sales converted to numbers. The chart includes labeled axes, grid-like tick marks, and a rotated y-axis label, all styled via CSS.

Loading thumbnail…

ICE7-Pie Chart

This pie chart visualizes the maximum runs scored by cricketers, displaying each player's total as a labeled segment with a legend. The chart uses D3.js (d3.v5) to load CSV data via `d3.csv`, compute arc layouts with the `pie` and `arc` functions, and render SVG paths and text. Colors are assigned with `scaleOrdinal`, and values are formatted using `format`. The dataset is fetched from a remote gist URL, and the visualization includes player names and run totals in the legend.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, cycling through different sepal and petal measurements on the x-axis while maintaining petal width on the y-axis. The visualization updates every few seconds with a `setInterval`, animating the axis labels and re-rendering the SVG circles. It uses reusable chart architecture from `scatterPlot.js` with D3 v6 APIs like `scaleLinear`, `axisLeft`, and `axisBottom`. Color-coded circles distinguish three iris species with a custom legend, while the project also draws from D3's `csv` parser for data loading and employs SVG rendering throughout.

Loading thumbnail…

Creating a Scatter Plot with D3.js

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width to Cartesian coordinates while encoding species through color. Built with D3.js v6, it uses `scaleLinear` for axes, `extent` for domain calculation, and `select` with `.join` for SVG circle rendering. The chart includes rotated axis labels for sepal length and petal length.

Loading thumbnail…

Fork of SFO & Oceanside NOAA Summary of the Month 1946-2020 with Menus & Legend

This scatterplot visualizes monthly NOAA climate summaries for two Bay Area stations from 1946 to 2020. A dropdown menu allows users to switch the y-axis among temperature attributes, while an interactive color legend filters the display by station. Built with React and D3 v6, the SVG renderings use `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for station colors. Hovering over the legend dims the non-selected station’s points.

Loading thumbnail…

Fork of Scatter Plot Simple

This example visualizes the classic Iris Dataset as a scatter plot, showing petal length versus sepal length for 150 flowers across three species. The visualization uses D3 v7 to load the CSV data via `csvParse`, and the `scatterPlot` function constructs linear scales with `scaleLinear` and `extent` to map data values to screen positions. Each data point is rendered as a circle using D3’s data join pattern, though the plot omits axes, focusing purely on the spatial distribution of the points. The chart fills the entire browser window dynamically.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length, body mass, bill length, and bill depth across three penguin species (Adelie, Gentoo, and Chinstrap) from the Palmer Penguins dataset. It encodes data points as circles with fill colors distinguishing species, while also mapping bill dimensions to circle radii. Built with D3 v5 and React, the SVG uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, with data loaded via `d3.csv` from a GitHub gist source.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example visualizes IPL match data for 2017 as a 3D multi-series bar chart, showing six monthly values (January through June) for each manufacturer. The chart uses D3.js v5 with the d3-3d extension for 3D bar geometry, rendered via X3DOM through the d3-x3d library’s `barChartMultiSeries` component. Data is loaded asynchronously from a CSV file using D3’s `csv` function, with rows parsed into key-value pairs. The visualization initially displays random dataset2 from d3-x3d before replacing it with the real CSV data on load.

Loading thumbnail…

Data Visualization

This example displays a CSV dataset’s metadata summary, including file size in kilobytes, row count, and column count, presented in a styled header and preformatted text block. It loads D3 v7 via CDN and uses `d3.csv` to fetch remote data from a GitHub gist, then formats the output with `d3.csvFormat` and `Math.round`. The page also embeds an external SVG image of a house, with layout controlled through custom CSS classes. The visualization demonstrates basic data loading, parsing, and textual output without any graphical charting.

Loading thumbnail…

Fork of Introduction of SVG

This example displays an abstract geometric composition built from layered SVG rectangles and circles. Seven horizontal color bands form a gradient-like background, while a vertical brown bar and five overlapping circles create a simple landscape or abstract figure. The graphic uses inline SVG markup with static positioning, and defines three linearGradient elements with different rotation angles to fill the circles with varied color transitions. The code relies solely on core SVG APIs, with no external JavaScript libraries or data sources.

Loading thumbnail…

Fork of Fork of Bob Ross Painting

This animated SVG landscape mimics a Bob Ross painting, showing a mountain scene with a sun that rises and sets over a gradient sky and ocean. The image cycles through a day-night transition over 20 seconds, altering sun position, opacity, and the colors of the sky, mountains, and water. The visualization uses raw SVG elements, including `rect`, `circle`, and `path`, combined with SMIL animations within `<linearGradient>` definitions to create the shifting atmospheric effects.

Loading thumbnail…

Fork of Fork of Smiley Face Part III

This example renders a smiley face using React and D3, drawing a red circle with white outlines as the head, two smaller circles for eyes, and an arc for the mouth via the `d3.arc` API. The SVG is generated programmatically with fixed dimensions, centering the face and applying a translation transform. The code imports `React` and `ReactDOM` to mount the component, while D3 v5 provides the arc geometry with specified inner and outer radii and angle limits.