Skip to main content

#Aaaaaa0 discussing

color gradient in heat map

Hi All,

 

I am using superstore data wherein i have made a highlight table and color coded it based on a calculated field. My first task is done which was to coloe code the table based on the Sales range.

Attaching the graph and the calulated field i have used.

 

Next step is to further give a color gradient to each of the color (red , yellow and gree) sections and provide a shading (light to dark)

for e.g, if sales is close to 30000 it should be light yellow and if it goes up to 60000 it should be more dark. I am not able to implement that. Is it even possible??

 

Please help me. Pooja Gandhi Jonathan Drummey Sankarmagesh Rajan

6 answers
  1. Aug 17, 2015, 2:37 PM

    Before I hop on my little soapbox, how's this?

     

    Before I hop on my little soapbox, how's this? This can't be configured in the Tableau UI as far as I know, I had to edit the preferences.

     

    This can't be configured in the Tableau UI as far as I know, I had to edit the preferences.tps file where I added the following custom color palette:

     

    <color-palette name="Reds/Yellows/Greens" type="ordered-diverging">   <color>⌗ff0000</color> <!-- light red -->    <color>⌗b10318</color>  <!-- Red -->   <color>⌗aaaaaa</color>  <!-- grey spacer -->   <color>⌗ffff7f</color> <!-- light yellow -->   <color>⌗dfc063</color>  <!-- Yellow -->   <color>⌗aaaaaa</color> <!-- grey spacer -->   <color>⌗00fc00</color> <!-- light green -->   <color>⌗007600</color>  <!-- Green -->

        </color-palette>

     

    See http://kb.tableau.com/articles/knowledgebase/creating-custom-color-palettes for more details on custom color palettes.

     

    Then the Sales KPI calculation in Tableau is:

    IF SUM([Sales]) > 1000000 THEN

        7

    ELSEIF SUM([Sales]) > 600000 THEN

        (SUM([Sales]) - 600000) / 400000 + 6

    ELSEIF SUM([Sales]) > 100000 THEN

        (SUM([Sales]) - 100000) / 500000 + 3

    ELSE

        SUM([Sales]) / 100000

    END

     

    This returns a range of 0-1 for red, 3-4 for yellow, and 6-7 for green. This is necessary because we have to insert spacer colors in the custom color palette so the entire range of red/yellow/green is available for each KPI.

     

    Then I set up the colors using the Advanced option to make sure that the full color range is used and to set the Start and Center:

     

    2015-08-17+10_26_19-Tableau+-+ordered+diverging+kpi+color.png

     

    Here's a link to the workbook on Tableau Public: Workbook: ordered diverging kpi color

     

    Now for the soapbox, because this kind of viz has two serious issues:

     

    1) It's using red and green. That makes somewhere between 5 and 8% of the male population (and up to 1/2% of the female population) unable to interpret this viz, I ran this particular set of colors through Vischeck http://vischeck.com for the most common form of color blindness:

     

    2015-08-17+10_06_45-Vischeck_+VischeckImage.png

     

    With a split-second glance, in 2012 Chairs & Chairmats & Envelopes look like they are in the same range, so the use of color for pre-attentive processing is a total fail here. Now while it is possible to select colors that are distinct enough for color blind people to use this, since you wanted a continuous range that gets more difficult.

     

    2) This viz is using both the hue of the color (red/yellow/green) and intensity (saturation) to identify the range. These are the *least* effective forms of visual encoding for quantitative data per http://mkt.tableau.com/downloads/designing-great-visualizations.pdf (page 8) after position, length, angle, and area/size. (Thanks to Ben Jones for the reference in his book _Communicating Data with Tableau_). While most of us do have red/yellow/green internalized for meanings, there are three continuous ranges here and that makes it even more complicated for users to interpret.

     

    Now you might be able to muck around with the color settings and generate a set of 6 colors that have light/dark red, light/dark yellow, and light/dark green where each set of colors has increasing intensity that doesn't overlap , but you're probably better off spending your time building a different kind of visualization (or multiple visualizations). What are the business questions that are being asked here? If you're trying to identify the worst/best performers then maybe sorting the view might be better (so you are using position). If you're trying to look at change over time then use a line chart (which is encoding for position & length & angle), or maybe a bar chart with absolute or % difference. There are many possible visualizations that could be built out of this data that would help users more accurately answer the questions they have than this kind of chart. The wonderful thing about Tableau is that we can quickly and easily built a set of visuals to answer many different questions.

     

    Jonathan

0/9000

Pardotフォームで離脱の原因を見つけるために、

フォームのレイアウトテンプレートに、 GTMタグ、Clarityタグを埋め込みたいです。

 

ベストプラクティスさまが無料提供されている

下記のレイアウトテンプレートを活用しています。

この中に、どの位置にGTMタグ、Clarityタグを埋め込めば良いかを

アドバイスいただけますと幸いです。

 

--------------

<!DOCTYPE html>

<html lang="ja">

  <head>

    <!-- Pardotフォームテンプレート(Bootstrap版)-->

    <meta charset="utf-8">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="robots" content="noindex,nofollow">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="%%description%%">

    <title>%%title%%</title>

    <!-- Bootstrap CDN参照-->

    <!-- version 4.5--><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"

      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- Google Font読み込み-->

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap">

    <style>

/* ##### レイアウト共通スタイル ##### */

/* ### フォント設定 | Noto Sans JPを指定 */

body, input, select, textarea { font-family:'Noto Sans JP',sans-serif,system-ui; }

/* ### リンク */

a:link, a:visited { color:#004196; }

a:hover, a:active { color:#005cd3; }

/* ### ボタン(.btn-primaryの置き換え) */

.tplbp-bootstrap4 .btn-primary { background-color:#004196; border-color:transparent; }

.tplbp-bootstrap4 .btn-primary:link, .tplbp-bootstrap4 .btn-primary:visited { background-color:#004196; border-color:transparent; }

.tplbp-bootstrap4 .btn-primary:hover, .tplbp-bootstrap4 .btn-primary:active, .tplbp-bootstrap4 .btn-primary:focus { background-color:#005cd3; border-color:transparent; }

.tplbp-bootstrap4 .btn-primary:disabled { opacity:40% !important; background-color:#005cd3 !important; border-color:transparent !important; }

/* ### 項目ラベル */

.tplbp-bootstrap4 label.form-label { font-weight:700; }

/* ### small */

.tplbp-bootstrap4 small { font-size:.875em; }

/* ### チェックボックス/ラジオボタン */

.tplbp-bootstrap4 .custom-control-input:checked ~ .custom-control-label::before { background-color:#004196; border-color:#004196; }

.tplbp-bootstrap4 .pd-checkbox span.value, .tplbp-bootstrap4 .pd-radio span.value { display:block; overflow:hidden; }

.tplbp-bootstrap4 .pd-checkbox span.value > span, .tplbp-bootstrap4 .pd-radio span.value > span { margin-right:1.25em; }

/* ### 必須項目 */

.tplbp-bootstrap4 .form-field.required .form-label::after, .tplbp-bootstrap4 .form-field.required .col-form-label::after { content:'必須'; margin-left:.5em; font-size:.875em; color:#dc3545; }

/* ### エラー表示 */

.tplbp-bootstrap4 .errors { margin-bottom:2em; padding:1em; border:solid 2px #dc3545; color:#dc3545; }

.tplbp-bootstrap4 .form-text.error { color:#dc3545; }

/* ### Date-Picker対応 */

#ui-datepicker-div { display:none; }

.ui-datepicker.ui-widget { padding:.5rem .75rem; background:#FFFFFF; border:solid 1px #aaaaaa; border-radius:.25rem; box-shadow:2px 2px 4px 0 rgba(0, 0, 0, 0.2); }

.ui-datepicker.ui-widget .ui-datepicker-header { display:flex; flex-wrap:wrap; font-size:.9rem; }

.ui-datepicker.ui-widget .ui-datepicker-header a.ui-datepicker-prev, .ui-datepicker.ui-widget .ui-datepicker-header a.ui-datepicker-next { color:#007bff; text-decoration:underline; }

.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-prev { width:50%; }

.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-next { width:50%; text-align:right; }

.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-title { display:flex; justify-content:center; margin-bottom:.3rem; width:100%; }

.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month { margin-right:.1rem; }

.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-title ui-datepicker-year { margin-left:.1rem; }

.ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-title select { font-size:.9rem; }

.ui-datepicker.ui-widget table.ui-datepicker-calendar thead th { background:#999999; text-align:center; font-weight:normal; font-size:.9rem; color:#FFFFFF; }

.ui-datepicker.ui-widget table.ui-datepicker-calendar th.td { text-align:center; }

.ui-datepicker.ui-widget td a { display:block; padding:.1rem .25rem; text-align:center; }

.ui-datepicker.ui-widget td.ui-datepicker-week-end a { background:#FFDBC8; }

/* ##### テーブルレイアウト用スタイル ##### */

/* TH(フォーム項目ラベル)セルと、TD(入力エリア)セルの幅指定 */

form#pardot-form table th { width:25%; }

form#pardot-form table td { width:75%; }

/* フォーム項目ラベル セルの背景色 */

form#pardot-form table th { background-color:#f7f7f7; }

/* ##### スタイル ここまで ##### */

    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  </head>

  <body>

    <div class="container-fluid mt-3 mb-3">

      %%content%%

    </div>

    <script>

      // ### Bootstrap用のClassを追加

      // テキスト

      $('input[type=text]').each(function () {

        $(this).attr('class', $(this).attr('class') + ' text form-control');

      });

      // テキストエリア

      $('textarea').attr('class', 'form-control');

      // セレクトボックス

      $('select').attr('class', 'form-control');

      $('.pd-select select > option:first-child').append('選択してください'); // 最初の選択肢に、文言を追加

      // チェックボックス

      $('.pd-checkbox span.value > span').attr('class', 'custom-control custom-checkbox');

      $('input[type=checkbox]').attr('class', 'custom-control-input');

      $('.pd-checkbox span.value > span > label').attr('class', 'custom-control-label');

      // ラジオボタン

      $('.pd-radio span.value > span').attr('class', 'custom-control custom-radio');

      $('input[type=radio]').attr('class', 'custom-control-input');

      $('.pd-radio span.value > span > label').attr('class', 'custom-control-label');// 送信ボタン処理

      $('#pardot-form').submit(function () { $('#pardot-form :submit').prop('disabled', true); })

      // プレースホルダのサンプル

      // $('.first_name input').attr('placeholder','太郎'); // 例)first_name 項目に、「太郎」と表示

    </script>

    <!-- 作成:株式会社ベスト・プラクティス-->

    <!-- https: //www.best-practice.co.jp/-->

  </body>

</html>

0/9000