ポジショニングマップを HTML で表示する【Python】

Python で HTML のポジショニングマップを生成するサンプルコードです。JavaScript は使用せず、ローカル PC のブラウザで動作します。
以下の環境で動作確認をしています。
環境： Windows 10、Python 3.x、Micorosft Edge

背景

Python で各種チャートを HTML で表示できるようにするスクリプトをまとめています。すでに、棒グラフ、ドーナツグラフの表示はできるようになりました。
マーケティング分析でよく使われるポジショニングマップについても、自動生成できるようまとめておきます。

JavaScript やネット上のサイトに強く依存するツールやグラフを作り込んでしまうと、複雑度が上がり、ブラウザやデバイスに依存する問題が生じやすくなります。（というよりは、OS、ブラウザ、各ツール類の更新頻度が高く、実際に問題が多発しています。）

そこで、静的なデータ出力のみで完了し、JavaScript やネットワーク環境に強く依存しない Python のプログラムを作成して公開しておきます。
チャートは汎用な画像データで出力されます。チャートがうまくできたら、画像データのみを WordPress などサーバー上の任意のサイトにアップすれば簡単に流用できるよう意図しています。（マップを手書きで作るよりは、洗練されたチャートがすぐに生成できるようになるかなと。。）

設定方法

①　PC 上でフォルダを作成してください。
例： “C:/user”
②　①のフォルダ内に html_positioning_chart1.py の名前でテキストを作成し、下記のサンプルコードを貼りつけて保存してください。

使い方

③　コマンドプロンプトを起動し、②のスクリプトを実行してください。
→　①のフォルダ内に画像データと HTML ファイルが生成されます。
④　③で生成された HTML ファイルをダブルクリックしてブラウザで表示してみてください。
うまく動いたら、②のデータを修正して活用してください。

まとめ

ポジショニングマップを Python で生成する方法についてまとめました。
これで、マーケティング分析なども可能になります。

他にもチャート類を生成する方法を、関連リンクにまとめています。もし、データ分析などに関心があるようでしたら、参考にしてみてください。

サンプルコード

import matplotlib.pyplot as plt1 
import numpy as np1 
import os 

def write1( file1, str1 ): 
    with open( file1, 'w', encoding='utf-8' ) as f1: 
        f1.write( str1 ) 
    return 0 

def generate_html1( title0 ): 
    str1 = ''' 
<html lang="ja">
<head>
<style type="text/css">
</style>
</head>
<body>
{title1} 
<img src="bubble01.png" width="700" ><br>
</body> 
</html> 
'''.format( title1 = title0 ) 
    return str1 

def set_params1(): 
    plt1.rcParams['figure.figsize'] = (10, 8) 
    plt1.rcParams['font.family'] = "Meiryo" 
    plt1.rcParams['font.size'] = 16 
    fig1, ax1 = plt1.subplots() 
    return ax1 

def set_axes1( ax1, title1, a2 ): 
    ax1.set_title( title1 ) 
    ax1.axes.xaxis.set_visible( False ) 
    ax1.axes.yaxis.set_visible( False ) 
    ax1.set_xlim( -1.2, 1.2 ) 
    ax1.set_ylim( -1.5, 1.5 ) 
    x4 = [ -1.00,  0.75, -0.09, -0.09 ] 
    y4 = [ -0.15, -0.15, -1.40,  1.30 ] 
    for i1 in range( 4 ): 
        ax1.annotate( a2[i1], xy=(x4[i1], y4[i1]), size=14, color='black' ) 

def draw_map1( x1, y1, r1, a1 ): 
    cm1 = plt1.get_cmap('Pastel1') 
    c1 = [] 
    for i1 in range( len(a1) ): 
        c1 = c1 + [cm1(i1)] 
    r2 = np1.array( r1 ) * 100 
    y1 = np1.array( y1 ) 
    sc1 = ax1.scatter( x1, y1, r2, c1, alpha = 1.0, linewidths = 1.0, edgecolors = '#aaaaaa' ) 
    x5 =  0.05 
    y5 = -0.10 
    for i1 in range( len(x1) ): 
        ax1.annotate( a1[i1], xy=(x1[i1]+x5, y1[i1]+y5), size=14, color='black' ) 

def draw_axes1(): 
    x2 = [ 0.0, 0.0, 0.0, 0.0] 
    y2 = [ 0.0, 0.0, 0.0, 0.0] 
    x3 = [-1.1, 1.1, 0.0, 0.0] 
    y3 = [ 0.0, 0.0,-1.0, 1.0] 
    plt1.quiver( x2, x2, x3, y3, units='xy', width = 0.01, alpha=0.6, scale=1 ) 

ax1 = set_params1() 

title1 =  'ポジショニングマップ' 
a1 = ['デバイス', 'Webサービス', '低価格', '高価格'] 
set_axes1( ax1, title1, a1 ) 

a2 = ['Windows', 'Mac', 'Linux (rental server)', 'iPhone', 'Android', 'Linux (Raspberry Pi)' ] 
x1 = [ -0.70, -0.20,  0.50,  0.20, -0.10, -0.70 ] 
y1 = [  0.60,  0.90,  0.20,  0.40, -0.30, -0.80 ] 
r1 = [    90,    20,    10,    10,    10,    1  ] 
draw_map1( x1, y1, r1, a2 ) 
draw_axes1() 

# plt1.show()

path1 = os.path.dirname(__file__) + "/" 
file1 = path1 + "bubble01.png" 
plt1.savefig( file1 ) 

title1 = "" 
str1 = generate_html1( title1 ) 

file1 = path1 + "chart01.html" 
write1( file1, str1 )