Protobi

← All blog posts View post

</style>

<p>"Hey, is there any way we can see this data as a perceptual map?  I'd love to show this to the marketing team tomorrow."
Thus was the question posed by a smart client who likes to present synthesized findings rather than just raw data.</p>
<p>The next question was "How can we make this easier to see?"
Together we worked out a new take on Perceptual Maps to make more fun...</p>
<p><a href="#interactive"><img src="/images/blog/2015-03-07/2015-03-07-pmap.png" style="width:400px; display: block;  margin: 0 auto;"/></a>
</p>
<h2 id="data">Data</h2>
<p>The survey had collected a set of ratings for a number of brands on various attributes.  The data looked like this.
The question was basically "For which patient type(s) do you think each brand is best?"</p>
<table id=data>
<thead>
<tr><th></th><th colspan=6 style="text-align: center">Brand</th></tr>
<tr><th  class=value>Patient type</th><th class=pct>Z</th><th class=pct> A</th><th class=pct> X</th><th class=pct> G</th><th class=pct> Y</th><th class=pct> B</th></tr>
</thead>
<tbody>
<tr><td class=value>Early/First line</td><td class=pct>5%</td><td class=pct>17%</td><td class=pct>0%</td><td class=pct>0%</td><td class=pct>0%</td><td class=pct>0%</tr>
<tr><td class=value>Refractory/late-line</td><td class=pct>32%</td><td class=pct>29%</td><td class=pct>13%</td><td class=pct>3%</td><td class=pct>3%</td><td class=pct>4%</tr>
<tr><td class=value>General use</td><td class=pct>18%</td><td class=pct>24%</td><td class=pct>13%</td><td class=pct>20%</td><td class=pct>15%</td><td class=pct>28%</tr>
<tr><td class=value>Convenient</td><td class=pct>12%</td><td class=pct>0%</td><td class=pct>0%</td><td class=pct>0%</td><td class=pct>0%</td><td class=pct>0%</tr>
<tr><td class=value>Unfamiliar</td><td class=pct>13%</td><td class=pct>3%</td><td class=pct>0%</td><td class=pct>0%</td><td class=pct>0%</td><td class=pct>0%</tr>
<tr><td class=value>Non-compliant</td><td class=pct>12%</td><td class=pct>0%</td><td class=pct>3%</td><td class=pct>4%</td><td class=pct>23%</td><td class=pct>6%</tr>
<tr><td class=value>Physical symptoms</td><td class=pct>0%</td><td class=pct>3%</td><td class=pct>0%</td><td class=pct>14%</td><td class=pct>11%</td><td class=pct>3%</tr>
<tr><td class=value>Cognitive symptoms</td><td class=pct>1%</td><td class=pct>0%</td><td class=pct>2%</td><td class=pct>33%</td><td class=pct>2%</td><td class=pct>2%</tr>
<tbody>
</table>

<h2 id="challenge">Challenge</h2>
<p>The challenge is that there are a lots of brands and lots of attributes (this is a subset of the actual data) so its not easy to see it at glance,
unless you're one of those people who like tables.  Shading the table (as we did above) helps a lot.  But big tables can be hard to grok.</p>
<h2 id="create-a-perceptual-map-biplot-in-r">Create a perceptual map biplot in R</h2>
<p>It's can be  quick to create a perceptual map in R:</p>
<pre class="language-r">
install.packages("psych")
library("psych")
df <- read.csv(url("http://protobi.com/examples/pca/brand.csv"),
   header=TRUE, row.names=1)
pc.cr <- princomp(df, cor=TRUE)
summary(pc.cr)
biplot(pc.cr)
</pre>

<p><br/>
Below is how the resulting biplot looks in R.  Easy to create, but static and offline:</p>
<p><img src="/images/blog/2015-03-07/2015-03-07-pmap-r.png" style="width:80%"/></p>
<h2 id="interpreting-perceptual-maps">Interpreting perceptual maps</h2>
<p>Every time I've seen PMaps in business presentations, they're invariably introduced as "the most misunderstood plot in market research."
So here's a brief intro.</p>
<p>Perceptual maps reduce lots of brand dimensions to just two so we can plot them on a page.   Like plotting an actual map,
flattening a 3-dimensional globe to 2 dimensions results in some approximation.  But we find the best possible fit for the aspect of interest.</p>
<p>Each product is drawn as an axis.  To see how each product scores on an attribute, imagine an orthogonal line from the attribute point
to the brand axis.  Where that point intersects the brand axis indicates how that brand scores on that attribute.</p>
<p>...Lost you there, right? Client presentations easily go off track when we ask executives to imagine orthogonal lines.
Why don't we just draw the lines for the reader?</p>
<h2 id="interactive-perceptual-map">Interactive perceptual map</h2>
<p>Below is the same graph calculated dynamically.  Hover over any point or axis.  The tracer lines
are automatically drawn, and the underlying data is neatly summarized in a hover tip.</p>
<p>This is not only a lot more fun to read and to show, but it easier to trace the lines visually.</p>
<svg id="interactive"></svg>

<p>Note that the above Perceptual Map is calculated directly in the browser from the raw data, not simply plotting points calculated in R.
You can access the <a href="http://protobi.com/examples/pca/pmap.js">source code for this example</a> here.
The uses an elegant <a href="http://protobi.com/examples/pca/pca.js">implementation of PCA</a> from ktnaneishi's <a href="http://bl.ocks.org/ktaneishi/9499896">Principal Component Analysis </a> post on bl.ocks.org</p>
<script src="/javascripts/d3.v3.min.js"></script>
<script src="1"></script>
<script src="/examples/pca/pca.js"></script>

<style>

.d3-tip {
     font-size: 12px;
  }
  .d3-tip h3 {
     font-size: 20px;
  }

svg {
    border: 1px solid black;
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

.tracer {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

.dot {
    stroke: #000;
    fill: #000F;
  }

.square {
    stroke: #AAA;
    fill: #FC0;
  }

.label-brand{
    font-weight: bold;
    font-size: 16px;
    fill: #aaa;
  }

.label-attr {
    font-size: 12px;
  }
  .d3-tip {
    line-height: 1;
    font-weight: normal;
    padding: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 2px;
  }

.d3-tip td.pct { text-align: right; }

/* Creates a small triangle extender for the tooltip */
  .d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    content: "\25BC";
    position: absolute;
    text-align: center;
  }

/* Style northward tooltips differently */
  .d3-tip.n:after {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
  }

</style>

Date

Status

Slug edit

Thumbnail

Categories Manage