Casado7

@Casado7·5 public vizzes

Untitled

A stacked bar chart displays percentages for ten soccer match statistics, such as shots, possession, and passes, with two contrasting categories compared per category. Built with D3 v7 and SVG, the visualization uses `d3.stack()` to compute the stacked layout and `d3.scaleLinear` for the percentage axis. Bars animate sequentially using `d3.transition()` with staggered delays and an `easeLinear` timing. The chart omits axis labels and draws category names as text elements placed manually via a loop.

Apr 3, 2023

Loading thumbnail…

nose 2

This example displays a horizontal bar chart of letter frequencies in the English alphabet, with bars sorted in descending order and rendered in steelblue. The visualization uses D3 v7’s `select` and a `BarChart` function to map frequency values to the x-axis and letters to the y-axis. Data is ordered via `d3.groupSort` based on descending frequency, and the x-axis is formatted as a percentage. The chart is embedded directly in an HTML page with large body text and relies on D3’s bundled modules for rendering.

Apr 2, 2023

Loading thumbnail…

Stacked Normalized Horizontal Bar Chart

This stacked normalized horizontal bar chart visualizes the distribution of male and female members across multiple political party groups, with each bar normalized to represent proportions rather than raw counts. The data is sourced from a CSV file containing party names and gender counts. The chart uses D3 v6’s `d3.stack()` with `d3.stackOffsetExpand` for normalization, rendered as SVG rectangles with a color scale distinguishing genders. Interactive tooltips display exact values, while labels show raw counts, and the chart includes a color legend for age categories.

Apr 2, 2023

Loading thumbnail…

Smiley Face Part III

A smiley face is rendered as a single SVG graphic, composed of a yellow circle for the head, two black circles for eyes, and an arc for the mouth. The visualization demonstrates how React manages SVG elements while leveraging D3’s `arc` generator to create the mouth path. The code imports `arc` from `d3` and uses React components to define the SVG structure, with coordinates computed relative to a central transform. All shapes are drawn using declarative SVG elements, with the mouth’s arc path calculated via D3’s start and end angles.

Mar 31, 2023

Loading thumbnail…

Face

An abstract face composed of simple SVG shapes is drawn on a 960 by 500 canvas. A large yellow circle with a black outline forms the head, while two smaller unfilled circles on the left and right sides represent the eyes. The visualization is built using React and rendered through SVG, with the basic layout defined directly in the HTML and supplemental code in the JavaScript file. The title “Face” is displayed as the page’s header.

Mar 31, 2023