JSFiddle - React, Tailwind, and code Playground

by Nicolas Kruchten

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
<div id="c" />

CoffeeScript

r = 14
svg = d3.select("#c").append("svg")
             .attr("width", 4*r)
             .attr("height", 2*20*r)
  
google = [ "#3366cc", "#dc3912", "#ff9900", "#109618",
           "#990099", "#0099c6", "#dd4477", "#66aa00",
           "#b82e2e", "#316395", "#994499", "#22aa99",
           "#aaaa11", "#6633cc", "#e67300", "#8b0707",
           "#651067", "#329262", "#5574a6", "#3b3eac" ]

svg.append('g').selectAll("circle")
	.data(google).enter().append("circle")
	.attr("r", r )
    .attr("cx", r )
    .attr("cy", (d,i) -> r+2*r*i)
    .attr "fill", (d) ->
    	chroma(d).luminance(0.45)
      
svg.append('g').selectAll("circle")
	.data(google).enter().append("circle")
	.attr("r", r )
    .attr("cx", 3*r )
    .attr("cy", (d,i) -> r+2*r*i)
    .attr "fill", (d) -> d