データ可視化：個別 on データの道具箱

データ可視化：個別 on データの道具箱 https://tools.data-viz-lectures.com/categories/data-visualization-parts/ Recent content in データ可視化：個別 on データの道具箱 Hugo -- gohugo.io ja Data Viz Lectures Tools イージング関数チートシート https://tools.data-viz-lectures.com/easings/ Mon, 01 Jan 0001 00:00:00 +0000 https://tools.data-viz-lectures.com/easings/ <img src="https://tools.data-viz-lectures.com/easings/images/cover_easings.png" alt="Featured image of post イージング関数チートシート" /><div class="external-link-card"> <a class="external-link-card__inner" href="https://easings.dataviz.jp/" target="_blank" rel="noopener noreferrer"> <div class="external-link-card__media"><img src="https://tools.data-viz-lectures.com/easings/images/cover_easings.png" alt="イージング関数チートシート" loading="lazy" decoding="async" /></div> <div class="external-link-card__body"><div class="external-link-card__site">dataviz.jp</div><div class="external-link-card__title">イージング関数チートシート</div><div class="external-link-card__description">時間の経過に伴うパラメーターの変化を可視化</div><div class="external-link-card__url">easings.dataviz.jp</div></div> <span class="external-link-card__icon" aria-hidden="true"> <svg viewBox="0 0 24 24" focusable="false"> <path d="M14 3h7v7m0-7L13 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 17H5V5h7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> </a> </div> <h2 id="どんなツールか">どんなツールか？ </h2><p>アニメーションやトランジションで値が時間とともにどのように変化するかを示す「イージング関数」の一覧・早見表サイトです。視覚的に様々なイージング（加速・減速・バウンスなど）の挙動を比較して選べます。イージング関数は、アニメーションに自然な動きを与えるための速度変化を定義します。</p> <h2 id="機能">機能 </h2><ul> <li>イージング関数一覧表示…多数のイージング関数（例：easeInSine、easeOutBounce など）を一覧で閲覧。 </li> <li>グラフによる視覚比較…それぞれの関数が時間（t）に対してどのように変化するかグラフで確認可能。 </li> <li>CSS やコード例の提示…それぞれの関数の使い方を CSS Transition / Animation やコードとして示す情報が含まれている場合あり。 </li> <li>リアルタイムプレビュー…選んだ関数の動きを視覚的に確認できる UI。 </li> </ul> <h2 id="使い方">使い方 </h2><ul> <li> <ol> <li>関数を選択…一覧から目的のイージング関数をクリックまたは選択します。 </li> </ol> </li> <li> <ol start="2"> <li>挙動を確認…選んだ関数のグラフやプレビューで値の変化の仕方を比較します。 </li> </ol> </li> <li> <ol start="3"> <li>プロジェクトへの適用…関数名／コードをコピーして、アニメーションライブラリや CSS の Timing Function などに貼り付けて使用します。 </li> </ol> </li> </ul> SVGグラデーションエディタ https://tools.data-viz-lectures.com/svg-gradient/ Mon, 01 Jan 0001 00:00:00 +0000 https://tools.data-viz-lectures.com/svg-gradient/ <img src="https://tools.data-viz-lectures.com/svg-gradient/images/cover-svg-gradient.png" alt="Featured image of post SVGグラデーションエディタ" /><div class="external-link-card"> <a class="external-link-card__inner" href="https://svg-gradient.dataviz.jp/" target="_blank" rel="noopener noreferrer"> <div class="external-link-card__media"><img src="https://tools.data-viz-lectures.com/svg-gradient/images/cover-svg-gradient.png" alt="SVGグラデーションエディタ" loading="lazy" decoding="async" /></div> <div class="external-link-card__body"><div class="external-link-card__site">dataviz.jp</div><div class="external-link-card__title">SVGグラデーションエディタ</div><div class="external-link-card__description">チャートのグラデーションをデザイン</div><div class="external-link-card__url">svg-gradient.dataviz.jp</div></div> <span class="external-link-card__icon" aria-hidden="true"> <svg viewBox="0 0 24 24" focusable="false"> <path d="M14 3h7v7m0-7L13 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 17H5V5h7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> </a> </div> <h2 id="どんなツールか">どんなツールか？ </h2><p>SVG（Scalable Vector Graphics）におけるグラデーション（色の滑らかな遷移）を視覚的に作成・調整できる Web ベースのツールです。チャートや図形の背景・塗りに使うカラーグラデーションをデザインする目的で利用できます。</p> <h2 id="機能">機能 </h2><ul> <li>グラデーションのデザイン…SVG で使う線形（linear）／放射状（radial）グラデーションを視覚的に編集可能。</li> <li>カラー・ストップ設定…グラデーションの途中での色（ストップ）や位置を追加・調整してカスタム配色を作成。</li> <li>リアルタイムプレビュー…編集結果を即座に確認し、仕上がりを見ながら調整。</li> <li>SVG 生成…完成したグラデーション定義をそのまま SVG コードとして出力（一般的な実装想定）。</li> </ul> <h2 id="使い方">使い方 </h2><ul> <li> <ol> <li>グラデーションを作成…色のストップや角度・位置を操作してグラデーションを設計。 </li> </ol> </li> <li> <ol start="2"> <li>プレビューで確認…設定したグラデーションがリアルタイムでどのように描画されるか確認。 </li> </ol> </li> <li> <ol start="3"> <li>生成された SVG を取得…最終的なグラデーション定義を SVG コードとしてコピー・保存してデザイン／可視化に組み込む。 </li> </ol> </li> </ul> SVGテクスチャエディタ https://tools.data-viz-lectures.com/svg-texture/ Mon, 01 Jan 0001 00:00:00 +0000 https://tools.data-viz-lectures.com/svg-texture/ <img src="https://tools.data-viz-lectures.com/svg-texture/images/cover-svg-texture.jpg" alt="Featured image of post SVGテクスチャエディタ" /><div class="external-link-card"> <a class="external-link-card__inner" href="https://svg-tectures.dataviz.jp/" target="_blank" rel="noopener noreferrer"> <div class="external-link-card__media"><img src="https://tools.data-viz-lectures.com/svg-texture/images/cover-svg-texture.jpg" alt="SVGテクスチャエディタ" loading="lazy" decoding="async" /></div> <div class="external-link-card__body"><div class="external-link-card__site">dataviz.jp</div><div class="external-link-card__title">SVGテクスチャエディタ</div><div class="external-link-card__description">チャートのテクスチャをデザイン</div><div class="external-link-card__url">svg-tectures.dataviz.jp</div></div> <span class="external-link-card__icon" aria-hidden="true"> <svg viewBox="0 0 24 24" focusable="false"> <path d="M14 3h7v7m0-7L13 11" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17 17H5V5h7" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </span> </a> </div> <h2 id="どんなツールか">どんなツールか？ </h2><p>SVG（Scalable Vector Graphics）で使うテクスチャパターンや質感をデザインする Webベースのエディタです。チャート・図形の背景や塗りに使う繰り返しパターン（テクスチャ）を視覚的に編集・作成し、SVG として利用できます。主にデータ可視化や図形デザインにおけるテクスチャ表現の設計支援を目的としたツールです。</p> <h2 id="機能">機能 </h2><ul> <li>テクスチャパターンの生成・編集…SVG に埋め込むための繰り返しパターン（ストライプ、ドット等）や質感パターンをユーザーが視覚的に作成・調整できます。</li> <li>プレビュー表示…編集内容をリアルタイムで確認しながらパターンの見た目を評価できます。</li> <li>SVG 出力…デザインしたテクスチャを SVG 形式のコードやパターン定義として取得できます（一般的な SVG テクスチャエディタの出力仕様）。</li> </ul> <h2 id="使い方">使い方 </h2><ul> <li> <ol> <li>テクスチャをデザイン…パターンの種類・間隔・方向・色などを設定してテクスチャを作成します（GUI 操作）。 </li> </ol> </li> <li> <ol start="2"> <li>リアルタイムプレビュー…編集したテクスチャの見た目をその場で確認します。 </li> </ol> </li> <li> <ol start="3"> <li>SVG として取得…仕上がったパターンを SVG XML（<pattern> 等）としてコピー／保存し、他の SVG 図形やチャートに適用します。 </li> </ol> </li> </ul>