quiqdome

@quiqdome·2 public vizzes

Bar Chart Example

This example displays a bar chart of country populations, with each bar’s width fixed at 300 and height at 400 pixels. The chart is rendered as SVG elements using D3 v6, drawing rectangles via `svg.selectAll('rect').data(data).enter().append('rect')`. Population values are loaded from a CSV file using `d3.csv` and converted to numbers by multiplying by 1000. The current code only appends the rectangles without encoding data into visual attributes, leaving the bars uniform rather than proportional to population.

Feb 24, 2021

Loading thumbnail…

SVGs and CSS

This example shows a yellow smiley face constructed from basic SVG shapes, including a circular head, two eyes, and an arc-shaped mouth. It demonstrates the fundamental approach of using d3-selection from d3 v6 to append and style SVG elements with attributes. The code specifically uses `d3.select`, `.append`, and `.attr` to position shapes relative to the SVG's width and height, while the `arc` generator creates the mouth path. The rendering occurs in a React-free HTML page with CSS styling applied directly through SVG attributes like `fill` and `stroke`.

Feb 24, 2021