yamunayennem

@yamunayennem·13 public vizzes

Social Network graph

This example visualizes a small social network of nine people and eight weighted connections. Nodes represent individuals and links show relationships, with link thickness proportional to the weight value. The graph is rendered as SVG using D3.js and React. It employs the `d3.layout.force` API for force-directed layout and supports interactive dragging of nodes. The data is loaded from a JSON file using `d3.json`.

Apr 13, 2023

Loading thumbnail…

India Map

This example shows a choropleth-style map of India rendered in SVG, with each state filled in light green. The map uses a D3 geoMercator projection centered on the country’s coordinates, with d3.geoPath generating the state boundaries from TopoJSON data fetched from a remote gist. React components manage the data-loading hook (useData) and the Map component, while the map is displayed at full window size on a grey background.

Apr 13, 2023

Loading thumbnail…

World Map

This interactive world map displays country boundaries on a natural Earth projection, with tooltips showing country names on hover. The visualization uses D3.js v5 with d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for pan and zoom functionality. It loads geographic data from the World Atlas TopoJSON files at unpkg.com, combining country geometries with name mappings from the accompanying TSV file. SVG paths represent countries and the surrounding sphere, with hover interactions highlighting selected regions in blue.

Apr 13, 2023

Loading thumbnail…

World Map

This interactive world map displays country boundaries using a geoNaturalEarth1 projection. Users can zoom and pan the visualization via d3.zoom, which applies transform updates to the SVG group containing all geographic paths. The map renders country shapes with d3.geoPath, colored light blue with hover effects. Topojson feature extraction processes the world-atlas 50m.json dataset, while country names from the accompanying 50m.tsv file appear as title tooltips on each path.

Apr 13, 2023

Loading thumbnail…

Fork of Fork of NEW ZEALAND Country

This interactive map displays Japan’s country boundaries, rendered as SVG paths with animated simplification controls. The visualization uses a slider to adjust a topological simplification threshold, dynamically redrawing the map to show varying levels of geographic detail. Built with D3 v4, the code loads TopoJSON data, applies topojson.presimplify, and projects features using d3.geoMercator with d3.geoPath and a custom d3.geoTransform filter. Hovering highlights regions in orange and shows tooltips with area names, while the map resizes responsively with the window.

Apr 13, 2023

Loading thumbnail…

India Map ICE8

This example visualizes the states of India using a Mercator projection, centering on the country’s coordinates and scaling to fit the viewport. The SVG map renders each state as a white-filled path with grey strokes, generated from GeoJSON data fetched from a remote GitHub repository. Built with React and D3 v5, the code uses `d3.geoMercator`, `d3.geoPath`, and `d3.json` to load and draw the geographic features. The page includes a title element and demonstrates a basic D3-and-React integration.

Apr 13, 2023

Loading thumbnail…

ICE8 - Tree graph

A hierarchical tree graph displays the administrative divisions of India, from the root "India" down to cities like Hyderabad and districts such as JNTU. Nodes are rendered as colored circles, with each depth level assigned a distinct color, while green, animated paths draw the parent-child links. The visualization uses D3’s `d3.stratify()` to structure the data and `d3.tree()` to compute the layout, with SVG elements and transitions animating the node radii and link drawing. Data is provided as an inline array of parent-child pairs.

Apr 12, 2023

Loading thumbnail…

Tech Stock Visualization

This visualization shows scaled closing stock prices for 26 tech companies throughout 2020, grouped by industry category (Gaming, Streaming, Work-From-Home, Online-Retail, and Tech-Giants). The interactive line chart plots timestamps against scaled closing prices, with each company’s series distinguished by a unique color. Built with D3 v6, it uses `d3.csv` to load remote data, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the paths, and `d3.curveBasis` for smoothing. The SVG rendering includes ordinal color mapping and a bottom legend, with no animations applied.

Apr 8, 2023

Loading thumbnail…

3D BarChart for superstore dataset

This 3D bar chart visualizes sales for three product categories—Furniture, Office Supplies, and Technology—across four regions (East, West, South, Central) in a superstore dataset. The code uses the AnyChart library, specifically `anychart.column3d()`, to render vertical bars with a tilted 3D perspective via `chart.zAngle(35)` and `chart.zAspect('25%')`. It includes an animated entrance, a legend, and tooltips formatted as `${%Value}` to display dollar amounts. The data is hardcoded within the script, and styling is applied through inline CSS for a full-window container.

Apr 4, 2023

Loading thumbnail…

penguin 3D Scatter Plot

This interactive 3D scatter plot visualizes the Palmer Penguins dataset, showing body mass, bill length, and flipper length for three penguin species. Species are encoded through a custom Plotly colorscale mapping Adelie, Chinstrap, and Gentoo penguins to distinct colors. The visualization uses Plotly’s `scatter3d` trace type with D3.js to load the CSV data via `d3.csv` and parse rows into arrays. Axes are labeled with the respective measurement units, and markers include white border lines for clarity.

Apr 4, 2023

Loading thumbnail…

3D scatter plot-penguin dataset

A 3D scatter plot visualizes the penguin dataset, showing body mass, culmen length, and flipper length for three penguin species, with each species color-coded via a custom Plotly colorscale. The chart uses Plotly’s `scatter3d` trace type to render interactive markers, while D3 loads the CSV data and maps species names to numeric color values. Three.js is referenced in the README, though the actual visualization relies on Plotly’s WebGL rendering. The plot includes labeled axes and semi-transparent grid backgrounds for depth perception.

Apr 4, 2023

Loading thumbnail…

3D scatter plot-penguin dataset

A 3D scatter plot visualizes the penguin dataset from a CSV file, showing relationships between body mass, culmen length, and flipper length for three penguin species. Each species is distinguished by color—blue, orange, and yellow—using a custom colorscale. The plot uses Plotly’s `scatter3d` type and `Plotly.newPlot` to render an interactive WebGL scene via Three.js, while D3 handles loading and parsing the CSV data.

Apr 4, 2023

Loading thumbnail…

3D-ScatterPlot

This 3D scatterplot visualizes insurance charges against age and BMI, using the Palmer Penguins dataset via `d3.csv` to load remote data. Plotly.js renders the interactive chart inside a `myDiv` container, with markers colored by penguin species through a custom colorscale and a `scatter3d` trace. The layout defines axes for age, BMI, and charges, each with distinct background colors, while d3’s `unpack` function extracts numeric fields from the CSV rows. The visualization emphasizes distribution patterns across three continuous variables.

Apr 3, 2023