Ahmed Bouhamra

@upbeatcode·2 public vizzes

Customizing Axes

This bar chart visualizes the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates custom axis styling, showing how tick labels, lines, and axis titles can be formatted with distinct fonts and colors. The code uses D3 v5 with `select`, `csv`, and `scaleLinear` to load data from a CSV file and render SVG rectangles. A bar height of 440 pixels and width of 220 pixels are set per bar, with population values mapped to the y-axis.

Aug 5, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a blank SVG canvas that is styled and manipulated entirely through CSS, with the HTML structure defined in `index.html` and the visual presentation in `styles.css`. The code imports the D3 library via `myNewFile.js` using `import d3 from 'd3'`, though no explicit D3 functions are called in the visible files. It serves as a minimal, foundational template for building custom SVG-based visualizations, showcasing how to set up the rendering environment with a dedicated SVG element and linked stylesheet.

Aug 4, 2019