JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//cdn.bootcss.com/intro.js/2.1.0/intro.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/intro.js/2.1.0/introjs.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//npmcdn.com/[email protected]/mithril.min.js"></script>
<script src="//rawgit.com/dataarts/dat.gui/master/build/dat.gui.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cosmo/bootstrap.min.css">
<div class="container" id="main">
  <div class="row col-xs-12 col-md-6">
    <div id="map">
  
    </div>
    <button id='start' class='btn btn-primary btn-sm'>
      Start
    </button>
    <input id='ax' class='update' type='range' value='1' min='0.8' max='1.1' step='0.001' />
    <input id='ay' class = 'update' type='range' value='1' min='0.8' max='1.1' step='0.001' />
  </div>
</div>

CSS

#map {
  position:relative;
  background-size: 100% 100%;
  //background-image:url(//i.imgur.com/vOScQXG.png);
  border: 1px solid steelblue;
}
.intro-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.cell {
  position: absolute;
  border: 1px lightgray solid;
  cursor: pointer;
}
#main{
  margin-top: 100px;
  margin-left: 0px;
}
/* Custom CSS for Dashboards (added by Ramnath) */
.introjs-tooltip{min-width:300px;text-align:justify;}
.introjs-helperNumberLayer{
  border: none;
  background: steelblue;
  box-shadow: none;
  border-radius: 0;
}
.introjs-helperLayer {
  background: transparent;
  border: 3px steelblue solid;
  opacity: 0;
}
#tip-2{
  color: steelblue;
}

Babel + JSX

/* Parameters to Tune */
const aspectRatio = 855/455
//const ax = 0.993  /*0.993 */
const ay = 0.987  /*0.987 */
const dx = 0
const dy = 0

const cellSize = 30
const width = 500

 
const locations = [{"x":152,"y":153,"id":"1","type":"AlteryxBasePluginsGui.DbFileInput.DbFileInput"},{"x":307,"y":153,"id":"2","type":"AlteryxBasePluginsGui.Filter.Filter"},{"x":462,"y":153,"id":"5","type":""},{"x":772,"y":131,"id":"6","type":"AlteryxBasePluginsGui.BrowseV2.BrowseV2"},{"x":617,"y":174,"id":"7","type":"AlteryxBasePluginsGui.BrowseV2.BrowseV2"},{"x":152,"y":333,"id":"12","type":"AlteryxBasePluginsGui.DbFileInput.DbFileInput"},{"x":462,"y":333,"id":"13","type":""},{"x":617,"y":354,"id":"14","type":"AlteryxBasePluginsGui.BrowseV2.BrowseV2"},{"x":772,"y":311,"id":"15","type":"AlteryxBasePluginsGui.BrowseV2.BrowseV2"}]  

const steps = [{intro: "Hello", element: "#map"}].concat(locations.map((d, i) => 
  ({
    element: `#map-link-${i + 1}`, 
    intro: `<div id="tip-${i}"> This is ${d.type.split(".")[2]}</div>`,
    position: 'right'
   })
))

const height = width/aspectRatio
const S = {
  x: d3.scale.linear()
    .range([0, width - cellSize])
    .domain([0, d3.max(locations, d => d.x)]),
  y: d3.scale.linear()
    .range([0, height - cellSize])
    .domain([0, d3.max(locations, d => d.y)])
}

d3.select("#map").style({
  width: `${width}px`, height: `${height}px`
})

const imgSrc = "//i.imgur.com/UvM23wM.png"

const map = d3.select("#map")
map.append("img").attr({
  src: imgSrc,
  class: 'intro-img'
})

function drawCells(ax, ay){
  console.log(ax)
  const cells = map.selectAll("a").data(locations)
  const cell = cells.enter().append("a")
  cells
    .classed("cell", true)
    .style('width', cellSize + 'px')
    .style('height', cellSize + 'px')
    .style('top', d => S.y(+d.y)**ay - dy +  'px')
    .style('left', d => S.x(+d.x)**ax - dx  + 'px')
    .attr('id', (d, i) => `map-link-${i + 1}`)
    .text(' ')
    .on('click', (d, i) => introProfile.goToStep(i +...