Charts

HorizontalBar Chart-II

In the last chapter we made horizontal Bar charts with axis. Today we will start by building a Bar chart with more than three data points.

We have a data set which has a type of fruit,total number of fruits and how many good ones out of the total.

const fruits = [
    { name: "🍊", count: 21, good: 12 },
    { name: "🍇", count: 13, good: 10 },
    { name: "🍏", count: 8, good: 5 },
    { name: "🍌", count: 5, good: 3 },
    { name: "🍐", count: 3, good: 1 },
    { name: "🍋", count: 2, good: 2 },
    { name: "🍎", count: 1, good: 1 },
    { name: "🍉", count: 1, good: 0 }
]

So like the previous charts we can have one non continous scale and two linear scales. The name can be the band scale, count and good can be projected in linear scale.

As per my assumption, Since D3 and react gives a lot of freedom on svg manipulation so my idea will be to make two rectangle and project one top of another. So first create the same horizontal Bar from previous tutorial and then add good rectangle on top of count rectangle.

Fruit Counts →Fruits02468101214161820🍊🍇🍏🍌🍐🍋🍎🍉21Good Items:12 Total Items:212113Good Items:10 Total Items:13138Good Items:5 Total Items:885Good Items:3 Total Items:553Good Items:1 Total Items:332Good Items:2 Total Items:221Good Items:1 Total Items:111Good Items:0 Total Items:11

I doubt this is the best way of representing three data points on a chart. The Next thing is to add legend to tell about what the color means.

Unspoiled ItemFruit Counts →Fruits02468101214161820🍊🍇🍏🍌🍐🍋🍎🍉Good Items:12 Total Items:21Good Items:12 Total Items:2121Good Items:10 Total Items:13Good Items:10 Total Items:1313Good Items:5 Total Items:8Good Items:5 Total Items:88Good Items:3 Total Items:5Good Items:3 Total Items:55Good Items:1 Total Items:3Good Items:1 Total Items:33Good Items:2 Total Items:2Good Items:2 Total Items:22Good Items:1 Total Items:1Good Items:1 Total Items:11Good Items:0 Total Items:1Good Items:0 Total Items:11

To add the legend I simply add a rectangle in the bottom right quadrant since I had the space there. I don't think the bar chart does a justice to the data though.