Back to Browse

07 Creating Axes in D3

46 views
Nov 12, 2024
14:08

Creating and customising axes for our scatter chart. Ticks, axis labels, the works. I should point out that by "ticks", I mean the numbers along the axes, rather than the little lines. The little lines are called "tick lines", unsurprisingly, which "ticks" refers to the numbers. THERE ARE TWO TYPOS IN THE CODE: line 10: const plot_height = height - margin.top - margin.bottom; line 24: const plot = canvas.append('g').attr("transform", `translate(${margin.left}, ${margin.top})`); These don't actually matter until later in the series, but still. Embarrassing. _Chapters_ 00:00 Tweaking the tooltip layout 01:28 Creating the x- and y-axis 04:56 Customising the axes 07:23 Rotating the ticks 09:15 Axis labels *Links* An open letter to Mike Bostock: https://anthony-munnelly.com/blog/open_letter_mike_bostock/ D3 download: https://d3js.org/getting-started D3 axis documentation: https://d3js.org/d3-axis About the Iris Dataset: https://en.wikipedia.org/wiki/Iris_flower_data_set Github link: https://github.com/amunnelly/d3-tutorial/tree/main/code/07

Download

0 formats

No download links available.

07 Creating Axes in D3 | NatokHD