JSFiddle - React, Tailwind, and code Playground

by scottieb

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<label id="xs">1,2,3,4,5,6,7,8,9</label>
<label id="ys">1,4,9,16,25,36,49,64,81</label>
<label id="sets">a,a,a,a,b,b,b,b,b</label>
<div id="here"></div>
<button id="next">Then...</button>

CSS

.axis path,
.axis line 
{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text 
{
    font-family: Sans-Serif;
    font-size: 11px;
}

JavaScript

var x_data = $('#xs').text().split(',');
var y_data = $('#ys').text().split(',');
var sets_data = $('#sets').text().split(',');

var data = [];

for (i = 0; i < 9; i++)
data.push({
    "x": x_data[i],
    "y": y_data[i],
    "set": sets_data[i]
});

var datafiltered = data.filter(function(d) {
    return d.set == 'a';
});

var h = 300;
var w = 300;
var margin = 20;

var x = d3.scale.linear().domain([0, d3.max(datafiltered, function (d) {return parseInt(d.x)}) * 1.1]).range([20, 280]),
    y = d3.scale.linear().domain([100, 0]).range([20, 280]);

var vis = d3.select('#here').append("svg:svg").attr("width", w).attr("height", h);

vis.selectAll("circle").data(datafiltered).enter().append("svg:circle").attr("cx", function(d) {
    return x(d.x)
}).attr("cy", function(d) {
    return y(d.y)
}).attr("fill", "red").attr("r", 15);

/*vis.append("svg:line").attr("x1", x(0)).attr("x2", x(w)).attr("y1", y(0)).attr("y2", y(0)).style("stroke", "#000");*/

       var formatNumber = d3.format(".2f"),
           formatCurrency = function (d) {return "$" + formatNumber(d); };

    vis.append("svg:g")
        .attr("class", "x axis")
        .attr("transform", "translate(0, " + (h - margin ) + ")")
        .call(d3.svg.axis()
        .scale(x)
        .tickSize(0)
        .tickSubdivide(true)
        .tickFormat(formatCurrency)
             );
    
    /*vis.append("svg:g")
        .attr("class", "y axis")
        .attr("transform", "translate(0, " + (w - margin) + ")")
        .call(d3.svg.axis()
              .scale(y)
              .tickSize(0)
              .tickSubdivide(true));*/


$('#next').on("click", function() {
    datafiltered2 = data.filter(function(d) {
        return d.set == 'b';
    });
    
    var x = d3.scale.linear().domain([0, d3.max(datafiltered2, function (d) {return parseInt(d.x)}) * 1.1]).range([20, 280]);
    
    var circles = vis.selectAll("circle").data(datafiltered2);
    circles.enter().append("circle").attr("cx", function(d) {
        return...