JSFiddle - React, Tailwind, and code Playground

by Anonymous

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<!DOCTYPE html>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

.x.axis text {
    font: 10px sans-serif;
}

.y.axis text {
    font: 10px sans-serif;
}

.y-axis-hidden, .x-axis-hidden, path.domain, .tick line {
    display: none;
}

div.test {
    background: orange;
}

.axis text  {
    display: none;
}

JavaScript

var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 500,
    height = 500,
    padding = 0.3;

var xMin = -0.5, xMax = 0.5;

var bc = 1.3, bp = 2.64;

var yMin = calculateY(xMin, bc, bp);
var yMax = calculateY(xMax, bc, bp);

var isoLineData = [];
var domainSize = Math.abs(xMax - xMin), samplesSize = 25;
var incrementSize = domainSize / samplesSize;
for (var i = 0; i <= samplesSize; i++) {
    var localX = xMin + (incrementSize * i);
    if(i == samplesSize){ localX = xMax; }
    var localY = calculateY(localX, bc, bp);
    isoLineData.push({ x: localX, y: localY })
    //assuming the line should always go through the origin
    //we want to be sure to add a the 0 vector because
    //this is where all of the sections will meet
    //...otherwise a higher sample size needed
    if(localX < 0 && (localX + incrementSize) > 0){
        isoLineData.push({ x: 0, y: 0 })
    }
}

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

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(function (d) {
        return (d * 100) + '%';
    });

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(function (d) {
        return (d * 100) + '%';
    });

var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


chart.append("g")
     .style("fill-opacity", 1)
     .attr("class", "isoLayer");

var lineFunction = d3.svg.line()
    .x(function(d) { 
        return x(d.x); 
    })
    .y(function(d) { 
        return y(d.y); 
    })
    .interpolate("basis");

var isoLayer = chart.selectAll(".isoLayer").datum(isoLineData);

var isoLine = isoLayer
        .append("svg:path")
        .attr("d", lineFunction(isoLineData))
        .attr("fill",...