ArsenalRobert

@ArsenalRobert·3 public vizzes

Let's make a face with D3.js

This example creates a simple face using D3.js, drawing a single circle centered within an SVG canvas. The circle’s radius is set to half the SVG’s height, and its horizontal position is centered using the width attribute. The code uses D3’s `select` function to target the SVG element and the `append` method to add the circle, leveraging D3 v5. The rendering approach is straightforward vector graphics via SVG, with the circle’s attributes set dynamically based on the SVG’s dimensions.

Mar 21, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—combined with CSS styling. The code uses raw SVG markup within an HTML page, with CSS rules in a separate stylesheet. Shapes are scaled, translated, and grouped using SVG transform attributes, while CSS classes control stroke and fill properties. The presentation shows how CSS can override SVG attributes, as seen in the `.lines` class applying stroke styles to paths.

Mar 21, 2020

Loading thumbnail…

Making a bar chart!

This bar chart displays the population of the top 10 most populous countries, scaled from raw CSV data. The visualization uses d3.csv to load the data, d3.scaleLinear for the x-axis population values, and d3.scaleBand for the categorical country names on the y-axis. Rectangles are appended to an SVG group, with axes generated via d3.axisLeft and d3.axisBottom. The chart is rendered entirely with SVG elements, and the styling comes from an external stylesheet.

Dec 27, 2019