Tag: CSS

Graph Style Updates

In an effort to make all graphs stylistically consistent with the look & feel of this site, I have managed to change the base text for the graphs to the stylish Rokkitt font, as seen in the title of the image below. The Rokkitt font has a unique style that seems quite appropriate for jazz networks.

You may have also noticed the large bubble in the network graph, which represents the lens capability provided for scanning the graph. I have recently updated the lens settings to enable easier browsing of the network. You can activate the lens by clicking on the magnifying glass in the lower left of the screen. While the lens is great for browsing the graph, you may find it easier to make individual selections with the lens deactivated; simply click the icon a second time to toggle the lens to the off setting.

As a reminder, selecting any graph node will display all linked entities in the graph, as seen below. All links in the left panel are now also featuring the Rokkitt font.

These style modifications will be applied to all future jazz graphs, as I work to create informative, easy to use, stylish network graphs. Thanks for reading!

Visualizing Miles, Part 2

One of my favorite aspects of working with web projects is the ability to use CSS to customize a page. This is especially the case when working with sigma.js for the deployment of network graphs. CSS makes it easy to quickly test and change colors, modify elements, and experiment with different fonts. This is all important when I’m seeking a particular look and feel for a visualization. Which leads into this updated take on my recently created Miles Davis network graph, wherein the node colors, edge widths, and font sizes have all been modified, for the better, I believe.

In place of the nearly black background is a deep, rich blue, as well as new node colors and a more readable font color for the sidebar. Here are the before and after views:


And the updated look: