Button to change input data in barplot - `.csv` version

This post describes how to build a button that changes the input dataset of a barplot. It is almost the same as this post, but using a .csv file as input. This example works with d3.js v4 and v6

Barplot section

Steps:

First of all, understand how to build a basic barplot.

Add 2 buttons in the html part. When you click the button, a function called update() is triggered.

Read this post for a basic version. Here it's just an adaptation for .csv input format.

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->


<!-- Add 2 buttons -->
<button >Variable 1</button>
<button >Variable 2</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->


<!-- Add 2 buttons -->
<button >Variable 1</button>
<button >Variable 2</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

Related blocks →

Simple bar graph in v4 - link

Let's make a bar chart - link