jlbullerc

@jlbullerc·3 public vizzes

Customizing Axes

This bar chart displays the Gini index for the top five most income-inequal countries, with country names on the y-axis and the Gini value on the x-axis. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, while custom tick formatting converts values to abbreviated forms. Axes are styled with removed domain lines, colored ticks, and custom labels for the title and axis. Data comes from the CIA World Factbook, loaded via `d3.csv`.

May 7, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates drawing basic geometric shapes—circles, rectangles, and a polyline path—using inline SVG elements and CSS for styling. It shows how SVG shapes can be grouped and transformed with translation and scaling, while CSS classes control stroke properties like color, width, line join, and line cap. A non-filled path is also rendered with a stroke, using styling rules from an external stylesheet.

May 7, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined to create a simple, static visualization. It draws circles and rectangles with various fill colors, and includes a group that applies both a fill and stroke. A separate group of lines and a path demonstrates stroke styling with rounded joins and caps. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, with CSS rules in styles.css controlling stroke properties, while inline attributes and nested `<g>` transforms handle layout.

May 7, 2019