jQuery addClass example

Change class name on click in jQuery

by Himanshu Joshi

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.js"></script>
<div>
  <ul class="cb content__row / min-vh75">
  <li class="graph / fl-l w75-l / vh75 / mb5 mb0-l">
    <div class="graph__container / h100"></div>
  </li>
</ul>
</div>
<pre id="data">
brand,vertical,hq,content,marketing,quadrant
Adidas,Activewear,EU,5.1,6.8, Leader 
Athleta,Activewear,NA,2.5,2, Laggard 
lululemon athletica,Activewear,NA,2.9,3.7, Laggard 
New Balance,Activewear,NA,5.2,2.3, Data Miner 
Nike,Activewear,NA,6.6,4.8, Data Miner 
The North Face,Activewear,NA,2.6,3.9, Laggard 
Patagonia,Activewear,NA,2.1,4.8, Laggard 
Reebok,Activewear,NA,5.8,3.1, Data Miner 
REI,Activewear,NA,4.1,2.8, Laggard 
Under Armour,Activewear,NA,5.2,5.1, Leader 
Vans,Activewear,NA,2.1,3.8, Laggard 
bareMinerals,Beauty,NA,5.6,3.9, Data Miner 
Benefit Cosmetics,Beauty,NA,3.8,2.5, Laggard 
Bobbi Brown,Beauty,NA,5.8,4.2, Data Miner 
Charlotte Tilbury,Beauty,EU,2.8,3.4, Laggard 
Clinique,Beauty,NA,5.3,5.1, Leader 
Estee Lauder,Beauty,NA,4.4,4.8, Laggard 
Garnier,Beauty,EU,5.8,1.4, Data Miner 
Kiehl's,Beauty,NA,5.3,3.7, Data Miner 
L'Oreal Paris,Beauty,EU,7,3.1, Data Miner 
Lancome,Beauty,EU,4.8,5.6, Streamliner 
MAC Cosmetics,Beauty,NA,5.4,2.3, Data Miner 
Maybelline,Beauty,NA,6.1,2.5, Data Miner 
NARS Cosmetics,Beauty,NA,6.1,3.1, Data Miner 
Neutrogena,Beauty,NA,5.1,3.1, Data Miner 
NYX,Beauty,NA,4.9,4.2, Laggard 
Tarte,Beauty,NA,5,7.3, Streamliner 
Too Faced Cosmetics,Beauty,NA,2.6,6.8, Streamliner 
Urban Decay,Beauty,NA,6.6,2.3, Data Miner 
YSL Beauty,Beauty,NA,5.4,3.1, Data Miner 
Amazon,Big Box,NA,2.8,6.2, Streamliner 
Best Buy,Big Box,NA,3.7,7.6, Streamliner 
CVS Pharmacy,Big Box,NA,5.5,4.2, Data Miner 
Dick's Sporting Goods,Big Box,NA,3.9,4.2, Laggard 
Home Depot,Big Box,NA,4.8,4.8, Laggard 
Lowe's,Big Box,NA,4.7,5.9, Streamliner 
Office Depot,Big Box,NA,5.7,4.8, Data Miner 
Petco,Big Box,NA,4.4,4.5, Laggard...

CSS

body {
  background: #20262E;
  padding: 20px;
}

pre {
  display: none;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

//*~*~*~~**~*~*~*
// L2 Inc. Utils
//*~*~*~*~*~*~*~*

var l2Utils = (function() {
  function init(options) {
    var defaults = {};
    options = $.extend(defaults, options);

    window.isMobile = ((/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent));
    window.myEvent = isMobile ? 'touchstart' : 'click';

    var right = $(window).innerWidth() < 1030 ? 5 : 50,
      left = $(window).innerWidth() < 768 ? 65 : 60,
      top = $(window).innerWidth() < 768 ? 40 : 40,
      margin = {
        top: top,
        right: right,
        bottom: 90,
        left: left
      };

    var containerWidth = $('.graph__container').width(),
      containerHeight = $('.graph__container').height(),
      width = containerWidth - margin.left - margin.right,
      height = containerHeight - margin.top - margin.bottom;

    var xScale = d3.scale.linear()
      .domain([0, 10])
      .range([0, width]),
      yScale = d3.scale.linear()
      .domain([0, 10])
      .range([height, 0]);

    var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient('bottom')
      .tickSize(-height),
      yAxis = d3.svg.axis()
      .scale(yScale)
      .orient('left')
      .tickSize(width);

    var svg = d3.select('.graph__container')
      .append('svg')
      .attr({
        'width': width + margin.left + margin.right,
        'height': height + margin.top + margin.bottom
      })
      .append('g')
      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

    var data = d3.csv.parse(d3.select("pre#data").text());
    /*d3.csv('https://www.l2inc.com/interactives/data-targeting-2018/js/data-targeting-2018.csv', ready);*/
    ready(data);

    function ready(data) {
      // if (err) console.warn('Error', err);

      data.forEach(function(d) {
        d.content = +d.content;
        d.marketing = +d.marketing;
        d.line_value = +d.line_value;
      });

      let allSectors = d3.set(data.map(function(d) {
        return...