Win

@winzawcool·4 public vizzes

Making A Bar Chart

This example shows the beginning of a bar chart using population data for ten countries, where each country is rendered as a square rectangle of fixed size rather than a proportionally scaled bar. The visualization is built with D3.js version 5, using `select`, `csv`, and `scaleLinear` from the D3 library, and renders directly to an SVG element. The code loads the data from `data.csv`, multiplies each population value by 1000, and appends `<rect>` elements to the SVG, though the chart remains incomplete as no scales or axes are yet applied.

Jun 14, 2020

Loading thumbnail…

Make a face with D3.js

A D3.js animation renders a simple smiling face from geometric SVG shapes: a yellow circle for the head, two eyes, two rectangular eyebrows, and a mouth drawn with the `d3.arc` path generator. The eyebrows animate vertically via chained `transition().duration()` calls, moving down 50 pixels and back, while the face remains centered using SVG group transforms. The code imports `select` and `arc` from D3 v5, and the visualization runs inside a React-free HTML page with an SVG canvas.

Jun 10, 2020

Loading thumbnail…

Make a face with D3.js

This example displays a red SVG canvas as a blank face template. The code uses the D3.js library to select the SVG element and apply a background color. The rendering approach is straightforward SVG manipulation, with the page structure defined in HTML and styled with CSS. The D3 selection API is used to target the SVG element and modify its style properties.

Jun 9, 2020

Loading thumbnail…

Shapes with SVG & CSS

This example demonstrates how to create and style basic geometric shapes using SVG elements within a React-based visualization. It shows circles, rectangles, lines, and paths arranged in groups, with CSS classes controlling stroke properties and colors. The code uses raw SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with transform attributes for scaling and translation. A linked stylesheet applies visual styling, including stroke width, line joins, and fill colors, while the SVG viewport is set to 960 by 500 pixels.

Jun 9, 2020