Charts

If your business is data visualization, then you need to make great charts. Even simple charts are important and, when embedded in a web page, they can be enhanced with interactivity.

A bar chart

Each bar in the chart below corresponds to one of the 15 universities in the UNC System. The height of the bars indicate the student teacher ratio.

You can hover over or touch the bars to get more information. You can also use the radio button sort the bars alphabetically or by size of the bar.

Time series

The bar chart offers a single snapshot in time of student-teacher ratios. The time series chart below, though, illustrates how student-teacher ratios have evolved at each school over time. The thick dark blue line corresponds to UNC-Asheville. You can clearly see how the student teacher ratio has steadily been reduced from the highest in the system to the lowest over four decades.

You can hover your mouse or drag your finger over the chart to find out which line corresponds to which school.

Chord diagram

While simple charts are important, we can also custom build charts to pretty much any specification using D3. The chart below, for example, is an example of a chord diagram.

The prominent, bi-colored arcs on the edge of the circle are called the nodes of the diagram. Each node corresponds to a men's basketball team in the Big South conference during the 2022 season and the size of each node is a measure of the overall strength of the team in the conference.

Each ribbon from one node to another reflects the games played between the two teams. You can hover over the ribbons to information on those games. There's a lot of big, blue ribbons coming out of UNC-Asheville, since they won the conference that year.