shmouelsamares

@shmouelsamares·5 public vizzes

Tree Example

An interactive collapsible tree diagram displays hierarchical data from a hardcoded JavaScript array, with a single root node ("seat") branching into five child nodes. The visualization, built with the D3.js library (version 3.5.17) and rendered as SVG, uses animated transitions to redraw nodes and links when a node is clicked, expanding or collapsing its children. The tree layout algorithm (d3.layout.tree) positions nodes vertically by depth, while d3.svg.diagonal draws the curved links between parent and child nodes.

Mar 6, 2023

Loading thumbnail…

Untitled

This visualization uses a circular chord diagram to display migration patterns between world regions, with colored arcs representing directional flows where arrow size indicates the volume of movement between regions. Built with R, it loads a weighted adjacency matrix from GitHub and processes it using `tidyverse` for data manipulation, `viridis` for the color palette, and `circlize` to render the diagram itself. The plot features rotating sector labels, axis ticks with graduation marks, and arrow-styled links that vary in height to convey migration magnitude.

Feb 28, 2023

Loading thumbnail…

Untitled

This example demonstrates a minimal React page that manipulates a heading element using D3.js. It shows how d3.select() and d3.selectAll() can alter the DOM, changing the h1 tag’s text, color, and class. The bundled data.json contains a node-link structure with six nodes and two edges, though it is not currently rendered in the visualization. The code relies solely on D3’s selection API, not on forceSimulation or other layout functions, making it a basic introductory exercise in combining React with D3.

Feb 23, 2023

Loading thumbnail…

Untitled

This example shows an arc diagram where nodes are positioned along the x-axis and connected by curved links, with each node represented as a green circle. The visualization uses D3.js v4 to read a dataset containing node and link information, mapping node names to x-coordinates via a scale. The code selects and enters circle elements for each node, setting their horizontal position using the x scale and placing them at a fixed vertical offset, with the SVG created inside the `#my_dataviz` div.

Feb 22, 2023

Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It displays each data point as a circle in an SVG rendered at full window size. The code uses d3.csv to load the data, d3.scaleLinear with d3.extent for axes, and d3.axisLeft and d3.axisBottom to draw the scales.

Feb 22, 2023