JSFiddle - React, Tailwind, and code Playground

by tiger

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="content-div">

</div>

JavaScript

var city = ["New York", "San Francisco", "Los Angeles", "東京", "大阪","埼玉","千葉"];
var colors = ["#FF0000", "#009933" , "#0000FF"];


var color_scale = d3.scaleOrdinal()
			.domain( city )
      .range(colors) ;

var svg = d3.select(".content-div")
	.append("svg")
  .selectAll( "rect" )
  .data(city)
  .enter() ;
  
  svg.append("rect")
    .attr("x", 20)
    .attr("y", function(d,i){ return i*20+10 ; })
    .attr("width", 10)
    .attr("height", 10)
    .attr("fill", function(d,i){ return color_scale(d) } )
    ;
    
  svg.append("text")
  	.attr("x", 35)
    .attr("y", function(d,i){ return i*20+20 ; })
    .text( function(d,i){ return city[i] ; } )
    ;