muddcohd

@muddcohd·5 public vizzes

Making a Bar Chart

This example shows a horizontal bar chart of population figures for the ten most populous countries, using a CSV data source. It applies a linear scale for population values and a band scale for country names, with axes generated via `axisLeft` and `axisBottom`. The chart renders as SVG rectangles filled with steelblue, and the population values are converted from thousands to raw numbers before scaling.

Jun 13, 2022

Loading thumbnail…

bar chart

This bar chart displays the populations of ten countries, ranging from China at over 1.4 billion to Mexico at roughly 131 million. The visualization uses D3 v7's `scaleLinear` and `max` functions to compute the domain from the CSV data, which undergoes a multiplication by 1000 to convert values to actual population figures. The chart renders SVG rectangles with fixed dimensions, though the implementation shown is incomplete, as it does not yet map the scales to the rectangles' positions or heights.

May 18, 2022

Loading thumbnail…

Let's Make A Face

A cartoon face is drawn entirely with SVG shapes, using a yellow circle for the head, black circles for eyes, and a curved path for the mouth created with the D3 `arc` generator. The code uses D3 v7 selections to append elements to an SVG canvas, with explicit attribute setters like `.attr('cx', ...)` and `.attr('d', ...)` to position the eyes and compute the mouth's arc geometry. Elements are grouped in a `<g>` element translated to the canvas center.

May 17, 2022

Loading thumbnail…

SHAPES WITH SVG

This example demonstrates basic SVG shape composition and styling within a React framework. It shows circles, rectangles, lines, and a path arranged in groups, with attributes like fill, stroke, and stroke-width applied both inline and through CSS classes. The code uses standard SVG elements (`circle`, `rect`, `line`, `path`) and CSS rules to control appearance, including a yellow group with a black outline and a blue path with round line joins. The rendering relies on the browser’s native SVG support, with transformations applied via the `scale` and `translate` attributes.

May 9, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a single static message, “Hello HTML!”, rendered as text in the center of the page. The code relies entirely on standard web technologies—HTML for structure, CSS for styling the message’s font size and alignment, and no JavaScript logic beyond the document’s markup. The rendering approach is purely DOM-based, with no data visualization or interactive elements present. It serves as a minimal template for initiating projects in VizHub, using inline styles and a basic `div` element.

May 9, 2022