<h4 dir="auto">Data Visualization with D3: Work with Data in D3</h4>
<p dir="auto"><a href="http://beta.freecodecamp.com/en/challenges/data-visualization-with-d3/work-with-data-in-d3" rel="nofollow">http://beta.freecodecamp.com/en/challenges/data-visualization-with-d3/work-with-data-in-d3</a></p>
<h4 dir="auto">Issue Description</h4>
<p dir="auto">Complete a previous challenge, go to the next challenge in the flow.  You'll see the previous output of the challenge you completed before.</p>
<h4 dir="auto">Browser Information</h4>
<ul dir="auto">
<li>Browser Name, Version: Chrome</li>
<li>Operating System: Mac</li>
<li>Mobile, Desktop, or Tablet: Desktop</li>
</ul>
<p dir="auto">Challenge <a href="http://beta.freecodecamp.com/en/challenges/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element" rel="nofollow">use-the-css-transform-scale-property-to-change-the-size-of-an-element</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<p dir="auto">No image in the phone view upon initial load when not following the map linearly.  (I selected a lesson based on what I could use a refresher on.  I know the surrounding material.)</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    
    
&lt;style&gt;
.ball { 
  width: 40px;
  height: 40px;
  margin: 50 auto;
  position: fixed;
  background: linear-gradient(
  35deg,
  #ccffff,
  #ffcccc
);       
  border-radius: 50%;
}
#ball1 {
  left:20%;
}
#ball2 {
  left:65%;
  
  
}


&lt;/style&gt;

&lt;div class=&quot;ball&quot; id= &quot;ball1&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;ball&quot; id= &quot;ball2&quot;&gt;&lt;/div&gt;

    ```
    "><pre class="notranslate">    
    
<span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
.<span class="pl-c1">ball</span> { 
  <span class="pl-c1">width</span><span class="pl-kos">:</span> <span class="pl-c1">40<span class="pl-smi">px</span></span>;
  <span class="pl-c1">height</span><span class="pl-kos">:</span> <span class="pl-c1">40<span class="pl-smi">px</span></span>;
  <span class="pl-c1">margin</span><span class="pl-kos">:</span> <span class="pl-c1">50</span> auto;
  <span class="pl-c1">position</span><span class="pl-kos">:</span> fixed;
  <span class="pl-c1">background</span><span class="pl-kos">:</span> <span class="pl-en">linear-gradient</span>(
  <span class="pl-c1">35<span class="pl-smi">deg</span></span><span class="pl-kos">,</span>
  <span class="pl-pds"><span class="pl-kos">#</span>ccffff</span><span class="pl-kos">,</span>
  <span class="pl-pds"><span class="pl-kos">#</span>ffcccc</span>
);       
  <span class="pl-c1">border-radius</span><span class="pl-kos">:</span> <span class="pl-c1">50<span class="pl-smi">%</span></span>;
}
<span class="pl-kos">#</span><span class="pl-c1">ball1</span> {
  <span class="pl-c1">left</span><span class="pl-kos">:</span><span class="pl-c1">20<span class="pl-smi">%</span></span>;
}
<span class="pl-kos">#</span><span class="pl-c1">ball2</span> {
  <span class="pl-c1">left</span><span class="pl-kos">:</span><span class="pl-c1">65<span class="pl-smi">%</span></span>;
  
  
}


<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">ball</span>" <span class="pl-c1">id</span>= "<span class="pl-s">ball1</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">ball</span>" <span class="pl-c1">id</span>= "<span class="pl-s">ball2</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>

    ```
    </pre></div>