4. Charts

This page shows and compares two different ways to create a bar chart.

In the top chart we use D3 syntax to draw an HTML-based chart, i.e. a chart made up by vertical div elements.
In the bottom chart we use D3 to create some SVG elements, as seen in the previous example.

In the second scenario (SVG-based) we also add an "auto-adjusting" feature to the chart: by pressing the button below
you can change (randomly) the number of elements in the data array. The second chart will adjust the bars's width in order
to mantain the same total width, while the first chart will change the total size according to the array length.

Remark: remember that the x,y coordinates of a SVG shape (e.g. a rectangle) refer to the top-left corner of the object.
For this reason, when calculating the y and height of the bars, some basic "arithmetic" must be applied.

Show code