This Line Chart shows the same data as the Stacked Bar Chart, but uses dots to mark the data points and lines to connect them. The toggle switch (created in MUI) swaps between a simple Line Chart and an Area Chart. Both data visualizations use almost the same D3.js code.
Area Charts work better as data visualizations when there are single data-sets: they help users see the total value represented by the data points more clearly, because this is proportional to the size of the shaded area. However, when there are multiple data points, the shaded areas can be confusing, because one area may obscure the areas behind it. D3.js allows total control over this: for example, we can reduce the opacity of some or all of the areas, or even reduce the opacity of those areas which overlap the ones below. Area charts can also be confusing when they show negative values, although D3.js provides ways of getting aroudn this problem, such as using different colours for positive and negative values.
As in the Bar Chart example, it’s possible to use UI controls to focus on a particular data set within the data visualization, and link this to the D3.js code. However, in this case, check boxes are used rather than radio buttons. With radio buttons you have to select just one option; however, with check boxes each box can be selected or deselected independently of the others. With this UI, therefore, it’s possible to select any permutation of data sets: for example, any single organ, any two organs or all three organs. Coding for this is a bit more complex, especially when there are more than a small number of data points.
D3.js also allows us to select the curve used to connect the data. Typically, we would choose the most suitable curve for the data visualization and hard-code this. However, to illustrate what's possible, we have added a set of radio buttons so users can choose their own. Some curves, such as Catmull-Rom, pass through all the data points, whereas others, such as Curve Basis, don’t. The upside of not passing through all data points is that it’s possible to show trends in data very well. Conversely, the Catmull-Rom curve includes all the actual data points, but includes overshoots and undershoots, which make it harder to see trends.
The cost of a D3.js Line Chart or Area Chart depends greatly on the extent to which it needs to be custom coded. Add-ons such as tool-tips, custom animations and so on will add a bit to the cost but greatly enhance the user experience. The Prices page will give you a general idea. The Prices page will give you a general idea. However, please contact us for a free discussion with a developer to work out what’s best for you.