JulianWgs

@JulianWgs·4 public vizzes

HTML Starter

This example demonstrates a minimal HTML page with SVG rendering, featuring three concentric circles drawn at two horizontal positions and a closed blue curve through a diamond-shaped path. It shows how D3.js version 6 can select DOM elements, bind data arrays, and append shapes with dynamic attributes. The circles use transparent fills with black strokes, while the line graph employs d3.line() with curveBasis interpolation. The code mixes vanilla JavaScript with D3 selections, logging "Hello JavaScript!" to the console after rendering.

Nov 24, 2020

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React with D3 v5, employing `scaleLinear` for axes, `extent` for domains, and `format` for tick labels. Circular marks are rendered as SVG elements with tooltips, while custom Axis components draw grid lines and labels. The plot uses the Poppins font and a teal color scheme for a polished, modern appearance.

Nov 24, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates basic DOM manipulation with D3.js by arranging red rectangles into a grid and positioning them within an SVG canvas. The code uses D3’s `select` and data joins (`selectAll().data().enter().append()`) to generate groups and rectangles based on calculated coordinates. It explicitly references `d3.arc` (imported but unused), while the visible rendering relies on SVG `rect` elements positioned via transform attributes. The layout logic computes row and column counts from a given number of replicas, though the current implementation produces a simple static grid rather than an animated face.

Dec 25, 2019

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries in 2020, using horizontal bars with population values on a linear scale. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Custom `AxisBottom` and `AxisLeft` components render tick marks and labels, while `Marks` generates rectangles with tooltips. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv and formatted with `d3.format` to abbreviate values (e.g., "1.4B").

Dec 25, 2019