Tag: CSS

Shorter, Coltrane, Gordon Networks deployed

After a weekend trying multiple approaches at incorporating images of jazz musicians as backgrounds to their network graphs, I finally hit on a good solution – create icon-like images that display in the upper left corner of the graph background. This allows the network to be easily viewed on multiple devices ranging from phones to widescreen monitors, without interfering with any of the network elements.

Here’s the solution, as shown for the Dexter Gordon network:

Dexter Gordon musical network

Nice and tidy, with an icon-like image created in Powerpoint; the outer circle around the image is colored to match the artist node at the center of the graph for a consistent visual appearance. Even when the sidebar is shown and the graph is zoomed in, this approach works well:

Dexter Gordon musical network zoomed

Note that the musician image is combined with the background color and the circle shape in Powerpoint, and is then saved as a picture we can use in our CSS file for the network. Here’s a look at the styling elements for this graph:

#carte {    
    position: absolute;  
    background-image: url('../img/Gordon_20230306.png');
    background-repeat: no-repeat;
    background-size: cover;
    left: 0px;
    width: 100%;
    height: 100%;

We ensure that the background image is set to cover the entire screen by using the background-size attribute and setting it to ‘cover’. This enables the background to adjust to larger screen sizes seamlessly – no awkward edges to be seen!

From my perspective, this approach solves two issues in a very nice way:

  • First, it provides a consistent look & feel to the networks, regardless of which artist we select
  • Second, it is very production-friendly; I can use the same background and circle while adding in a new artist picture. This provides a very efficient solution for creating future graph networks

I’ll be adding more permanent links to all of these networks, but for now, here are the initial three:




Thats’ it for now – have fun with the networks and thanks for reading!

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: