Mohtasim Tamjeed

@mohtasimtamjeed·4 public vizzes

Bar Chart with Beautified Axes

This example shows a horizontal bar chart of population figures for the ten most populous countries, sorted by value with a linear x-axis and banded y-axis. The code uses D3 v5’s `csv` loader to parse the data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft`/`axisBottom` for tick marks. Axis labels are formatted with `format(".2s")` to abbreviate large numbers, and the SVG is rendered directly with appended `rect` elements.

Sep 28, 2018

Loading thumbnail…

Basic Bar Chart

This basic bar chart displays the population of ten countries, using horizontal bars ranked by country name. The visualization draws population values from a local CSV file, scaling them by a factor of one thousand. Built with D3 v5, it uses `scaleLinear` and `scaleBand` for positioning, while `axisLeft` and `axisBottom` generate the axes. The SVG rendering applies a steelblue fill to all rectangles, and the chart is sized at 960 by 500 pixels with defined margins.

Sep 14, 2018

Loading thumbnail…

A Face with D3

A face rendered in yellow with black outlines uses D3.js v5 to draw its features as SVG shapes. The code builds the face from a circle, two eyes, and an arc-based mouth using the `arc()` generator, then animates the eyebrows with chained `transition()` calls that move a group containing two rectangles. The visualization demonstrates geometric composition and simple animation through D3's selection and transition APIs.

Sep 10, 2018

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles and rectangles—rendered with SVG elements, styled through CSS classes and inline fill attributes. It shows how colors, stroke widths, and transformations like scaling and translation apply to primitive shapes, including a polyline path composed of connected line segments. The visualization uses static SVG markup within an HTML file, with styling defined in an external stylesheet, such as the `.lines` class applying stroke properties to the path and line elements.

Sep 10, 2018