preddythandra

@preddythandra·9 public vizzes

Untitled

This interactive force-directed network visualization displays connections between named individuals, with nodes as yellow circles labeled by name and connected by black lines. Built with D3.js v4, the example employs `d3.forceSimulation` along with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute the layout. The data comes from `flare.json`, which defines nodes and links, while the rendered SVG elements update their positions dynamically during the simulation's tick events.

Mar 29, 2023

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This example visualizes a social network as a directed graph, showing how individuals are connected through friendship links. Nodes represent people with a consistent cyan color and circle shape, while lines with arrow markers depict the direction of each friendship relationship. The graph uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, with drag interactions enabled. Data comes from a local `data.json` file containing nodes and links with relationship attributes, and hover states are styled via CSS classes.

Mar 29, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This example visualizes a small social network of eight people and their friendship connections as a force-directed graph. The D3.js v6 code uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes and edges dynamically. It renders nodes as red circles with labels and links as lines with arrow markers, all within an SVG container. Data comes from a local `data.json` file. Nodes are draggable via D3's drag behavior, and hovering highlights a node with a green outline.

Mar 29, 2023

Loading thumbnail…

Family Tree of plants

This example shows an interactive, animated family tree of plants, using color-coded nodes to represent different plant types and connecting them with labeled, arrowed links. The visualization loads hierarchical data from a JSON file and renders it as an expandable tree using D3.js v3’s `d3.layout.tree`, with SVG elements for nodes and links. Users can click nodes to collapse or expand branches, while a zoom behavior and drop-shadow filter enhance the display. The tree layout dynamically recalculates node positions, and collisions are checked during updates.

Mar 29, 2023

Loading thumbnail…

Pooja's USA Country Map

This map displays the 50 US states using an Albers equal-area projection, with states colored blue and each state turning purple on hover. The visualization renders geographic data as SVG paths using d3.geoPath, applying a geoAlbersUsaTerritories projection. TopoJSON's feature and mesh functions process the US Atlas states-10m.json topology to create the land polygons and state borders. The React frontend uses the useData hook to load and transform the data asynchronously.

Mar 29, 2023

Loading thumbnail…

Pooja's World Map with D3.js!

This example displays a world map using the geoEquirectangular projection, with country boundaries rendered as black paths with white strokes on a navy sphere. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the `feature` method. The visualization uses D3 v5’s `select`, `json`, `geoPath`, and `geoEquirectangular` functions, with SVG shapes styled via CSS. Hovering over a country highlights it in yellow through a dedicated `:hover` rule.

Mar 28, 2023

Loading thumbnail…

pooja thandra

This scatter plot visualizes penguin measurements, with flipper length on the x-axis and body mass on the y-axis, colored by species (Adelie, Gentoo, and Chinstrap) using red, blue, and black. It loads data from a CSV via `d3.csv`, parses numeric fields, and renders circles with `d3.scaleLinear` and `d3.axisLeft`/`d3.axisBottom` in SVG. The chart also encodes bill length and depth through circle `rx` and `ry` attributes, though these are minimally visible at the fixed radius of 5 pixels.

Mar 7, 2023

Loading thumbnail…

pooja thandra

This example shows a horizontal bar chart displaying movie ratings for the top 15 films, with labeled axes and a blue gridline for each rating tick. It loads CSV data from a GitHub gist using d3.csv, then renders SVG bars with React and D3’s scaleBand and scaleLinear for positioning. Axes are manually constructed with d3.ticks, and the chart updates through React state and useEffect after asynchronous data loading.

Mar 7, 2023

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the basic cost of Netflix subscriptions across fifteen countries, revealing a range of prices. Built as a React application, it loads CSV data from a GitHub gist and uses D3 v5 functions like `scaleBand` and `scaleLinear` for coordinate mapping. The visualization renders bars as SVG `rect` elements within a React component, with axes and tick labels generated through iterative map functions. The chart is presented in an HTML page with an embedded YouTube video.

Mar 7, 2023