CH SAMPATH

@sampath5·23 public vizzes

Social Network Graph

This social network graph visualizes relationships among eight individuals, such as Virat and Deepika, with line thickness indicating connection strength. The visualization uses D3.js version 6 and renders as an SVG. It leverages `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes. Users can drag nodes to explore the network, and hovering highlights a node with a thicker stroke, as defined in the CSS.

Apr 13, 2023

Loading thumbnail…

Family Tree

A family tree of British royals visualizes lineage from George through Elizabeth VI and Margaret to their descendants, with colored nodes indicating each person's generation. The D3 v3 tree layout arranges the hierarchy, while SVG rectangles render each family member and labeled links display relationships like "Son" or "Daughter." Built with D3 and jQuery, the visualization supports zooming and panning via `d3.behavior.zoom`, and uses `foreignObject` for text wrapping, with interactive hover tooltips and click-based node collapsing driven by the `update` function referencing the `data.json` source.

Apr 13, 2023

Loading thumbnail…

Country Map

This example displays a choropleth map of Italy, with its administrative regions filled in sky blue and separated by black borders. The map uses the Mercator projection and renders geographic features with the `geoPath` function from d3. Hovering over a region highlights it. The application is built with React, fetching TopoJSON data from a remote URL and processing it with the `topojson` library to generate land features and interior borders.

Apr 13, 2023

Loading thumbnail…

Family Tree

This example visualizes a family tree as a branching set of animated nodes and links on a black background. The SVG renders green circles for each person and straight lime-colored paths that connect parents to children, with names labeled inside the nodes. The code builds the hierarchy from an array of child-parent pairs using `d3.stratify` and `d3.tree`, then animates the paths and circles with `transition()` and `duration()`. Both the connections and nodes are appended to a single `<g>` element, and text labels are positioned using the tree’s computed x and y coordinates.

Apr 13, 2023

Loading thumbnail…

World Map

This example renders a world map as a static SVG graphic. It displays countries in orange against a blue sphere, with a red hover highlight effect. The visualization uses D3.js functions `select`, `json`, `geoPath`, and `geoEquirectangular` for the equirectangular projection. It loads GeoJSON country boundaries from the `world-atlas` package via `json()`, converting them with the TopoJSON `feature` API before drawing with `geoPath`. The stylesheet defines the sphere and country fills.

Apr 13, 2023

Loading thumbnail…

Fork of D3 map

This visualization displays a world map populated with data points sourced from a SPARQL query against the Network of Digital Heritage (NMVW) dataset. Using the D3 v5 library with the geoNaturalEarth1 projection and geoPath for country outlines, the example fetches geographic coordinates and plots them as animated circles. Each point transitions from zero to eight pixels in radius with a bounce easing effect, creating a sequential reveal. The map itself renders in SVG, with a black sphere background and goldenrod countries.

Apr 13, 2023

Loading thumbnail…

Fork of Globe Zoom - Animate

A reactor site map with land and country borders projects nuclear explosion locations on a global Mercator map using d3.geoMercator and d3.geoPath. Circles mark each explosion’s latitude and longitude, with tooltips showing the site name and coordinates. Land polygons come from TopoJSON world-atlas data, while explosion records load from a CSV; the map dynamically updates as projection parameters change, with graticules and an interactive hover effect on countries.

Apr 10, 2023

Loading thumbnail…

diabetes

This interactive visualization uses D3.js v3 to plot global diabetes and population data on an orthographic globe projection, with controls to switch between globe, Winkel III, and Mercator map projections. The React-based frontend loads world country boundaries from a TopoJSON file and renders them as SVG paths colored by land and sphere attributes. Users can click and drag to rotate the globe, zoom with the mouse wheel, and hover over regions to view tooltip details about each country’s data values, which are loaded from external CSV sources. The interface includes animated transitions between datasets and axis labels for the quantitative scales.

Apr 8, 2023

Loading thumbnail…

3D bar chart

This example shows a 3D bar chart displaying housing sales data for the United States and its regions across multiple years. The visualization renders bars in three dimensions using the d3-3d and d3-x3d libraries, with data loaded from an external CSV file via d3.csv. The x3dom library handles the 3D scene rendering within the HTML page. The chart uses a barChartMultiSeries component from d3-x3d, allowing viewers to compare regional sales figures over time in a spatial layout.

Apr 6, 2023

Loading thumbnail…

3D Scatter plot using D3.js

This 3D scatter plot visualizes the relationship between mobile phone attributes—battery power, clock speed, and internal memory—using a dataset loaded via `d3.csv`. Plotly’s `scatter3d` trace renders the data points with a fixed marker size and color, while axis labels and titles are customized through the layout’s `scene` configuration. The example integrates Plotly.js with D3.js, showing a case where the D3 library is used purely for data fetching and parsing before the Plotly API handles visualization.

Apr 5, 2023

Loading thumbnail…

Untitled

A grid of three-dimensional cubes with negative heights renders in SVG via d3-3d’s `d3._3d()` shape pipeline, displaying numeric labels above each cube via `text` elements. The cubes are sorted using the 3D library’s `.sort` method, while face paths and labels are drawn using its provided drawing functions. An “update” button reinitializes randomly generated cube data, and a drag interaction rotates the entire scene by adjusting `.rotateX` and `.rotateY` angles, with transitions of 1000 ms for updates and instant redraw for drags.

Apr 1, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal width to sepal length while color- and shape-encoding species. Built with reusable D3 chart patterns, it uses `scaleOrdinal` and `symbol` for categorical encoding. Every two seconds, the animation cycles the x-axis through different numeric columns. The chart renders as SVG with `axisLeft` and `axisBottom` scales, and a custom legend distinguishes Setosa, virginica, and versicolor.

Mar 30, 2023

Loading thumbnail…

Line Chart

This line chart tracks the annual sales of houses in the United States from 2009 to 2022, with years on the x-axis and the number of homes sold on the y-axis. The visualization uses D3 version 5, rendering as an SVG. It employs `d3.scaleTime` and `d3.scaleLinear` for the axes, while `d3.line` with a basis curve generates the smoothed trend line. The data is loaded from a CSV file hosted in a GitHub gist, featuring red strokes, bold labels, and a centered title.

Mar 30, 2023

Loading thumbnail…

Fork of Pie Chart

This visualization shows the number of houses sold in the United States per year for ten years, displayed as a pie chart with a legend listing each year and its corresponding sales figure. The chart renders using SVG via D3 v5, with the pie layout from `d3.pie` and arcs from `d3.arc`. Colors are assigned using `d3.scaleOrdinal` with `schemeCategory10`. Data is loaded from a CSV file using `d3.csv`, and values are formatted with a custom number formatter that appends "K" for thousands.

Mar 30, 2023

Loading thumbnail…

Area chart

This area chart visualizes the number of houses sold in the United States per year. The SVG rendering uses d3.scaleTime and d3.scaleLinear to map data points, with d3.area and curveBasis creating the filled path. Axis labels and titles are styled via CSS. The source data is a CSV of yearly sales figures loaded through d3.csv.

Mar 30, 2023

Loading thumbnail…

Pokemon Scatterplot ICE 6

This scatterplot maps Pokémon attack and defense stats as circle positions, with height and weight encoded via the circle’s `rx` and `ry` attributes. Pikachu and Squirtle are highlighted in distinct colors for comparison. It uses d3.csv to load data, d3.scaleLinear with extent for scales, and d3.axisLeft/axisBottom with SVG text labels. The rendering is SVG, styled with cursive font labels and axis ticks, all within a React-free HTML page using d3 v5.

Mar 24, 2023

Loading thumbnail…

Bar chart ICE 6

A bar chart displays the number of houses sold in the North East region of the United States per year from 2011 to 2022. It uses D3 v7 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The code loads CSV data from a remote GitHub gist and includes a custom tooltip on hover. The bars are colored with a CSS-defined fill, which darkens on mouseover. The chart is titled "Houses sold (in Thousands) in each year."

Mar 24, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between attack and defense stats for Pokémon, with height and weight mapped to the rx and ry circle attributes and specific species color-coded. The visualization uses D3 v5’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes and position circles in SVG. Data loads from a CSV via `d3.csv`, with numeric parsing applied to the relevant fields. The code also appends custom text labels for the axes and plot title, demonstrating an imperative D3 approach within a React-free HTML setup.

Mar 22, 2023

Loading thumbnail…

Pokemon dataset

This example visualizes the Pokemon dataset as a scatter plot, mapping attack values to the x-axis and defense values to the y-axis, with each point colored by species and sized by its height and weight attributes. The code uses D3 v5’s `csv` loader to fetch data from a GitHub gist, then renders SVG circles via `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Points are styled with fixed radius and fill colors from a custom marker function, while axis labels and a title are added using SVG text elements.

Mar 22, 2023

Loading thumbnail…

Vizhub Bar Graph

This example shows a horizontal bar chart of Amazon prices across different states, with country names on the y-axis and cost values on the x-axis. The visualization uses React hooks (useState and useEffect) to load CSV data from a GitHub gist, then renders the chart as SVG elements. The code employs d3.csv for data parsing, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.max to determine the domain. A red gridline is drawn at each x-axis tick value, with the most recently imported year’s data shown.

Mar 22, 2023

Loading thumbnail…

SDV ICE5

This example presents the dataset’s metadata as a text summary in a web page. It shows the file size in kilobytes, the number of rows, and the number of columns from a CSV file about song and artist popularity. The page fetches the data using `d3.csv` and formats the message with `d3.csvFormat` and `Math.round`, displaying the result inside a `<pre>` element. The dataset is linked externally, and the styling uses CSS gradients for headings and text.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

Nested loops generate thousands of semi-transparent, randomly colored polygons, creating a dense, overlapping abstract composition against a black background. A single detailed Buddha silhouette path is overlaid on top. Built with React, it uses SVG polygons and paths to render the geometry. No external visualization libraries are used; the SVG elements and their properties are defined directly in JavaScript.

Mar 2, 2023

Loading thumbnail…

Fork of Fork of Ellipse flower - image

A generative floral composition scatters five hundred ellipse pairs across a dark green gradient background, each pair rotated and colored procedurally. The React component renders SVG shapes, using the `Ellipse` component to draw crossed ellipses with a nested circle at each position, with fills derived from the loop index. Random `Math.random()` calls determine x and y coordinates, while rotation angles increment by fifty degrees per iteration, creating an organic, pseudo-random flower-like pattern.

Mar 2, 2023