Making bar chart with D3.js

Creating a new notebook in observable environment:

In order to create a new notebook in Observable environment, click on Notebooks in the left menu of your dashboard:

Then click on New to create an empty new notebook that we will use it for creating our bar chart visualization:

A successful creating new notebook should bring you to an empty notebook environment similar to this one:

Uploading data file into the observable environment:

In order to upload a data file into the Observable environment click on Notebook actions and then File attachments:

Then finally click on Upload and choose the file that you want to use for visualization. The first dataset that will be used here for making bar chart is data-sc.csv the COVID-19 dataset across different counties of South Carolina:

After successful upload, you should see the data-sc.csv file in the uploaded file as:

Loading d3.js module into the observable environment:

Each code block within the notebook could be used to write and run a script. The first command is to load D3.js package and all its functionality into the Observable developing environment. In order to create a new code block, click on "Click to insert new cell" and then type this command to load D3.js package: "d3 = require("d3@5")":

In order to run each code block within a cell, you can click on triangle in the right side of each cell or just use Shift+Return to run the code block in the cell:

If the code block or cell runs successfully, you should the result of loading D3.js into the observable as an assignment of all the functionalities of D3.js as an object to "d3" variable.

Define attributes of bar chart:

There are several basic attributes related to the bar charts such as their colors, their size, and some margins to adjust the view of the chart. We define these attributes beforehand by using these commands:

We assigned the name of the color to color variable, the height of the bar chart to height variable, and finally the margins of top, right, bottom, and left to margin dictionary variable.

Loading data into a variable within observable:

In order to load the uploaded data into a variable, we need to use built-in csv parser available in D3.js package by using this command that load the csv file and automatically find its format: "data = d3.csvParse(await FileAttachment("data-sc.csv").text(), d3.autoType)":

Defining scales and axes for bar chart:

In order to properly display the bar chart, we need to define scales and axes. We need to define two different scales for x and y axes and eventually define x and y axes themselves. The x and y scales are defined by using these two commands (note that the number of COVID-19 cases in each county is accessed by data.Cases or d.Cases and the name of the county is accessed by using data.County and d.County):

Eventually, the x and y axes are defined by using these two commands:

Creating the final bar chart:

Now the final bar chart is defined and plotted by using this code block:

The created bar chart is shown below:

There are two things to notice here. You see that right now the bar chart is not interactive and you can't zoom on it and also the data is not sorted in the ascending or descending order. We will make it more interactive when we define zoom interactions and we will learn how to sort the data as well.

The final notebook of creating this bar chart is shared here: https://observablehq.com/@mehrdadyousefi/making-bar-chart