rix007

@rix007·5 public vizzes

Customizing Axis

This example demonstrates how to customize axis formatting in a bar chart, showing male population figures for various countries. The horizontal axis uses a linear scale with tick labels formatted in scientific notation via `d3.format`. A band scale positions the categorical country labels vertically, with an axis generated by `d3.axisLeft`. The chart renders as SVG, drawing steel-blue rectangles scaled by population values from the CSV data. The code imports specific D3 v5 modules including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`.

Jun 27, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of male population totals for ten countries, sorted by descending value using a linear scale for bar width and a band scale for country positioning. The SVG renderer uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from `TotalPop.csv` and draw axes and rectangles. Bars are styled with steel blue fills, and margins are applied via a transformed group element.

Jun 25, 2020

Loading thumbnail…

Let's Make a face with D3.js

A simple smiling face drawn with D3.js version 5 animates its eyebrows. The visualization uses basic SVG shapes—circles for the face and eyes, rectangles for the brows, and an arc-generated path for the mouth—all positioned relative to a central group. The eyebrows perform a two-second upward and downward transition using chained `transition().duration()` calls. The code leverages D3’s `select`, `arc`, and selection methods to construct the graphic on a red background, with the entire figure centered in a 500×500 SVG canvas.

Jun 24, 2020

Loading thumbnail…

Let' make a face

A person's face is assembled from simple geometric shapes, including circles for the eyes, a nose, and a mouth. The visualization uses an empty SVG canvas and relies on D3 version 5, explicitly logging the D3 object to the console for inspection. The code sets up a minimal HTML page with linked CSS for styling, though it does not yet draw any data-driven elements. The example demonstrates a basic D3 setup with an unpopulated SVG, ready for further interactive or data-bound visual development.

Jun 24, 2020

Loading thumbnail…

ANKITA

This example demonstrates nested groups of colored circles and rectangles, overlaid with black and red path and line elements, all rendered as static SVG shapes. The visualization uses raw SVG primitives—`circle`, `rect`, `line`, and `path`—with explicit `fill` and `stroke` attributes, and applies scaling and translation transforms to position elements. Styling is handled via CSS classes for color and stroke properties, while the layout is a simple list with an inline SVG canvas. No dynamic data or interaction is present.

Jun 13, 2020