https://data-illustrator.dataviz.jp/gallery/Recent content in ギャラリー onHugo -- gohugo.ioen-USTue, 06 Oct 2020 08:49:55 +0000https://data-illustrator.dataviz.jp/gallery/gdp-changes/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/gdp-changes/この視覚化は、2017年から2020年までの各四半期における米国実質国内総生産（GDP）の変化率（前期比）を示しています。データソース: 米国経済分析局 まず、長方形を描き、塗りつぶしの色を設定し、「Quarter」で繰り返し、さらに結果のコレクションを「Year」で繰り返します。 Your browser does not support the video tag. -- 次に、任意の長方形を選択し、その高さを「% Change」にバインドします。その後、軸の位置とスタイルをカスタマイズします。 Your browser does not support the video tag. --https://data-illustrator.dataviz.jp/gallery/nba-redraft/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/nba-redraft/このヒートマップは、各プレーヤーをVORP（Value over Replacement Player：代替選手に対する価値）で色付けしています。VORPは、BPMレートを、理論上の「代替選手」（最低年俸の選手やチームのローテーションに含まれない選手と定義される）が提供するものと比較して測定された、チームへの全体的な貢献度の推定値に変換したものです。十分なプレイ時間がなかったプレーヤーには、-20のVORPが使用されます。 The PuddingのRussell Goldenbergによる元の視覚化。 まず、薄い長方形を描き、データの各行で繰り返し、そのX位置を「Draft_Year」に、Y位置を「Draft_Pick」にバインドします。まず、軸ハンドルをドラッグしてXスケールを広げましょう。最初のドラフト指名が一番上に表示されるようにしたいので、Y軸を反転させる必要があります。これを行うには、軸ハンドルを開始点を超えてドラッグします。 Your browser does not support the video tag. -- 次に、「VORP」を使用して塗りつぶし色をエンコードします。VORP値には正と負の両方の数値が含まれるため、Data Illustrator はデフォルトで発散カラースケールを選択します。その後、背景色を黒に設定し、X軸の向きを上に変更します。最後に、軸と凡例の色を薄い灰色に変更して、暗い背景から目立つようにします。 Your browser does not support the video tag. --https://data-illustrator.dataviz.jp/gallery/olympic-medals/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/olympic-medals/この視覚化は、2012年夏季オリンピックの国内オリンピック委員会（NOC）別のメダル数を示しています。参加した204のNOCのうち、85が少なくとも1つのメダルを獲得しました。この視覚化では、上位20のNOCを示しています。 まず、長方形を描き、「Country_Code」で繰り返し、さらに「Medal_Type」で分割します。 Your browser does not support the video tag. -- 次に、任意の長方形を選択し、その幅を「Count」に、塗りつぶし色を「Medal_Type」にバインドします。その後、インタラクティブな凡例を使用してカラーマッピングをカスタマイズします。 Your browser does not support the video tag. -- 最後に、一番上のコレクションのグリッドレイアウトの水平方向の重力（gravity）を「right（右）」に変更して、バーを右揃えにします。X軸が自動的に反転することに注目してください。また、Y軸の向きを「right（右）」に変更し、軸パスを非表示にします。 Your browser does not support the video tag. --https://data-illustrator.dataviz.jp/gallery/planets/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/planets/このバブルプロットは、1626個の惑星と、そのうちのどれが居住可能かを示しています。温度は暑すぎず寒すぎない必要があります。質量も役割を果たします。小さな惑星は大気を持つことができず、大きな惑星は押しつぶされるような大気を持つでしょう。元の視覚化はJohn TomanioとXaquin G.V.（NGM STAFF）によるものです。ソース: アレシボにあるプエルトリコ大学のPlanetary Habitability LaboratoryのAbel Méndez。 まず、円を描き、データの各行で繰り返し、そのX位置を「hzd」（ハビタブルゾーン距離）に、Y位置を「mass」にバインドします。質量の大きい惑星を下に表示したいので、Y軸を反転させる必要があります。これを行うには、軸ハンドルを開始点を超えてドラッグします。また、質量の小さい惑星をより広げたいので、対数スケール（log scale）を選択してYエンコーディングをカスタマイズします。 Your browser does not support the video tag. -- 次に、「radius」データ属性を使用して円の半径を、「hzd」を使用して塗りつぶし色をエンコードします。hzdの値は-3.0から3.0の範囲であるため、Data Illustrator はデフォルトで発散カラースケールを選択します。赤-黄-青のスケールを選択してカスタマイズできます。その後、円の不透明度を0.5に設定し、背景色を黒に設定します。円を直接ドラッグしてサイズを変更することもでき、サイズエンコーディングは維持されます。最後に、軸と凡例の色を薄い灰色に変更して、暗い背景から目立つようにします。 Your browser does not support the video tag. --https://data-illustrator.dataviz.jp/gallery/nightingale-rosechart/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/nightingale-rosechart/フローレンス・ナイチンゲールのローズダイアグラムの再現。データソース: Nightingale, F., Farr, W., & Smith, A. (1859). A contribution to the sanitary history of the British army during the late war with Russia. John W. Parker and Son. まず、円を描き、「Month」で分割し、さらに結果のパイを「Type」で分割します。 Your browser does not support the video tag. -- 次に、任意の円弧を選択し、その厚さを「Death」にバインドします。デフォルトのスケールタイプは線形（linear）ですが、面積が死亡数を表すように「Square Root（平方根）」に変更します。 Your browser does not support the video tag. -- 最後に、各円弧の塗りつぶし色を「Type」にバインドし、カラーマッピングをカスタマイズします。 Your browser does not support the video tag. --https://data-illustrator.dataviz.jp/gallery/bitcoin-price/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/bitcoin-price/このエリアチャートは、2013年4月28日から2018年4月23日までのビットコイン価格の変動を示しています。元の視覚化はhttps://d3-graph-gallery.com/からのものです。 まず、長方形を描き、塗りつぶしの色を金色に設定し、「date」で高密度化（densify）します。 Your browser does not support the video tag. -- 次に、上部の頂点のいずれかを選択し、そのX位置を「date」にバインドします。下部の頂点についても同様に行い、既存の日付スケールとマージすることを選択します。Data Illustrator は頂点のX位置とエリアマークのX位置を区別しますが、ここでは「date」をエンコードするために前者を使用しています。 Your browser does not support the video tag. -- 最後に、エリアマークを選択し、その高さを「value」にバインドします。デフォルトでは、エリアチャートのベースラインは下部にありますが、「baseline」プロパティコントロールを使用して、ベースラインを上部または中央に変更できます。https://data-illustrator.dataviz.jp/gallery/boston-weather/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/boston-weather/このレンジチャートは、ボストンにおける1年間の日別最高、最低、平均気温を示しています。RaureifのTimm Kekeritzによる元の視覚化は極座標空間でしたが、ここではデカルト空間で同様のデザインを作成する方法を示しています。 まず、（Shiftキーを押しながら）垂直線を描き、線の太さを3に設定し、それを「date」で繰り返します。 Your browser does not support the video tag. -- 次に、結果のコレクション内の任意の線を選択し、そのX位置を「date」にバインドします。これにより、線はコレクションのグリッドレイアウトから外れ、X軸が作成されます。次に、ダイレクト選択ツールを使用して任意の線の上部頂点を選択し、そのY位置を「maxTemp」にバインドします。次に、任意の線の下部頂点を直接選択し、そのY位置を「minTemp」にバインドします。ここで、新しいスケールを作成するか、「maxTemp」から作成された既存のスケールとマージするかのオプションがあることに注意してください。スケールをマージし、Y軸ハンドルをドラッグして範囲を広げましょう。 Your browser does not support the video tag. -- 最後に、任意の線を選択し、その線の色（stroke color）を「meanTemp」にバインドします。Data Illustrator は自動的に配色と凡例を選択します。凡例の方向を「Horizontal（水平）」に変更し、凡例をチャートの下に移動できます。 Your browser does not support the video tag. --https://data-illustrator.dataviz.jp/gallery/household-spending/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/household-spending/このチャートは、1980年と2008年の英国とニュージーランドにおける家計支出パターンを比較しています。データソースはこちらです。 まず、円を描き、塗りつぶしの色を設定し、「Country」で繰り返し、さらに結果のコレクションを「Year」で繰り返します。X軸の外観をカスタマイズするために、パスと目盛りを非表示にし、向きを「top（上）」に変更します。ピンク色のギャップ領域をドラッグして、行間のギャップを増やすこともできます。 次に、任意の円を選択し、「Category」で分割します。これにより、4つの円グラフが作成されます。その後、円グラフのいずれかを選択し、その角度を「Percentage」に、塗りつぶし色を「Category」にバインドします。 最後に、インタラクティブな凡例を使用してカラーマッピングをカスタマイズし、Y軸の視覚的外観とラベル形式を変更し、列間のギャップを増やします。https://data-illustrator.dataviz.jp/gallery/new-car-colors/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/new-car-colors/このバンプチャートは、北米における新車の色のランキングが長年にわたってどのように変化しているかを示しています。マゼンタ色は「その他」の色を表します。元の視覚化はRody Zakovichによってデザインされました。 まず、線を描き、「Color」で繰り返し、各線を「Year」で高密度化（densify）します。 Your browser does not support the video tag. -- 次に、任意の線上の任意の頂点を直接選択し、X位置を「Year」に、Y位置を「Rank」にバインドします。 Your browser does not support the video tag. -- 次に、折れ線のコレクションのレイアウトを「None（なし）」に変更し、線が同じY軸を共有するようにします。チャートを大きくするために軸のサイズを変更しましょう。また、ランキングを上から下に配置する方が直感的であるため、Y軸ハンドルをドラッグして反転させることができます。 Your browser does not support the video tag. -- 次に、任意の線を選択し、その線の色（stroke color）を「Color」にバインドし、線を太くします。これらの変更は他のすべての線に適用されます。視覚的なスタイルもカスタマイズしましょう。線のカーブモードを「Bump X」に変更し、頂点の形状を半径4の円に更新します。デフォルトでは、頂点の色は線の色と一致することに注意してください。 Your browser does not support the video tag. -- 最後に、背景色を変更し、インタラクティブな凡例を通じてカラーマッピングをカスタマイズして、色がその名前と一致するようにします。軸のテキストの色を変更して、読みやすくすることもできます。 Your browser does not support the video tag. --https://data-illustrator.dataviz.jp/gallery/stock-market/Wed, 04 Nov 2020 09:19:42 +0100https://data-illustrator.dataviz.jp/gallery/stock-market/Amazon、Apple、IBM、Microsoftの4社の2000年1月1日から2010年3月1日までの月次株価。d3noob.orgでd3.jsを使用して作成された元の視覚化。 まず、線を描き、「Company」で繰り返し、各線を「Date」で高密度化（densify）します。 Your browser does not support the video tag. -- 次に、任意の線を選択し、その線の色（stroke color）を「Company」にバインドします。また、線を太くするために線の幅を変更しましょう。 Your browser does not support the video tag. -- 次に、ダイレクト選択ツールを使用して線内の任意の頂点を選択し、そのX位置を「Date」に、Y位置を「Price」にバインドします。 Your browser does not support the video tag. -- 最後に、すべての線を同じチャートに表示し、同じスケールを共有させたいと考えています。これを行うには、最上位のコレクションを選択し、レイアウトを「Grid（グリッド）」から「None（なし）」に変更します。その後、チャートを読みやすくするために軸の範囲を調整できます。 Your browser does not support the video tag. --