rykay

@rykay·3 public vizzes

Untitled

This example shows personal spending over time as a bar chart titled “My Spendings Over The Years,” with each bar colored by a quantized scale from light to dark blue to indicate dollar amounts. The visualization uses D3 v7 to load CSV data, create a band scale for years and a linear scale for dollar values, and render SVG rectangles for bars. An axis with dollar-formatted tick labels, a year label, and a d3-legend color legend are added, with the y-axis domain hard-coded to 2125 for consistent scaling.

Apr 26, 2022

Loading thumbnail…

Untitled

Three circles of varying sizes and colors visualize three numeric values from a clay dataset, with each circle’s radius roughly corresponding to its value and a number label placed inside. The code builds an SVG using D3 v7 in a React-friendly HTML page, drawing the circles with fixed coordinates and styling them with opacity and white strokes. It directly appends SVG elements via `d3.select` and `.append`, setting circle positions, radii, and fill colors, while text elements display the values 62, 11, and 17 in font sizes tied to those numbers.

Apr 7, 2022

Loading thumbnail…

Untitled

This visualization uses a bar chart to show the percentage of points Rafael Nadal won under pressure across seven clay-court tournaments, including Monte Carlo, Rome, Barcelona, Buenos Aires, Roland Garros, Sao Paulo, and Madrid. The bars are colored with a sequential quantized scale (`d3.scaleQuantize`) ranging from light to dark red, and a legend from the d3-legend library indicates the percent values. The chart is rendered with SVG using D3 v7’s `d3.scaleBand` and `d3.axisBottom`/`d3.axisLeft`, with data loaded from a CSV file hosted on GitHub.

Apr 7, 2022