JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="wrap">
		<canvas id="canvas" width="700" height="800">
      
    </canvas>	
	</div>	
<textarea id="JSON"> 
	[
 {
  "logp1": -14.67778070526608, 
  "logp0": -0.15879825589120006, 
  "p0": 0.693748, 
  "p1": 2.1e-15, 
  "name": "J0006+1834"
 }, 
 {
  "logp1": -12.443697499232712, 
  "logp0": -0.5004874948677189, 
  "p0": 0.315873, 
  "p1": 3.6e-13, 
  "name": "J0007+7303"
 }, 
 {
  "logp1": -15.248720896016657, 
  "logp0": 0.09366643218787957, 
  "p0": 1.240699, 
  "p1": 5.64e-16, 
  "name": "B0011+47"
 }, 
 {
  "logp1": -19.00656376950239, 
  "logp0": -2.4514877436589644, 
  "p0": 0.003536, 
  "p1": 9.85e-20, 
  "name": "B0021-72E"
 }, 
 {
  "logp1": -19.190440285364733, 
  "logp0": -2.5810361692963775, 
  "p0": 0.002624, 
  "p1": 6.45e-20, 
  "name": "B0021-72F"
 }, 
 {
  "logp1": -19.517126416391246, 
  "logp0": -2.5779028368682897, 
  "p0": 0.002643, 
  "p1": 3.04e-20, 
  "name": "J0024-7204O"
 }, 
 {
  "logp1": -19.468521082957746, 
  "logp0": -2.394371777992381, 
  "p0": 0.004033, 
  "p1": 3.4e-20, 
  "name": "J0024-7204Q"
 }, 
 {
  "logp1": -18.531652669587842, 
  "logp0": -2.119872677783375, 
  "p0": 0.007588, 
  "p1": 2.94e-19, 
  "name": "J0024-7204T"
 }, 
 {
  "logp1": -19.021363051615527, 
  "logp0": -2.3622101706377707, 
  "p0": 0.004343, 
  "p1": 9.52e-20, 
  "name": "J0024-7204U"
 }, 
 {
  "logp1": -15.823908740944319, 
  "logp0": -0.4970842323017841, 
  "p0": 0.318358, 
  "p1": 1.5e-16, 
  "name": "J0026+6320"
 }, 
 {
  "logp1": -19.991399828238084, 
  "logp0": -2.3129171553956294, 
  "p0": 0.004865, 
  "p1": 1.02e-20, 
  "name": "J0030+0451"
 }, 
 {
  "logp1": -20.30364361126667, 
  "logp0": -2.726535727378654, 
  "p0": 0.001877, 
  "p1": 4.97e-21, 
  "name": "J0034-0534"
 }, 
 {
  "logp1": -15.38933983691012, 
  "logp0": -0.02551087458241435, 
  "p0": 0.942951, 
  "p1": 4.08e-16, 
  "name": "B0031-07"
 }, 
 {
  "logp1": -14.540607512240769, 
  "logp0": 0.04852919749221087, 
  "p0": 1.118225, 
  "p1": 2.88e-15, 
  "name":...

JavaScript

"use strict";

		var data_JSON = document.getElementById('JSON').value;
		var obj = JSON.parse(data_JSON); 

		// data
		var minlogP0 = -3;
		var maxlogP0 =  1;
		var minlogP1 = -22;
		var maxlogP1 = -8;

		// graph
		var mingraphx = 50;
		var maxgraphx = 650;
		var mingraphy = 50;
		var maxgraphy = 650;

		var canvas = document.getElementById("canvas");
		console.log(canvas);
		var ctx = canvas.getContext("2d");


		var tickPositionX = [-3, -2, -1, 0, 1];
		var tickPositionTextX = ['0.001','0.01','0.1','1','10'];
		var tickPositionY = [-22, -20, -18, -16, -14, -12, -10, -8];
		var tickPositionTextY = ['1e-22','1e-20','1e-18','1e-16','1e-14','1e-12','1e-10','1e-8'];

		var transx = makeTransform([minlogP0, maxlogP0], [mingraphx, maxgraphx]);
		var transy = makeTransform([minlogP1, maxlogP1], [maxgraphy, mingraphy]);

		// function to create the needed linear transforms
		// note from and to are two element arrays (see below):
		function makeTransform(from, to){
			// determine a and b in terms of from[0], from[1], to[0] and to[1]
			var x1 = from[0];
			var x2 = from[1];
			var y1 = to[0];
			var y2 = to[1];

			var a = (y1 - y2) / (x1 - x2);
			var b = y1 - a * x1;

			return function(x){return a * x + b;};
		}

	// var identity = makeTransform([3, 10], [3, 10]);
	// console.log('(identity) putting in ' + 5 + ' gets me ' + identity(7));

	// var heen = makeTransform([0, 10], [90, 100]);
	// var terug = makeTransform([90, 100], [0, 10]);

	// console.log('terug(heen(5)) =', terug(heen(5)));

		for (var i = 0; i < obj.length; i++){
			// take "data coordinate" transform to canvas coordinate:
			var canvasX = transx(obj[i].logp0);
			var canvasY = transy(obj[i].logp1);
			// draw marker in correct spot (i.e. at canvasX, canvasY):
			ctx.beginPath();
			ctx.fillStyle = '#77AF99';
            ctx.arc(canvasX, canvasY, 1.5, 0, 2 * Math.PI);
            ctx.fill();          
		}

		// Y axis grid lines
	    for (var i = 1; i < tickPositionX.length; i ++){
	       ...