Interaktives radiales Diagramm mit JavaScript und SVG

Interaktives radiales Diagramm

10. Juni 2019 von Peter Tellenbach

Wie das Diagramm zustande kam ist beschriben unter radialer Chart mit Python. Hier geht es vor allem um den interaktiven Teil mit JavaScript.

Bedienung

Klicken Sie auf den Namen eines Landes um die entsprechende Linie hervorzuheben. Ein Klick auf den Chart setzt das Highlight wieder zurück.

Afghanistan
Albania
Algeria
Andorra
Angola
Antigua and Barbuda
Argentina
Armenia
Aruba
Australia
Austria
Azerbaijan
Bahamas, The
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bermuda
Bhutan
Bolivia
Bosnia and Herzegovina
Botswana
Brazil
British Virgin Islands
Brunei Darussalam
Bulgaria
Burkina Faso
Burundi
Cabo Verde
Cambodia
Cameroon
Canada
Cayman Islands
Central African Republic
Chad
Chile
China
Colombia
Comoros
Congo, Dem. Rep.
Congo, Rep.
Costa Rica
Cote d'Ivoire
Croatia
Cuba
Curacao
Cyprus
Czech Republic
Denmark
Djibouti
Dominica
Dominican Republic
Ecuador
Egypt, Arab Rep.
El Salvador
Equatorial Guinea
Eritrea
Estonia
Eswatini
Ethiopia
Faroe Islands
Fiji
Finland
France
French Polynesia
Gabon
Gambia, The
Georgia
Germany
Ghana
Gibraltar
Greece
Greenland
Grenada
Guam
Guatemala
Guinea
Guinea-Bissau
Guyana
Haiti
Honduras
Hong Kong SAR, China
Hungary
Iceland
India
Indonesia
Iran, Islamic Rep.
Iraq
Ireland
Israel
Italy
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
Korea, Dem. People's Rep.
Korea, Rep.
Kuwait
Kyrgyz Republic
Lao PDR
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Macao SAR, China
Macedonia, FYR
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Mauritania
Mauritius
Mexico
Micronesia, Fed. Sts.
Moldova
Monaco
Mongolia
Montenegro
Morocco
Mozambique
Myanmar
Namibia
Nauru
Nepal
Netherlands
New Caledonia
New Zealand
Nicaragua
Niger
Nigeria
Norway
Oman
Pakistan
Palau
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Poland
Portugal
Puerto Rico
Qatar
Romania
Russian Federation
Rwanda
Samoa
San Marino
Sao Tome and Principe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Slovak Republic
Slovenia
Solomon Islands
Somalia
South Africa
South Sudan
Spain
Sri Lanka
St. Kitts and Nevis
St. Lucia
St. Vincent and the Grenadines
Sudan
Suriname
Sweden
Switzerland
Syrian Arab Republic
Tajikistan
Tanzania
Thailand
Timor-Leste
Togo
Tonga
Trinidad and Tobago
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United Kingdom
United States
Uruguay
Uzbekistan
Vanuatu
Venezuela, RB
Vietnam
Virgin Islands (U.S.)
West Bank and Gaza
Yemen, Rep.
Zambia
Zimbabwe

Das JavaScript zu diesem Diagramm

Der Code ist wirklich sehr kurz. Er besteht nur aus zwei Funktionen:

toggle behandelt die Klicks auf einen Ländernamen
reset setzt die Auswahl wieder zürück

function toggle( event )
{
   var id = event.target.attributes["data-id"].nodeValue ;

   var groups = document.querySelectorAll( "g" )

   for( var i = 0; i < groups.length; i++ )
   {
           if( groups[i].id == id )
              groups[i].removeAttribute( "opacity" ) ;
            else
              groups[i].setAttribute( "opacity", "0.2" ) ;
   }

   var legend = "" ;
   var py     = 30 ;
   var titles = document.querySelector(`#${id}`).querySelectorAll( "circle title") ;

   for( var title of titles )
   {
      legend += `<tspan x="-42" y="${py}">${title.textContent}</tspan>` ;
      py     += 4 ;
   }

   document.querySelector( "text" ).innerHTML = legend ;
}

function reset( )
{
  var groups = document.querySelectorAll( "g" )

  for( var i = 0; i < groups.length; i++ )
  {
       groups[i].removeAttribute( "opacity" ) ;
  }

  document.querySelector( "text" ).innerHTML = "" ;
}

Das Python-Programm

Das Programm wurde gegenüber der letzten Version leicht erweitert, vor allem um die Länderliste zu erstellen. Weiter kamen die Event-Handler und das text-Element für die Legende dazu.

# Import the necessary modules
import pandas as pd
import math

# Define the colors, the radius of the inner circle and the aspect factor
COLORS = ["","","#136169","#269269","#34A65C","#F8B620","#F24263","#FC719E","#F571B5","#E571B5","#CA69BE","#B56CC0"]
CIRCLE = 20
FACTOR = 0.7

# Generates a group of lines and circles for a country
def generate_group( row, angle ):
    sin = math.sin( angle )
    cos = math.cos( angle )
    x1  = CIRCLE * sin
    y1  = CIRCLE * cos * FACTOR

    # The table index is used as an id
    print( "<g id=\"G{}\">".format(row[0]) )

    # Add the lines to the group
    for i in range(2,12):
        if not math.isnan(row[i]):
            title = "{} {} {:.1f}".format( row[1], sorted.columns[i-1], row[i] )
            l     = (row[i] / 100 * (100 - CIRCLE) + CIRCLE)
            x2    = l * sin
            y2    = l * cos * FACTOR
            print( " <line x1=\"{}\" y1=\"{}\" x2=\"{}\"  y2=\"{}\" stroke=\"{}\" stroke-width=\"0.3\">".format(x1,y1,x2,y2,COLORS[i]) )
            print( "  <title>{}</title>".format(title) )
            print( " </line>" )
            x1 = x2
            y1 = y2

    # Add the circles to the group
    for i in range(2,12):
        if not math.isnan(row[i]):
            title = "{} {} {:.1f}".format( row[1], sorted.columns[i-1], row[i] )
            l     = (row[i] / 100 * (100 - CIRCLE) + CIRCLE)
            cx    = l * sin
            cy    = l * cos * FACTOR
            print( " <circle cx=\"{}\" cy=\"{}\" r=\"0.6\" fill=\"{}\">".format(cx,cy,COLORS[i]) )
            print( "  <title>{}</title>".format(title) )
            print( " </circle>" )

    print( "</g>" )

# Read the data file
data        = pd.read_csv( "visa.csv" )

# Add a column with the maximum of the row and sort the rows
series      = data.max( axis=1 )
series.name = "max"
sorted      = data.join( series ).sort_values( by = "max" )

# Prepare the loop
angle       = 0
delta       = 2 * math.pi / len( sorted.index )

# Print the SVG element
print( "<svg viewBox=\"-50 -50 140 125\" xmlns=\"http://www.w3.org/2000/svg\" onclick=\"reset()\">" )
print( " <rect x=\"-50\" y=\"-50\" width=\"140\" height=\"125\" fill=\"black\"/>" )

# Add the group for each country
for row in sorted.itertuples():
    generate_group( row, angle )
    angle = angle - delta

print( "<text id=\"legend\"></text>" )
print( "</svg>" )

# Sort data frame by country name
sorted = sorted.sort_values( by = "Country Name" )

# Print list of country names with corresponding group id
print( "<div onclick=\"toggle(event)\">" )
print( " <ul>" )

for idx in sorted.index:
    print( "  <li data-id=\"G{}\">{}</li>".format(idx,sorted.loc[idx,"Country Name"]) )

print( " </ul>" )
print( "</div>" )

Feinarbeit

Diese HTML-Seite wurde von einem Tool erstellt und der Graph sowie das CSS in die Seite eingefügt. Ziemlich viel Zeit hat das CSS gekostet. Vor allem mit calc() habe ich lange gekämpft. vw kann man als Grundlage der Berechnung der Höhe eines Elements nutzen, width dagegen nicht...

Nachtrag

Nachdem alles sauber lief habe ich es auch auf einem Safari probiert. Das SVG hielt sich nicht an die Begrenzung vom Gridlayout und füllte das ganze div aus :-(

Mit einem zusätzlichen div wird die Seite jetzt auch auf einem Safari vernünftig dargestellt.

<<>>

Blog der Heimetli Software AG