JSFiddle - React, Tailwind, and code Playground

by davidmarx

HTML

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<div id='container'>
    
    <img id="image" width="200" height="200" alt="star"...

CSS

#container {
    position:relative;
}

.dot {
  stroke: #000;
}


#image{
  position:absolute;
  z-index=1;   
}

#chart {
  position:absolute;
  z-index=2;
}

JavaScript

// NB: Base plot was almost certainly generaed using flot.js
//   http://www.flotcharts.org/

var data = [
    {'x':0, 'y':0},
    {'x':1, 'y':1},
    {'x':2, 'y':2},
    {'x':10, 'y':3},
    {'x':11, 'y':4},
];

//var width=200, height=200;
var raw_width=200, raw_height=200;

var margin = {top: 7, right: 6, bottom: 19, left: 20},
    width  = raw_width  - margin.left - margin.right,
    height = raw_height - margin.top  - margin.bottom;
    
/*
var svg = d3.select("#chart")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
*/
    
var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    

var x = d3.scale.linear()
    .domain([0, 11])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, 4])
    .range([height,0]);

svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.x); })
      .attr("cy", function(d) { return y(d.y); })
      .style("fill", function(d) { return color(d.species); });