データ & Python

データ & Pythonに分類されるWeb表現技法14件。conic円グラフ、スパークライン、Python素数の篩ビジュアライザ、Canvas棒グラフなど。ライブデモとコピーできるコード付き。

CSS conic-gradientだけで作るドーナツ円グラフ。回転マスクで出現させ、割合の内訳表示に最適です。

data属性の値からSVGの極小グラフを生成。前回比バッジ付きで、KPIカードやダッシュボードの省スペース指標に向きます。

Pythonでエラトステネスの篩を計算し、1〜150の格子上で素数を順次点灯アニメーション。アルゴリズム学習用の可視化デモ。

Canvas 2D APIで描く棒グラフ。高DPI対応・出現アニメ・ホバーで値ラベルを表示し、ダッシュボードの数値比較に使えます。

Catmull-Rom補間で滑らかにしたSVG折れ線と面グラデ。stroke-dashによる描画アニメで時系列データの推移を魅せます。

SVG円弧のstroke-dashoffsetと数値カウントアップを連動させた円形ゲージ。スコアやパフォーマンス指標の表示に使えます。

CSS Gridで組む貢献度カレンダー。日別の活動量を5段階の色で示し、コントリビューショングラフ風の活動量可視化に使えます。

SVGポリゴンで描く多角形レーダーチャート。2系列を重ねて中心から広がるアニメで表示し、スキルや評価の多軸比較に向きます。

Pyodideでブラウザ内にPythonランタイムを読み込み、入力した式や文をその場で評価・表示する対話シェル。print出力やエラー、入力履歴(↑↓)にも対応。

Python(math)でリサージュ曲線の座標列を計算し、canvasへネオン風にアニメーション描画。スライダーで周波数と位相をリアルタイム操作できる。

Python標準のstatisticsでランダム売上データを集計し、合計・平均・中央値・標準偏差をカード表示しつつバーチャート化。データ分析UIの雛形に使える。

Canvasで合成正弦波を毎フレーム描画するオシロスコープ風モニタ。グロー発光と一時停止操作で、信号やストリーミングデータの可視化に。

Pythonでピクセルごとにマンデルブロ集合を計算し、ImageDataとしてcanvasに着色描画。ボタンで見どころへズーム巡回でき、重い数値計算のブラウザ実行例になる。

入力した数式をPython側で許可関数に限定して安全評価し、f(x)の曲線をcanvasに即時描画。マウス追従でx・f(x)を読み取れる関数プロッタ。