JSFiddle - React, Tailwind, and code Playground

by Yoshiharu Kamata

HTML

<div>
    <button>move</button>
</div>
<svg width="600" height="400" ></svg>

CSS

svg .a {
    fill: green
    stroke: gray;
}
svg .aa {
    fill: greenyellow;
    stroke: gray;
}
svg .b {
    fill: orange;
    stroke: gray;
}
svg .bb {
    fill: tomato;
    stroke: gray;
}
svg .c {
    fill: blue;
    stroke: gray
}
svg .cc {
    fill: aqua;
    stroke: gray;
}

CoffeeScript

data1 = [
  {id: "a1", type: "a", icon: "a"}
  {id: "a2", type: "a", icon: "a"}
  {id: "a3", type: "a", icon: "a"}
  {id: "b1", type: "b", icon: "b"}
  {id: "c1", type: "c", icon: "c"}
  {id: "c2", type: "c", icon: "c"}
  {id: "c3", type: "c", icon: "c"}
]
data2 = [
  {id: "a1", type: "a", icon: "aa"}
  {id: "b1", type: "b", icon: "bb"}
  {id: "b2", type: "b", icon: "bb"}
  {id: "b3", type: "b", icon: "bb"}
  {id: "b4", type: "b", icon: "bb"}
  {id: "b5", type: "b", icon: "bb"}
  {id: "b6", type: "b", icon: "bb"}
  {id: "c1", type: "c", icon: "cc"}
]
delay = 1000
render = (data)->
  svg = d3.select("svg")
  nodes = svg.selectAll("rect")
  .data(data, (d)-> d.id)
    
  nodes.exit()
  .transition()
  .duration(delay)
  .attr("opacity", 0)
  .remove()
    
  nodes.enter()
  .append("rect")
  .attr
    opacity: 0
    width: 50
    height: 50
    
  nodes
  .transition()
  .delay(delay)
  .duration(delay)
      .attr "class", (d)->
    d.icon
  .attr("opacity", 1)
  .attr "x", (d,i)->
    10 + (i%3)*120
  .attr "y", (d,i)->
    10 + Math.floor(i/3)*120
render(data1)

cnt = 0
document.querySelector("button").addEventListener "click", ->
  cnt++
  if cnt%2
    render(data2)
  else
    render(data1)