jsoudeer

@jsoudeer·7 public vizzes

Fork of D3 Selection Exploration

This visualization demonstrates a dynamic scatterplot of colored circles that move and resize over time. Animated via a 60-frames-per-second interval, the circles' positions, radii, and hues are recalculated continuously. The implementation uses D3.js selection and join APIs, specifically `d3.select`, `d3.range`, and `.join('circle')`, to manage SVG circle elements. The `vizData` function updates circle attributes through `selection.selectAll('circle').data(data).join('circle')`, while `makeData.js` generates data with sinusoidal motion and color interpolation using `d3.interpolateRgb`. The SVG output is rendered directly to the browser window.

Jun 27, 2022

Loading thumbnail…

Untitled

A zoomable partition layout depicts the hierarchical flare dataset, with each node’s slice sized by its aggregated value. Clicking a slice smoothly refocuses the view on that subtree, while the top-level view restores on canvas click. D3 v4’s `d3.partition`, `d3.hierarchy`, and `d3.arc` render SVG paths, with node labels placed along curved arcs via `textPath`. The zoom animation uses `transition.attrTween` and interpolated `d3.scaleLinear` and `d3.scaleSqrt` domains. Color comes from `d3.scaleOrdinal` with `d3.schemeCategory20`.

Jun 17, 2022

Loading thumbnail…

test d3js https://observablehq.com/@d3/zoomable-sunburst

A zoomable sunburst diagram visualizes hierarchical data from the flare.json dataset, with arcs colored by top-level category and sized by numeric value. Clicking a node transitions the view, zooming and rotating to expand that branch while hiding others. The code uses d3.hierarchy, d3.partition, and d3.arc to compute geometry, with d3.scaleOrdinal and d3.interpolateRainbow for colors. Transitions are animated via d3.transition and transition.attrTween, updating arc paths and labels as the focus changes.

Jun 17, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3 to create a grid of horizontal and vertical stripes that alternate based on masks containing overlapping symbol shapes. Two sets of rectangular bands are drawn, each masked by a pattern of symbols (using `d3.symbol` and `d3.symbols`) arranged across the width via `d3.scaleBand`, with inverted black-and-white fills. The SVG rendering uses `select`, `range`, and `join` to generate 120 stripes per dimension, with masks (`<mask>`) controlling which areas of the two layers remain visible. The result is a geometric interplay of lines and icons derived from LeWitt’s conceptual style.

Jun 13, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece by drawing a grid of horizontal and vertical bars overlaid on a circle. It shows a geometric composition where a central circular area is filled with alternating stripes, created by masking a series of thin rectangles. The code uses the SVG API to construct elements, defining two masks (circle-mask and circle-mask-2) to control which bars are visible. The bars are generated by looping through 100 iterations, placing either horizontal strips with varying y-offsets or vertical strips with varying x-offsets, with the circle’s radius determined by the window dimensions.

Jun 13, 2022

Loading thumbnail…

Fork of SVG Animations using CSS transitions

A static SVG chart of geometric bars and lines responds to mouse hover using CSS transitions from the w3schools tutorial. Each rectangle and circle animates all properties over one or ten seconds, changing fill color, stroke width, and stroke color on hover. The example directly styles SVG elements with CSS transition declarations to demonstrate smooth color and sizing effects without JavaScript.

Jun 8, 2022

Loading thumbnail…

JS of HTML Starter

This example shows a minimal HTML page that combines CSS and JavaScript to render a styled greeting and a simple SVG shape. The page uses inline CSS to format a centered message at a large font size, and directly embeds an SVG element containing a single circle. The SVG circle is defined with explicit `cx`, `cy`, and `r` attributes, demonstrating basic vector graphics markup within an HTML document. The JavaScript is not used for dynamic behavior, but the structure provides a bare-bones starter for building interactive visualizations with modular web technologies.

Jun 3, 2022