D3 Examples - Misleading Quotes

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <title>Misleading quotes</title>
    
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
​
​
    
    
     <style type="text/css"> 
    
    body {
    margin:50px 250px; padding:0px;
    text-align:center;
    }
    
    
#x
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-size:24px;
}
#x:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-size:24px;
​
}
​
​
#c
{
opacity:1;
filter:alpha(opacity=40); /* For IE8 and earlier */
font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-size:24px;
}
​
    </style>
    
​
​
    
    
    
</head> 
​
<body>   
​
<img src="https://static.guim.co.uk/sys-images/Guardian/About/General/2012/5/8/1336497298362/Critics-quote-for-Rock-of-008.jpg" width="230" height="138" alt="Critic's quote for Rock of Ages" >
​
​
<p><span id="x" >It's a very peculiar show indeed, with an unvarying and unpleasant tone of careless sexualisation. </span><span id="c"> Rock'n'roll debauchery</span><span id="x" > is presented as the pure and innocent way of dreamers.</span></p>
<hr>
<p><span id="x" >The action in this fast-paced,  </span><span id="c">hysterically</span><span id="x" > overproduced and surprisingly </span><span id="c">entertaining</span><span id="x" >  film is as realistic as a Road Runner cartoon.</span></p>
<hr>
</body>
​
​
​
</html>
    