Lionelbarbagallo

@Lionelbarbagallo·3 public vizzes

Making a Bar Chart

This bar chart displays the percentage of completion for various road construction projects in Argentina, with project names on the x-axis and progress on the y-axis. The visualization uses D3 v5 to render an SVG, employing `scaleBand` for categorical spacing and `scaleLinear` for the value axis. Project labels are rotated and sized dynamically, with specific regions highlighted in red. The chart also features a custom percentage tick formatter, and the underlying data is loaded from a semicolon-delimited CSV file.

Jul 25, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the percentage completion of road construction projects in Argentina, using data from a semicolon-separated CSV file. The visualization encodes project names on the x-axis and their advancement percentage on the y-axis, with bars representing each project’s progress. Built with D3 v5, the code uses `d3.scaleBand` and `d3.scaleLinear` to position bars, `d3.axisLeft` with a custom percentage formatter, and `d3.dsv` to parse the data. The SVG rendering includes rotated axis labels and a simplified y-axis without domain lines.

Jul 18, 2020

Loading thumbnail…

Making a bar chart with D3.js

This example shows a horizontal bar chart of population per country, using data from WorldoMeter. The chart ranks countries from China to Japan by population, with each bar’s length scaled linearly. Built with D3 v5 and React, it renders SVG elements via `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Margins are applied to the SVG, and the bars are appended as `rect` elements with a steelblue fill.

Jul 15, 2020