Bar Charts

This Stacked Bar Chart is a data visualization created with D3.js and MUI. It shows the number of operations at a hospital in the US categorized by the organ affected. When the 'All Three' radio button is selected users can compare the total numbers of operations in each year, using the legend for reference. However, it’s harder to compare individual values from one year to the next, because the corresponding bars don’t line up. We have therefore added the option to select any one of the three organs by itself. This makes it much easier to focus on a single data set and compare values.

It's possible to create a variety of multi-data Bar Charts using D3.js: for example, instead of stacking the values on top of one another, they can be side-by-side. This makes it easier to compare values within the same data set but makes it harder to compare the total values.

Variable-width bar charts, sometimes called variwide bar charts, are bar charts having bars with non-uniform widths. For example, we could show the GDP of different countries by using the height of the bars to represent the per-capita GDP and the width of the bar to represent the population. The area would then represent the total GDP.

The chart also incorporates a data grid for easy data entry. Data for D3.js data visualizations can be in a local JSON or CSV file. However, if it changes frequently, or has to be updated by untrained staff, a data grid is more convienent. This works much like an Excel spreadsheet, with rows and columns for the data. The data is typically linked to an external database which we can set up for you: an additional benefit of this is that your data can easily be backed up safely. See Add Ons for more details and Prices for information about costs.

The cost of a Bar Chart depends greatly on the extent to which the data visualization can be created directly in D3.js or has 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. However, please contact us for a free discussion with a developer to work out what’s best for you.