Pran6728

@Pran6728·16 public vizzes

Fork of Fork of Social network

This visualization maps a social network of ten people, using nodes and directed links to show “Friend with” relationships. The code uses `d3.forceSimulation` with forces for link distance, charge, collision, and centering, rendering the SVG with circles and text labels. A custom drag interaction allows nodes to be repositioned. The data is loaded from a JSON file, and marker-end arrows indicate link direction. Hover styling highlights nodes via a CSS class toggled in mouseover and mouseout events.

Mar 28, 2023

Loading thumbnail…

Fork of Social network by Praneeth

This social network visualization displays ten individuals as circular nodes connected by lines to represent friendship links, with the data read from `data.json`. Each node is labeled with a person's name and rendered as a 75-pixel-radius circle, while links use arrow markers to indicate directed relationships. The network layout is computed using several force-directed physics simulations from D3 version 6, including `d3.forceSimulation` for the overall physics, `d3.forceLink` for link-based attraction, `d3.forceManyBody` for repulsion between nodes, and `d3.forceCollide` to prevent overlap. Nodes are draggable, and hovering highlights the selected node with a thicker stroke via mouseover and mouseout event handlers.

Mar 28, 2023

Loading thumbnail…

Fork of Praneeth ICE 8

This interactive visualization shows a branching tree of plant species, from the root category “Plants” down to subgroups like Mosses, Ferns, Gymnosperms, and Angiosperms. A click on any node expands or collapses its children, with smooth 750ms transitions. The code uses D3.js v3’s `d3.layout.tree` to compute positions, `d3.svg.diagonal` for curved links, and SVG circles and text for nodes. Node colors encode type and level properties from the hardcoded dataset, while animations rely on D3 transitions.

Mar 28, 2023

Loading thumbnail…

Fork of India map by Praneeth

This choropleth map of India visualizes the country’s first-level administrative divisions, with each state or union territory filled by a categorical color and labeled with its name. The visualization uses D3 v5 to load geographic data from an external JSON file, projecting the geometries with `geoMercator` and rendering them as SVG paths via `geoPath`. State names are placed at path centroids using the projection’s centroid calculation. The map relies on the `topojson` library to convert the GeoJSON features into renderable shapes, with a hover effect that highlights individual states in white.

Mar 28, 2023

Loading thumbnail…

fork by Pran ICE 8

This example displays an interactive world map using the equirectangular projection. Countries are rendered as gray SVG paths with black, semi-transparent borders and respond to mouse hover by turning orange. The visualization uses d3.geoPath and d3.geoEquirectangular to project geographic data from the world-atlas TopoJSON source. The sphere background is filled with a distinct blue color. The map is built with D3 version 5 and the topojson library’s feature method.

Mar 27, 2023

Loading thumbnail…

Fork by 11604584

This chart shows car sales from 2008 to 2018 as a smooth area chart, with the line tracing sales over time and a pink fill beneath it. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` and `area` generators with `curveBasis` for smoothing, and `axisBottom`/`axisLeft` for tick marks. Data is loaded from a CSV URL, with years parsed via `d3.timeParse` and sales as numbers. The SVG is 930 by 450 pixels, with gridlines, axis labels, and a bold title.

Mar 13, 2023

Loading thumbnail…

Fork by 11604584

This visualization displays the Iris dataset as a scatter plot, mapping petal width to sepal length with points shaped by species. It uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbols to distinguish species via different path shapes, and d3.axisLeft/axisBottom for ticks. Every 15 seconds, the x-axis attribute rotates through the four numeric columns, animating the plot with setInterval in SVG. Data is loaded from a CSV via d3.csv, rendered with the d3 selection API.

Mar 12, 2023

Loading thumbnail…

Fork by

This example presents a line chart of auto sales from 2004 to 2012, using D3 v5 to render SVG. It shows sales values over time, with a time-scaled x-axis for the year and a linear y-axis for sales. The code explicitly creates axis labels, tick lines, and a title within the SVG. Data is loaded asynchronously from a provided CSV file via `d3.csv`, then parsed and drawn using a `d3.line` generator applied to scale functions.

Mar 12, 2023

Loading thumbnail…

Fork of Fork by 11604584

This visualization is a D3.js pie chart showing weekly sales for different shoe brands. The chart displays each brand’s sales as a proportional slice, labeled with the sales value in thousands, alongside a legend that pairs each brand’s name with its corresponding color and sales amount. The code uses the `d3.csv` loader to fetch data from a remote Gist URL, `d3.pie` to compute arc segments, `d3.arc` with zero inner radius to generate the pie geometry, and `d3.scaleOrdinal` to assign a fixed set of colors to the slices. All graphics are rendered as SVG elements within a 960x500 canvas.

Mar 12, 2023

Loading thumbnail…

Fork of 11604584

This visualization displays the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis. Each of the 150 flowers is rendered as a colored circle, with species (setosa, versicolor, virginica) distinguished by yellow, black, and pink fills. The plot includes labeled axes and uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs. Data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Mar 12, 2023

Loading thumbnail…

11604584

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis. Each flower is represented by a circle, colored by its species (setosa, versicolor, or virginica) using a custom color scale. The visualization is built with D3 v7, using the `scaleLinear` for axes, `scaleOrdinal` for color mapping, and a `scatterPlot` module that adds axis labels and legends. Data is loaded from a CSV file and rendered in an SVG canvas.

Mar 12, 2023

Loading thumbnail…

Fork of Penguin Data by Pran

This scatter plot visualizes penguin data, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). The visualization also encodes bill length and bill depth as the horizontal and vertical radii of each circular mark, creating a bubble-like effect. Built with D3 v5 and React, the code uses `d3.csv` to load the dataset, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for tick labels. The SVG rendering is driven by a joiner pattern, applying coordinates, fill colors, and radii to circles.

Mar 7, 2023

Loading thumbnail…

Fork by ICE 6 Pran

This bar chart visualizes weekly sales data from a CSV file, with each bar representing an ID and its corresponding sales figure, and includes interactive tooltips that display the sales value on hover. The visualization uses D3 v7 and is built with an SVG canvas. It employs `d3.csv` to load the data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to render the axes. Bars change color on mouseover via a custom tooltip implemented with D3 selections.

Mar 6, 2023

Loading thumbnail…

Untitled

This example presents a simple dataset preview page for "ICE-5," showing the file size, row count, and column count of a CSV file loaded from a remote URL. The page displays this metadata in red text within an HTML heading, set against a repeating background image. It uses the D3.js library, specifically the `d3.csv` function to fetch and parse the data and `d3.csvFormat` to calculate its size, while styling the page with inline CSS and a background image hosted as a GitHub gist.

Mar 1, 2023

Loading thumbnail…

Fork of Praneeth

A geometric clown face rendered with SVG primitives, including circles, ellipses, rects, and paths, is drawn inside a React component using D3's arc generator. The face features a white circular head, red nose and blush, stylized eyes with dashes, and a cunning mouth arc. Red cap-like arcs are rotated and positioned at the top. All shapes are composed with absolute coordinates and transforms, using D3 v5 and React 16.9, with no external data source.

Feb 22, 2023

Loading thumbnail…

Fork by Praneeth

This visualization displays a stylized smiley face, composed of a gradient-filled background circle, two eyes, a mouth arc, and a set of teeth, rendered as SVG elements within a React application. The face’s features are positioned and sized using props passed to the `Face` component, which orchestrates the layout through helper components like `BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`. The code leverages the D3.js library’s `arc` generator to construct the mouth and teeth shapes, while React manages the component hierarchy. The data for the face’s geometry is defined directly in the main `App` component, with the visualization rendering into the DOM via `ReactDOM.render`.

Feb 22, 2023