Csar171991

@Csar171991·5 public vizzes

Histogram

This histogram displays population counts for Peruvian regions using a horizontal bar chart, with the y-axis listing country names and the x-axis showing population values scaled linearly. The visualization uses D3 v7’s `scaleBand` and `scaleLinear` to map data, `axisLeft` and `axisBottom` for axes, and SVG rectangles for bars. Population values are multiplied by 1000 in the CSV parsing step, and the chart is rendered within a margin-defined group using D3 selections.

Jul 24, 2023

Loading thumbnail…

primer

This radial chart shows daily temperature patterns over a year, with light-steelblue bands for the full min–max range, steelblue bands for the typical interquartile range, and a line tracing the daily average. Built with D3’s `scaleUtc`, `scaleRadial`, `lineRadial`, and `areaRadial`, it renders circular month labels and radial gridlines. The data comes from the JSON file, which records daily average, minimum, and maximum temperatures.

Jul 17, 2023

Loading thumbnail…

Networking_minedu

This example shows a small network of nine individuals connected through eight weighted links, likely representing a professional or organizational hierarchy. A force-directed layout positions nodes, with circles labeled by name and red lines indicating relationships. The visualization is built using D3.js v4, specifically the `d3.layout.force` API for simulation and `d3.select` for SVG rendering. The code imports modules from D3, creates an SVG canvas of 960 by 500 pixels, and loads data from a local JSON file containing node group assignments and link weights. Node size is fixed, and link thickness is not visually encoded despite the weight data.

Jul 14, 2023

Loading thumbnail…

Casillas

This icicle tree diagram visualizes the hierarchical structure of world regions and countries from a JSON dataset. It uses a D3.js tree layout with horizontal links and proportional text sizing, where font size decreases with depth in the hierarchy. The visualization renders as an SVG, with text labels styled using the Playfair Display font and shadow effects for readability against the teal link strokes.

Jul 14, 2023

Loading thumbnail…

SVG fundamentals

This example demonstrates basic SVG shape elements arranged in a static composition, including circles, rectangles, lines, and a path. The graphic shows how fill colors, stroke properties, and coordinate positions define each primitive's appearance. The code directly uses the SVG API with inline `<circle>`, `<rect>`, `<line>`, and `<path>` tags within an `<svg>` element, without any JavaScript libraries. Rendering relies on the browser’s native SVG support, as specified by the `svg` rendering metadata.

Jul 14, 2023