Html: Histogram

A histogram is a widespread visual way of presenting data. It can be used for admin dashboards or reports. In this challenge, you will create your own version of a histogram.

A histogram looks like a table from a markup point of view. This is an important point - if the styles are not loaded, all the information will be displayed as a table and therefore it will remain readable. This behavior would be nearly impossible to implement with other structures.

Histogram heading

Use the table heading as the heading of the histogram. Inside it, place three tabular headings containing the names of the literature genres:

• Classical
• Fiction
• Novels

Heading structure:

<thead class="histogram-header">
  <tr>
    <th>Genres:</th>
    <th class="px-20 histogram-header-[color]">[genre]</th>
  </tr>
</thead>

The [color] is the color of the genre, and [genre] is the name. The .px-20 class is already available in the app.css file, so you don't need to define it.

In this challenge we use the three main colors for a histogram:

• Red
• Blue
• Green

Each color is already present in the app.css file as a variable. Use them to create a flexible color scheme structure.

.histogram-red {
  background-color: var(--red);
}

To the left of each genre, draw a square with a side of 10 pixels. Place it 5 pixels to the right of the left edge of the title. Do this for proper positioning relative to the <th> padding. To align the square vertically you can use the following template:

top: 50%;
transform: translateY(-50%);

Place the headings in the center of the entire histogram. Note that the whole challenge is based on Flexbox. Do not be misled by a tabular layout. As mentioned above, this is done for accessibility.

Columns

• Top indent from tbody: 50px

Columns are implemented as follows:

<tr class="histogram-row">
  <td class="histogram-name">[year]</td>
  <td class="histogram-col">
    <span [value] class="w-50px histogram-[color]"></span>
    <p>[value description]</p>
  </td>
</tr>

where:

• [year] is a year
• [value] is a data-attribute containing column height
• [color] is a column color
• [value description] is a column text description

Each .histogram-row contains all the values that refer to the current year.

Place the elements of the container .histogram-row according to the template using flexbox and taking into account the following points:

• The minimum row height: 400 pixels
• Horizontal paddings: 50 pixels

Year that indicates the period of book sales has absolute positioning. The element is located 5 pixels above the highest column. To achieve the required value pay attention to the columns' paddings, .histogram-col.

Place the elements inside the container .histogram-col according to the template and the following points:

• Container paddings: 10 pixels on each side
• Use percentages to determine the height of the column. In HTML, use the data attribute in which you will store the value and, using the selector on the attribute, set the desired height. These values are equal to the number of books sold excluding thousands. For example, 40k = 40% height

Histogram data

2018

• Classical: 40k
• Fiction: 80k
• Novels: 75k

2019

• Classical: 35k
• Fiction: 63k
• Novels: 50k

2020

• Classical: 90k
• Fiction: 77k
• Novels: 80k

Tips

• You have to work with relative and absolute positioning
• For convenience, use the attribute selector where needed