TikiWayne

@TikiWayne·3 public vizzes

Bar chart

A bar chart displays population estimates for eleven countries, including China, India, and the United States, using horizontal bars ordered by country name. The chart uses D3 v5 with SVG rendering, loading data from a local CSV file. It employs `d3.scaleLinear` for the x-axis population scale, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` to generate the axes. Bars are appended as SVG rectangles with heights determined by the band scale’s bandwidth.

Aug 17, 2020

Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js to draw a simple cartoon face with SVG shapes. A yellow circle forms the head, with two smaller circles for eyes and rectangles for eyebrows, all positioned relative to the center of the SVG canvas. A mouth is created using the `d3.arc` helper to generate a curved path. The eyebrows animate with `transition.duration`, moving down and back up over two seconds, demonstrating basic SVG rendering and animation capabilities in D3 v5.

Aug 13, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles and rectangles—arranged in a grid, with styling and grouping applied through SVG attributes and CSS. The markup uses core SVG elements like `<circle>`, `<rect>`, and `<g>` with a `transform` to position a group, while some shapes receive explicit `fill` and `stroke` attributes. The accompanying `styles.css` sets page margins to zero and hides overflow, though no classes from the stylesheet are referenced in the markup. The visualization relies entirely on native SVG and CSS, with no JavaScript libraries.

Aug 11, 2020