Sadi Hassan

Claude Code Skills Structure and Usage Guide - Best practices for skill development, activation patterns, and optimization strategies

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries using population data from a CSV file. The chart customizes both axes: a linear x-axis formats population values in billions with a custom tick formatter, while a band y-axis lists country names without domain lines. Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles, with hover effects changing bar colors to red.

Bar chart

This bar chart displays population estimates for the ten most populous countries, with horizontal bars sorted by population size. It uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft and d3.axisBottom for the axes. The SVG rendering includes rectangular elements filled with steelblue, and the population values are multiplied by 1000 to reflect actual numbers.

Face!

A yellow circle with black facial features forms a simple, animated face. The eyebrows repeatedly rise and lower over the eyes via chained `transition()` calls with a two-second duration. Built with D3 v5, the visualization uses `select`, `arc`, and `attr` on SVG elements, positioning the face’s parts relative to the center of a 500-by-500 viewport.