ShivaPriyad

@ShivaPriyad·12 public vizzes

Social Network graph

A social network graph displays nine people as labeled blue circles connected by weighted black lines. The visualization uses a force-directed layout via `d3.layout.force` to position nodes, with link thickness proportional to the `weight` value from the loaded `graph.json` data. Nodes are draggable, and the graph renders in SVG with D3 v4. The tick event updates node transforms and link coordinates continuously, creating an interactive, physics-based layout.

Jul 9, 2022

Loading thumbnail…

Australia Map

This example visualizes Australia’s electoral boundaries as a static choropleth map, coloring each state or territory by its electoral division name. The map renders geographic shapes from a TopoJSON file using `d3.geoPath` with a `d3.geoMercator` projection, and applies a categorical color scale via `d3.scaleOrdinal`. Built with React and d3.v5, the SVG output is generated by appending paths to the DOM, with tooltips added through appended `<title>` elements.

Jul 9, 2022

Loading thumbnail…

World Map with GeoNatural Projection using TopoJson Data

This example shows a world map rendered with a Natural Earth projection, where each country is filled in light green and the surrounding sphere is blue. The visualization displays geographic boundaries as SVG paths, with countries loaded from external TopoJSON data and converted into GeoJSON features. The code uses d3.geoNaturalEarth1 for projection, d3.geoPath to generate path data, and the topojson.feature method to parse the geographic data.

Jul 9, 2022

Loading thumbnail…

Fork of Fork of ICE8 - USA Map

This example displays a choropleth-style map of the United States with state boundaries and graticules, rendered as SVG. The map uses a geoAlbers projection with d3.geoPath and d3.geoGraticule, while React manages the component state. Data comes from a TopoJSON file loaded via d3.json and processed with topojson.feature and topojson.mesh. The visualization shows state interiors in blue, land masses in green, and a light sphere background.

Jul 9, 2022

Loading thumbnail…

Fork of Choropleth Map Argentina Dptos Corona

This choropleth map displays confirmed COVID-19 cases across Argentine departments, using a logarithmic color scale from blue to red to represent case counts. The visualization renders geographic boundaries as SVG paths via d3.geoPath with a Transverse Mercator projection, and features zoom and pan controls via d3.zoom. Hovering a department triggers a CSS pink highlight and reveals a tooltip with the department name, province, and case total. The map reads TopoJSON data from a GitHub-hosted United Kingdom counties file, with the fork repurposing that geometry for Argentina.

Jul 9, 2022

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example shows a social network graph of people connected by friendship links, with eight circular nodes labeled with names like AMAR, PINKY, and HASH. The directed graph uses red circles for all nodes and arrowed lines for links, rendered as SVG. Built with D3 v6, it uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes, while drag behavior lets users move nodes. The data comes from a JSON file specifying node groups and link relationships.

Jul 9, 2022

Loading thumbnail…

Fork of Family Tree

Deegutla's Family Tree is a static, animated SVG visualization of a three-generation family hierarchy, rooted at SuvarnaVimala and branching into five children and four grandchildren. Each node is a colored circle representing its generation, with green, seagreen, and lightgreen distinguishing depths, and is labeled with the family member's name. The code uses `d3.stratify()` to convert the flat parent-child data array into a hierarchy, `d3.tree()` to compute layout positions, and SVG `path`, `circle`, and `text` elements. Entry transitions animate the linking paths and circle radii over 800-1000 milliseconds using D3's `.transition()`.

Jul 9, 2022

Loading thumbnail…

Fork of Fork of Australia Electorate Map

This interactive map of Australia displays its electoral divisions, with each region filled by a color from a categorical palette and labeled with its name. Built with D3 v5 and React, it uses the `topojson` library to parse the provided `australia.json` file and `d3.geoPath` with a Mercator projection to render the geographic boundaries as SVG paths. The visualization loads the data from a local file and colors each electorate distinctly based on its division property.

Jul 9, 2022

Loading thumbnail…

Fork of World Map

This visualization presents a world map using an orthographic projection, creating a three-dimensional globe effect with shaded landmasses and interior boundaries. It uses d3.geoPath with d3.geoOrthographic and d3.geoGraticule to render the sphere, graticule, and country features, with data sourced from the world-atlas TopoJSON file. The React-based SVG rendering applies custom styling to differentiate land, interiors, and graticules.

Jul 9, 2022

Loading thumbnail…

3D Bar Chart

This example shows vegetable prices per pound across four seasons—Winter, Fall, Summer, and Spring—for seven vegetables including Potato, Tomato, and Peas. It uses Highcharts.js with the Highcharts 3D module to render a 3D column chart. The chart’s options3d settings enable a tilted, rotated view with perspective depth, while columns are stacked and grouped along the z-axis to compare seasonal data. The x-axis lists vegetable categories, the y-axis denotes price, and the z-axis labels seasons.

Jul 6, 2022

Loading thumbnail…

Fork of 3D Bar Plot AISHWARYA-M

This is a fork of a 3D bar plot that visualizes UN population data for ten countries. The chart renders as a series of 3D cubes using the `d3-3d` library, with each cube’s height encoding the country’s 2020 population. Users can drag to rotate the entire plot, which recomputes the cube faces and labels via `cubes3D.rotateY` and `cubes3D.rotateX` in real time. The cube vertices are defined by eight coordinate points, and the project combines React for the 2D bar-chart variant with raw SVG and D3 v4 for the 3D rendering. The data is loaded asynchronously from a CSV using `d3.csv`.

Jul 6, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays the relationship between study time and exam marks for individual students, using a scatter plot with semi-transparent circular marks. It is built with the Vega-Lite API, a high-level grammar for declarative visualization, which compiles specifications into Vega and renders them as SVG. The code reads student data from a remote CSV file via `d3.csv`, and incorporates a custom `config` object to adjust axis styling and label appearance. Tooltips are enabled through the Vega Tooltip handler, allowing users to inspect exact mark values.

Jul 2, 2022