Jose Manuel Beas

@jmbeas·3 public vizzes

Customizing Axes

A horizontal bar chart displays the ten most populated countries, with populations in millions and a Spanish axis label. The chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and ticks, while a custom tick formatter converts values to abbreviated units. The y-axis gridlines extend across the plot via negative tick sizes, and axis domain lines are removed for a cleaner look, with data loaded from a CSV file.

Jan 19, 2020

Loading thumbnail…

Bar Chart Starter

This bar chart displays population counts for ten countries, ranging from China to Mexico. It uses D3 v5 with SVG rendering, importing specific modules like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the visualization. The `csv` function loads data from data.csv, which is then parsed and scaled. Horizontal bars are appended as SVG rect elements, with the y-axis listing country names and the x-axis representing population values.

Jan 19, 2020

Loading thumbnail…

D3 Starter

A cheerful robot face rendered in SVG demonstrates D3 transitions and shape primitives. The visualization draws a yellow circle for the head, blue eyes, brown rectangular eyebrows, and an arc-based smile using D3 arc generators. Eyebrow positions animate through chained `transition().duration(2000)` calls, moving down and back upward to create a blinking expression. The code imports `select` and `arc` from D3 v5, using SVG groups for coordinated transforms while the page loads `d3.v5.min.js` from the CDN.

Jan 19, 2020