21
3 029

32:00

11 Creating Pie Charts in D3

30:43

10 Creating Bar Charts in D3

28:38

09 Drawing a Multi-Line Chart in D3

16:32

08 Drawing a single line in D3

20:35

07 Creating Axes in D3

14:09

13 Creating Stacked Bar Charts with D3

Creating stacked bar charts in D3. This is the most complex chart we've looked at yet. Buckle up.
*Chapters*
00:00 Wide vs Narrow Data
02:27 The D3 stacked data object
09:22 Drawing the chart
21:00 Drawing a legend
27:25 Adding a tooltip
32:30 Examining the *this* object
*Links*
Maps: www.builder.io/blog/maps
D3 Stacks: d3js.org/d3-shape/stack
Stacked Bar Chart from narrow data: observablehq.com/@d3/stacked-bar-chart/2
D3 Join: d3js.org/d3-selection/joining, bost.ocks.org/mike/join/
Population by Continent: www2.census.gov/library/publications/2010/compendia/statab/130ed/tables/11s1329.pdf
An open letter to Mike Bostock: anthony-munnelly.com/blog/open_letter_mike_bostock/
D3 download: d3js.org/getting-started
Github link: github.com/amunnelly/d3-tutorial

มุมมอง: 8

วีดีโอ

32:00

12 Creating Heat Maps in D3

มุมมอง 25วันที่ผ่านมา

Heat maps are the most expressive of all data visualisations. Learn how to make them in D3. Chapters 00:00 Heat maps 04:20 Setting up comments to remember all the elements that need to be created 09:21 Creating the scales 12:12 The heat map itself 17:42 Adding the labels - and discovering a peculiar problem 22:42 Working on the labels to make them readable Links D3 Chromatic Color Scales: d3js....

30:43

11 Creating Pie Charts in D3

มุมมอง 2414 วันที่ผ่านมา

Here we go through the process of creating pie charts in D3, with digressions along the way about the value of pie charts, a marvellous color feature unique to D3, animation and creating meters. Listening back to this, I notice that I often say "bar chart" where I meant to say "pie chart". I have no idea why this is. It might be Stockholm Syndrome. It might be incipient dementia. Or I might be ...

28:38

10 Creating Bar Charts in D3

มุมมอง 3921 วันที่ผ่านมา

Creating bar charts in D3, and dressing them up with tooltips, gridlines and sort orders. *Chapters* 00:00 Correcting the margin error 01:00 The EU population dataset 02:45 Scales 07:45 Trouble-shooting the peculiar nature of the y-scale 13:00 Fixing the x-axis labels 15:30 Title vs Tooltip 20:15 Sorting the data 21:40 A warning against coloring by value 23:55 Creating grid lines *Links* An ope...

16:32

09 Drawing a Multi-Line Chart in D3

มุมมอง 6621 วันที่ผ่านมา

Grouping the data by a category and then drawing lines for each of those categories. 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 Grouping in ...

20:35

08 Drawing a single line in D3

มุมมอง 39หลายเดือนก่อน

Drawing a line. Straightforward, in a slightly complex sort of way. 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 The Seattle Weather dataset 0...

14:09

07 Creating Axes in D3

มุมมอง 25หลายเดือนก่อน

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 plo...

16:24

06 Creating tooltips in D3

มุมมอง 36หลายเดือนก่อน

The ability to use tooltips is the transcendent moment for online data visualisation. Everything prior to this could be visualised on paper. For a tooltip, you must spark up the machines. 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 ...

9:55

05 Creating a scatter plot in D3

มุมมอง 33หลายเดือนก่อน

We're finally able to visualise the iris dataset. 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 The story so far - dimensions, canvases, plots,...

03 Creating Canvas and Plot Objects in D3

5:19

03 Creating Canvas and Plot Objects in D3

มุมมอง 39หลายเดือนก่อน

Creating canvas and plot objects in D3 (this is one of the more straight-forward tutorials). 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. *Links* An open lette...

11:52

04 Creating Scales in D3

มุมมอง 64หลายเดือนก่อน

Here we're going to look at the two most common of D3's scaling methods, linear scaling and ordinal scaling. We'll also not the odd quirk of D3 measuring height from the top down rather than the bottom up, and the adjustment we have to make for that. _Nota bene_: There's an error at 6:22. The plot_height variable is equal to width minus margin.top minus margin.bottom, not the left and right mar...

9:32

02 Loading Data in D3

มุมมอง 81หลายเดือนก่อน

Making sure we can correctly load the data from local storage to the browser, and making sure it's correctly typed (dates are dates, numbers are numbers) when it gets there. *NB:* I left out a line at the end of the first video. As well as using `style.css` to set the font, we also use it to add a left-hand side margin, so the plot isn't as tight to the left-hand side of the screen as it would ...

13:58

01 Introduction to D3

มุมมอง 89หลายเดือนก่อน

Welcome to a series of videos on how to create charts in the D3 javascript library, version 7 (version numbering is horribly important in D3). Each tutorial is as atomic as I can make it, stepping through each step as granularly as is reasonable. But stay patient please - D3 is difficult, frustrating and has a steep learning curve, but what makes it worthwhile is that D3 is the very best intera...

9:57

Selections in Python Altair

มุมมอง 229ปีที่แล้ว

The selection methods in Python's altair allow data highlighting across different subplots, using legends to turn data on and off, and more. The full notebook: anthony-munnelly.com/tutorials/altair-08/

Labelling Line Charts in Python's Altair Package

13:42

Labelling Line Charts in Python's Altair Package

มุมมอง 472ปีที่แล้ว

Creating text labels on Altair charts is very straight-forward, except where it isn’t. Here's how to replace the legend with labels next to the data lines themselves. Two Points of Note: 1. I mentioned the .mark_text() documentation in the tutorial. This is the link: altair-viz.github.io/gallery/bar_chart_with_labels.html 2. At about 11:30, I got confused about why the label for the Nuclear Ene...