katrinrodkina

@katrinrodkina·3 public vizzes

Making a bar chart

Top 10 most populous countries are visualized as circles whose horizontal position encodes population count and vertical position encodes country, creating a bar chart with circular bars. The example uses D3 version 5 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render the SVG. Data loads from a CSV file containing country and population figures, which are multiplied by 1000. The visualization removes default axis domains and tick lines, and appends a title and axis label directly to the SVG group.

Oct 2, 2019

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population by country, using SVG rectangles to encode values. The chart arranges countries along a band scale (d3.scaleBand) and maps populations to a linear scale (d3.scaleLinear), with axes generated via d3.axisLeft and d3.axisBottom. Data is loaded from a CSV using d3.csv, and the code explicitly sets dimensions and margins. The visualization demonstrates reusable D3 v5 API patterns such as select, max, and scaleBand’s padding, with styling applied through CSS.

Oct 1, 2019

Loading thumbnail…

lets make a face

This example demonstrates a playful way to learn SVG basics by drawing a simple face. The code uses the D3.js library (version 5) to select the SVG element and apply a red background style via `d3.select` and `svg.style`. Although the SVG markup is initially empty, the accompanying YouTube video embedded in the README provides a tutorial on constructing facial features with SVG shapes. The rendering is done directly through SVG elements, and the page is styled with a minimal CSS reset.

Oct 1, 2019