Skip to main content
Log in
J

jcintolo

@jcintolo·6 public vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the current bounties of the Straw Hat Pirates from One Piece, with each pirate’s portrait replacing the traditional y-axis labels. The d3.csv function loads bounty data, while d3.scaleLinear and d3.scaleBand position the bars. Customized axes include a formatted x-axis using d3.format with a custom tick formatter, and a y-axis created via d3.axisLeft with the default text removed and images appended. The chart also includes axis titles and data labels, with bars rendered as SVG rectangles.

Jul 18, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the current bounties of the Straw Hat Pirates from One Piece, with each pirate’s portrait replacing the traditional y-axis labels. The d3.csv function loads bounty data, while d3.scaleLinear and d3.scaleBand position the bars. Customized axes include a formatted x-axis using d3.format with a custom tick formatter, and a y-axis created via d3.axisLeft with the default text removed and images appended. The chart also includes axis titles and data labels, with bars rendered as SVG rectangles.

Jul 18, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the in-universe bounties of Yonko and Worst Generation pirates from *One Piece*, with values formatted in billions using `d3.format`. It demonstrates custom axis styling by removing default domain lines, adding rotated axis titles, and applying tick marks with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from a CSV file and rendered as SVG rectangles using `d3.scaleLinear` and `d3.scaleBand`.

Jul 17, 2020
Loading thumbnail…

Making a bar chart

This bar chart displays the current bounties of the Straw Hat Pirates from the One Piece manga, with each pirate’s bounty represented as a horizontal bar. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with axes rendered via d3.axisLeft and d3.axisBottom. Data is loaded from a CSV file using d3.csv, and all elements are drawn as SVG rectangles in steelblue.

Jul 17, 2020
Loading thumbnail…

Let's make a face with D3.js!

A D3.js example assembles a smiling face from primitive SVG shapes: a yellow head circle, two eye circles, rectangular eyebrows, and a mouth formed by an annulus arc path. The scene is vertically centered using a group translation, and the right eyebrow demonstrates the library's chained transition API by animating its vertical position in two sequential 2-second movements. The code imports `select` and `arc` from D3 v5 and applies SVG attributes directly within a React-based build.

Jul 17, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example creates a simple cartoon face out of SVG shapes. Three circles—two small ones for eyes and a larger one for the face—are drawn on a grey background. The face is rendered using D3.js version 5’s selection and styling methods, with the `d3.select` API applying a background color to the SVG element. The code relies on standard SVG circle elements with fill and stroke attributes to construct the visual.

Jul 16, 2020