Grid lines in d3 js don't match the axes - javascript

I am trying to make a multi-line chart with d3.js in react. The plot looks fine and comes up well, but the gridlines are not aligned sometimes. It is very random, and sometimes some graphs have aligned gridlines, some don't.
This is how some of them look:
I have this code for my gridlines:
svg
.append('g')
.attr('class', 'grid')
.attr('transform', `translate(0,${height})`)
.call(
d3.axisBottom(xScale)
.tickSize(-height)
.tickFormat(() => ""),
);
svg
.append('g')
.attr('class', 'grid')
.call(
d3.axisLeft(yScale)
.tickSize(-width)
.tickFormat(() => ""),
);
I followed this example: https://betterprogramming.pub/react-d3-plotting-a-line-chart-with-tooltips-ed41a4c31f4f
Any help on how I can align those lines perfectly would be appreciated.


You may consider niceing your y-scale so that minima and maxima of your data sets are rounded down/ up such that the ticks are equally spaced.
In your tutorial this bit of code:
const yScale = d3
.scaleLinear()
.range([height, 0])
.domain([0, yMaxValue]);
Can become:
const yScale = d3
.scaleLinear()
.range([height, 0])
.domain([0, yMaxValue])
.nice(); // <--------------------------- here
Here's a basic example of using nice on an x-scale where the first example is 'not nice' and the second is 'nice'.
// note gaps of 10 between data points
// apart from first and last where gap is different
const data = [3, 4, 14, 24, 34, 44, 47];
// svg
const margin = 20;
const width = 360;
const height = 140;
const svg = d3.select("body")
.append("svg")
.attr("width", width + margin + margin)
.attr("height", height + margin + margin);
// scale without 'nice'
const xScale1 = d3.scaleLinear()
.range([0, width])
.domain(d3.extent(data));
// scale with nice
const xScale2 = d3.scaleLinear()
.range([0, width])
.domain(d3.extent(data))
.nice();
// plot axes with both scales for comparison
// not 'nice'
svg.append("g")
.attr("transform", `translate(${margin},${margin})`)
.call(d3.axisBottom(xScale1));
// 'nice'
svg.append("g")
.attr("transform", `translate(${margin},${margin + 50})`)
.call(d3.axisBottom(xScale2));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

Related

d3 : Y Axis intervals not getting set by ticks

I want to set Y Axis by 0-100 percent in the intervals of 0-25-50-75-100.
For that I am setting ticks to 4.
But I can see Y axis in the intervals of 0-20-40-60-80-100
How can I set Y axis in the intervals of 0-25-50-75-100 ??
I have below code -
const extent=[0,100];
const yScale = scaleLinear().domain(extent).range([height, 0]);
const x0Scale = scaleBand()
.domain(data.map((d) => d.month))
.range([0, width])
.padding(0.46);
const x1Scale = scaleBand()
// .domain(data.map((d) => d.type))
.rangeRound([0, x0Scale.bandwidth()])
.padding(0.22);
const xAix = axisBottom(x0Scale);
const yAix = axisLeft(yScale);
svg
.select(".x-axis")
.attr("transform", `translate(${xMargin}, ${height + yMargin})`)
.style("font-weight", "bold")
.style("font-size", "0.700rem")
.call(xAix);
svg
.select(".y-axis")
.attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)
.style("font-weight", "bold")
.style("font-size", "0.725rem")
.call(yAix.ticks(4).tickSize(-width).tickFormat(function(d){return d + "%"}));

d3 takes priority for some of the tick functions , you can do force tick Values by tickValues(d3.range(minValue, maxValue, noOfSteps)); . In your case
yAix.tickSize(-width).tickValues(d3.range(0,100,4).tickFormat(function(d){return d + "%"})
or use tickValues(d3.range(d3.min(dataarray),d3.max(dataarray),noOfticks))

Use tickValues instead of ticks.
svg
.select(".y-axis")
.attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)
.style("font-weight", "bold")
.style("font-size", "0.725rem")
.call(yAix
.ticksValues([0, 25, 50, 75, 100])
.tickSize(-width)
.tickFormat(function(d){return d + "%"}));
ticks is used as a hint only - d3 might display a few more or less ticks, depending on the scale and the available screen space.
tickValues allows you to select the exact values for which to display ticks.

d3js V6, how to use more than one left axis?

My goal its a chart with multiple Y axis.Example below
Than I try call d3.axisLeft().scale() for the second Y axis, axis is drawing but not scaled
var yscaleLvl = d3.scaleLinear()
.domain([0, d3.max(chartData, function (d) { return (d.lvlData*1.2) /10.0; } )] )
.range([height / 2, 0]);
var yscaleVolume = d3.scaleLinear()
.domain([0, d3.max(chartData, function (d) { return (d.volumeData * 1.2) / 10.0; })])
.range([height / 2, 0]);
var y_axisLvl = d3.axisLeft().scale(yscaleLvl);
svg.append("g")
.attr("transform", "translate(50, 10)")
.attr("stroke-width", 3.0)
.call(y_axisLvl);
var y_axisVolume = d3.axisLeft().scale(yscaleVolume);
svg.append("g")
.attr("transform", "translate(15, 10)")
.attr("stroke-width", 3.0)
.call(y_axisVolume);
It's possible do in the direct way, or need more trickiest way ?

The way you posted is exactly how you add more than one axis.
const yScaleA = d3.scaleLinear().domain([0,1]).range([10,190])
const yScaleB = d3.scaleLinear().domain([10,100]).range([10,190])
const yAxisA = d3.axisLeft(yScaleA)
const yAxisB = d3.axisLeft(yScaleB)
const svg = d3.select('svg')
svg.append('g').attr('transform','translate(100,0)').call(yAxisA)
svg.append('g').attr('transform','translate(50,0)').call(yAxisB)
Here is a minimal working example to demonstrate.
If you didn't achieve this result, then there is a bug somewhere else in the application.

How to Size D3 Contours

I want to resize a contour such that it fills to the size of its enclosing container. This post seems to say that I need to give the SVG a viewBox in order for it to know how to properly display the contour. If that is the appropriate course of action, how can I change other elements (such as axes) so they keep an appropriate size.
My current attempt is below which creates a contour out of a 50x50 array at threshold 0.
data = [[-69.776,-70.206,-70.503,-70.68,-70.75,-70.724,-70.613,-70.427,-70.174,-69.863,-69.501,-69.095,-68.652,-68.178,-67.676,-67.153,-66.613,-66.058,-65.492,-64.919,-64.339,-63.757,-63.172,-62.586,-62.001,-61.416,-60.831,-60.247,-59.662,-59.075,-58.486,-57.891,-57.289,-56.678,-56.052,-55.41,-54.747,-54.058,-53.337,-52.58,-51.778,-50.926,-50.016,-49.038,-47.983,-46.841,-45.602,-44.252,-42.779,-41.169],[-57.953,-58.222,-58.386,-58.455,-58.439,-58.348,-58.19,-57.973,-57.704,-57.39,-57.037,-56.65,-56.234,-55.795,-55.336,-54.861,-54.374,-53.877,-53.373,-52.864,-52.352,-51.84,-51.327,-50.815,-50.304,-49.794,-49.286,-48.779,-48.271,-47.761,-47.249,-46.73,-46.204,-45.667,-45.114,-44.543,-43.948,-43.325,-42.666,-41.967,-41.219,-40.415,-39.545,-38.601,-37.571,-36.444,-35.208,-33.849,-32.352,-30.702],[-48.121,-48.242,-48.283,-48.253,-48.159,-48.009,-47.808,-47.564,-47.281,-46.965,-46.62,-46.25,-45.86,-45.454,-45.033,-44.603,-44.164,-43.719,-43.271,-42.82,-42.37,-41.919,-41.471,-41.024,-40.58,-40.137,-39.697,-39.257,-38.817,-38.376,-37.93,-37.478,-37.018,-36.545,-36.055,-35.545,-35.008,-34.44,-33.833,-33.181,-32.476,-31.708,-30.868,-29.945,-28.928,-27.804,-26.559,-25.178,-23.644,-21.939],[-40.002,-39.986,-39.914,-39.793,-39.628,-39.424,-39.185,-38.916,-38.621,-38.303,-37.967,-37.614,-37.248,-36.871,-36.486,-36.095,-35.7,-35.303,-34.904,-34.507,-34.11,-33.716,-33.324,-32.935,-32.55,-32.167,-31.786,-31.406,-31.025,-30.643,-30.256,-29.862,-29.458,-29.04,-28.604,-28.145,-27.657,-27.135,-26.57,-25.956,-25.283,-24.541,-23.721,-22.809,-21.794,-20.661,-19.395,-17.98,-16.396,-14.625],[-33.348,-33.205,-33.03,-32.826,-32.595,-32.342,-32.069,-31.778,-31.473,-31.154,-30.826,-30.488,-30.144,-29.795,-29.442,-29.087,-28.732,-28.377,-28.023,-27.672,-27.324,-26.979,-26.638,-26.3,-25.966,-25.635,-25.306,-24.978,-24.649,-24.318,-23.982,-23.638,-23.282,-22.912,-22.521,-22.105,-21.657,-21.172,-20.64,-20.054,-19.404,-18.68,-17.869,-16.959,-15.936,-14.784,-13.486,-12.025,-10.38,-8.53],[-27.939,-27.68,-27.409,-27.129,-26.839,-26.541,-26.237,-25.927,-25.612,-25.294,-24.973,-24.65,-24.326,-24.001,-23.678,-23.356,-23.036,-22.719,-22.405,-22.095,-21.789,-21.488,-21.191,-20.899,-20.61,-20.324,-20.04,-19.757,-19.473,-19.186,-18.893,-18.592,-18.277,-17.946,-17.593,-17.212,-16.797,-16.34,-15.834,-15.268,-14.633,-13.917,-13.107,-12.189,-11.148,-9.967,-8.628,-7.11,-5.393,-3.452],[-23.58,-23.214,-22.856,-22.506,-22.162,-21.825,-21.493,-21.165,-20.843,-20.525,-20.211,-19.901,-19.595,-19.293,-18.996,-18.703,-18.415,-18.131,-17.853,-17.579,-17.311,-17.048,-16.79,-16.537,-16.287,-16.04,-15.796,-15.551,-15.306,-15.056,-14.8,-14.534,-14.254,-13.956,-13.633,-13.281,-12.891,-12.456,-11.967,-11.414,-10.786,-10.07,-9.253,-8.319,-7.251,-6.032,-4.642,-3.058,-1.258,0.785],[-20.102,-19.638,-19.2,-18.786,-18.393,-18.019,-17.662,-17.32,-16.99,-16.672,-16.365,-16.067,-15.778,-15.497,-15.223,-14.956,-14.696,-14.442,-14.195,-13.953,-13.718,-13.488,-13.264,-13.044,-12.828,-12.615,-12.404,-12.193,-11.979,-11.762,-11.536,-11.3,-11.049,-10.777,-10.479,-10.148,-9.777,-9.358,-8.88,-8.333,-7.705,-6.982,-6.15,-5.192,-4.09,-2.824,-1.373,0.286,2.179,4.334],[-17.356,-16.801,-16.29,-15.818,-15.381,-14.974,-14.594,-14.238,-13.903,-13.586,-13.285,-12.998,-12.724,-12.46,-12.207,-11.964,-11.728,-11.501,-11.28,-11.067,-10.86,-10.659,-10.464,-10.273,-10.086,-9.901,-9.718,-9.535,-9.349,-9.158,-8.958,-8.746,-8.518,-8.267,-7.988,-7.674,-7.316,-6.906,-6.433,-5.886,-5.251,-4.515,-3.661,-2.671,-1.527,-0.207,1.312,3.056,5.052,7.329],[-15.213,-14.575,-13.997,-13.472,-12.995,-12.558,-12.158,-11.79,-11.449,-11.133,-10.838,-10.561,-10.3,-10.053,-9.818,-9.595,-9.381,-9.176,-8.98,-8.79,-8.608,-8.432,-8.261,-8.095,-7.932,-7.772,-7.613,-7.453,-7.29,-7.12,-6.942,-6.749,-6.539,-6.304,-6.039,-5.736,-5.387,-4.981,-4.507,-3.954,-3.307,-2.551,-1.668,-0.641,0.553,1.935,3.531,5.368,7.475,9.884],[-13.562,-12.848,-12.209,-11.636,-11.121,-10.658,-10.24,-9.861,-9.516,-9.2,-8.91,-8.642,-8.393,-8.16,-7.942,-7.737,-7.542,-7.357,-7.18,-7.012,-6.85,-6.695,-6.545,-6.4,-6.258,-6.118,-5.979,-5.838,-5.693,-5.541,-5.379,-5.202,-5.006,-4.783,-4.528,-4.231,-3.885,-3.479,-3,-2.435,-1.771,-0.989,-0.072,1,2.249,3.701,5.382,7.32,9.548,12.099],[-12.308,-11.524,-10.829,-10.212,-9.664,-9.177,-8.742,-8.354,-8.005,-7.69,-7.405,-7.145,-6.906,-6.687,-6.483,-6.292,-6.114,-5.946,-5.787,-5.636,-5.492,-5.355,-5.222,-5.094,-4.969,-4.846,-4.723,-4.598,-4.468,-4.331,-4.182,-4.016,-3.83,-3.615,-3.365,-3.072,-2.725,-2.313,-1.824,-1.244,-0.557,0.256,1.212,2.335,3.647,5.175,6.948,8.996,11.352,14.055],[-11.37,-10.523,-9.777,-9.12,-8.542,-8.033,-7.584,-7.187,-6.834,-6.521,-6.24,-5.987,-5.757,-5.549,-5.357,-5.18,-5.016,-4.862,-4.718,-4.582,-4.453,-4.33,-4.213,-4.099,-3.988,-3.878,-3.768,-3.656,-3.538,-3.411,-3.272,-3.115,-2.935,-2.725,-2.478,-2.183,-1.832,-1.411,-0.908,-0.308,0.407,1.255,2.257,3.436,4.817,6.428,8.3,10.465,12.959,15.822],[-10.683,-9.777,-8.984,-8.291,-7.686,-7.157,-6.695,-6.29,-5.935,-5.622,-5.345,-5.098,-4.877,-4.678,-4.497,-4.331,-4.179,-4.038,-3.906,-3.782,-3.666,-3.555,-3.45,-3.348,-3.248,-3.149,-3.05,-2.947,-2.838,-2.72,-2.588,-2.436,-2.26,-2.052,-1.804,-1.505,-1.145,-0.712,-0.191,0.433,1.18,2.068,3.12,4.361,5.817,7.518,9.496,11.786,14.428,17.461],[-10.188,-9.229,-8.394,-7.668,-7.038,-6.492,-6.018,-5.607,-5.249,-4.936,-4.663,-4.421,-4.207,-4.016,-3.845,-3.689,-3.547,-3.416,-3.294,-3.181,-3.075,-2.974,-2.878,-2.786,-2.695,-2.605,-2.514,-2.418,-2.316,-2.204,-2.076,-1.928,-1.753,-1.544,-1.292,-0.986,-0.616,-0.167,0.376,1.028,1.811,2.744,3.852,5.159,6.696,8.493,10.585,13.009,15.805,19.018],[-9.842,-8.833,-7.96,-7.204,-6.552,-5.99,-5.506,-5.089,-4.728,-4.416,-4.146,-3.909,-3.701,-3.517,-3.353,-3.206,-3.072,-2.95,-2.837,-2.732,-2.634,-2.542,-2.453,-2.368,-2.285,-2.202,-2.116,-2.027,-1.929,-1.82,-1.695,-1.548,-1.373,-1.16,-0.902,-0.587,-0.202,0.266,0.833,1.517,2.34,3.322,4.49,5.87,7.494,9.394,11.607,14.172,17.132,20.534],[-9.605,-8.552,-7.644,-6.861,-6.189,-5.613,-5.12,-4.697,-4.335,-4.023,-3.755,-3.523,-3.32,-3.142,-2.985,-2.845,-2.718,-2.603,-2.497,-2.399,-2.307,-2.221,-2.139,-2.06,-1.982,-1.904,-1.823,-1.737,-1.643,-1.536,-1.412,-1.264,-1.085,-0.867,-0.601,-0.273,0.128,0.617,1.212,1.932,2.799,3.835,5.067,6.526,8.242,10.252,12.593,15.307,18.441,22.042],[-9.45,-8.356,-7.416,-6.609,-5.919,-5.33,-4.828,-4.401,-4.037,-3.726,-3.46,-3.231,-3.033,-2.861,-2.709,-2.574,-2.453,-2.344,-2.244,-2.151,-2.065,-1.984,-1.907,-1.832,-1.758,-1.683,-1.606,-1.522,-1.43,-1.323,-1.198,-1.048,-0.865,-0.64,-0.362,-0.021,0.399,0.913,1.54,2.298,3.212,4.307,5.609,7.151,8.967,11.093,13.57,16.443,19.759,23.57],[-9.353,-8.222,-7.252,-6.423,-5.717,-5.117,-4.608,-4.176,-3.811,-3.5,-3.236,-3.01,-2.816,-2.648,-2.501,-2.371,-2.255,-2.15,-2.055,-1.967,-1.885,-1.807,-1.734,-1.662,-1.591,-1.519,-1.444,-1.361,-1.269,-1.162,-1.035,-0.88,-0.691,-0.457,-0.167,0.191,0.632,1.174,1.834,2.636,3.601,4.758,6.136,7.767,9.688,11.938,14.559,17.599,21.108,25.14],[-9.295,-8.131,-7.134,-6.286,-5.565,-4.955,-4.439,-4.004,-3.637,-3.327,-3.065,-2.842,-2.651,-2.486,-2.343,-2.217,-2.105,-2.004,-1.912,-1.827,-1.748,-1.674,-1.603,-1.534,-1.465,-1.395,-1.32,-1.238,-1.145,-1.036,-0.906,-0.746,-0.549,-0.304,0,0.377,0.842,1.414,2.112,2.959,3.981,5.205,6.663,8.39,10.423,12.804,15.578,18.794,22.506,26.771],[-9.265,-8.069,-7.049,-6.182,-5.448,-4.829,-4.308,-3.869,-3.501,-3.192,-2.931,-2.71,-2.522,-2.361,-2.221,-2.098,-1.989,-1.891,-1.802,-1.72,-1.644,-1.571,-1.502,-1.435,-1.367,-1.298,-1.223,-1.141,-1.046,-0.934,-0.799,-0.633,-0.426,-0.169,0.151,0.549,1.041,1.645,2.384,3.281,4.363,5.66,7.204,9.033,11.185,13.705,16.641,20.043,23.969,28.48],[-9.251,-8.027,-6.985,-6.102,-5.357,-4.729,-4.203,-3.762,-3.393,-3.084,-2.824,-2.605,-2.42,-2.261,-2.124,-2.004,-1.897,-1.802,-1.715,-1.635,-1.56,-1.49,-1.422,-1.356,-1.289,-1.219,-1.144,-1.06,-0.963,-0.848,-0.707,-0.533,-0.316,-0.044,0.294,0.715,1.236,1.877,2.66,3.611,4.758,6.133,7.769,9.706,11.986,14.654,17.761,21.36,25.513,30.281],[-9.248,-7.998,-6.937,-6.039,-5.283,-4.648,-4.117,-3.674,-3.304,-2.995,-2.737,-2.52,-2.336,-2.18,-2.045,-1.927,-1.823,-1.729,-1.644,-1.565,-1.492,-1.423,-1.356,-1.29,-1.223,-1.153,-1.077,-0.991,-0.891,-0.77,-0.623,-0.439,-0.21,0.077,0.436,0.883,1.436,2.116,2.948,3.957,5.175,6.632,8.368,10.421,12.835,15.661,18.949,22.757,27.148,32.189],[-9.25,-7.976,-6.897,-5.986,-5.221,-4.58,-4.045,-3.6,-3.229,-2.921,-2.664,-2.448,-2.266,-2.112,-1.979,-1.862,-1.76,-1.668,-1.584,-1.506,-1.434,-1.365,-1.299,-1.233,-1.165,-1.094,-1.017,-0.928,-0.823,-0.697,-0.542,-0.348,-0.105,0.2,0.582,1.057,1.646,2.369,3.254,4.326,5.619,7.167,9.008,11.185,13.744,16.736,20.217,24.247,28.89,34.218],[-9.254,-7.959,-6.864,-5.941,-5.167,-4.521,-3.982,-3.535,-3.164,-2.856,-2.6,-2.386,-2.206,-2.053,-1.921,-1.806,-1.705,-1.614,-1.531,-1.455,-1.383,-1.314,-1.248,-1.181,-1.113,-1.04,-0.96,-0.868,-0.758,-0.625,-0.46,-0.254,0.005,0.33,0.737,1.243,1.871,2.642,3.583,4.725,6.099,7.743,9.698,12.007,14.721,17.891,21.577,25.841,30.751,36.382],[-9.259,-7.945,-6.834,-5.901,-5.119,-4.468,-3.927,-3.478,-3.106,-2.799,-2.543,-2.331,-2.152,-2,-1.87,-1.756,-1.656,-1.566,-1.483,-1.407,-1.336,-1.267,-1.2,-1.133,-1.063,-0.988,-0.905,-0.808,-0.692,-0.551,-0.375,-0.155,0.122,0.469,0.905,1.446,2.116,2.939,3.943,5.159,6.622,8.371,10.447,12.899,15.777,19.137,23.041,27.553,32.747,38.698],[-9.263,-7.93,-6.807,-5.864,-5.075,-4.419,-3.875,-3.425,-3.054,-2.746,-2.492,-2.28,-2.102,-1.952,-1.822,-1.71,-1.61,-1.52,-1.439,-1.363,-1.291,-1.222,-1.154,-1.085,-1.014,-0.936,-0.848,-0.746,-0.623,-0.472,-0.284,-0.047,0.25,0.623,1.09,1.671,2.388,3.268,4.34,5.637,7.196,9.057,11.265,13.87,16.924,20.487,24.622,29.399,34.893,41.183],[-9.264,-7.916,-6.78,-5.828,-5.033,-4.374,-3.827,-3.376,-3.004,-2.697,-2.443,-2.232,-2.055,-1.906,-1.777,-1.665,-1.566,-1.477,-1.395,-1.318,-1.246,-1.176,-1.107,-1.036,-0.962,-0.88,-0.787,-0.678,-0.546,-0.384,-0.181,0.074,0.395,0.797,1.299,1.923,2.692,3.635,4.782,6.168,7.831,9.814,12.164,14.932,18.175,21.955,26.337,31.395,37.208,43.858],[-9.263,-7.9,-6.752,-5.792,-4.993,-4.329,-3.781,-3.328,-2.956,-2.649,-2.396,-2.186,-2.01,-1.861,-1.733,-1.621,-1.522,-1.432,-1.35,-1.273,-1.2,-1.128,-1.057,-0.983,-0.905,-0.819,-0.719,-0.602,-0.46,-0.283,-0.063,0.213,0.56,0.995,1.537,2.209,3.037,4.049,5.278,6.761,8.537,10.652,13.155,16.1,19.546,23.557,28.203,33.561,39.711,46.743],[-9.258,-7.881,-6.724,-5.756,-4.951,-4.284,-3.734,-3.281,-2.908,-2.602,-2.349,-2.139,-1.963,-1.814,-1.687,-1.575,-1.475,-1.385,-1.302,-1.224,-1.149,-1.075,-1.001,-0.924,-0.841,-0.748,-0.641,-0.513,-0.358,-0.165,0.075,0.376,0.754,1.226,1.813,2.539,3.431,4.519,5.839,7.427,9.327,11.585,14.253,17.388,21.052,25.312,30.24,35.917,42.427,49.863],[-9.249,-7.859,-6.692,-5.718,-4.908,-4.238,-3.686,-3.232,-2.859,-2.553,-2.3,-2.09,-1.914,-1.765,-1.637,-1.525,-1.425,-1.334,-1.249,-1.169,-1.091,-1.015,-0.936,-0.854,-0.765,-0.664,-0.547,-0.407,-0.236,-0.025,0.239,0.569,0.982,1.496,2.134,2.92,3.884,5.057,6.476,8.18,10.215,12.628,15.476,18.816,22.714,27.24,32.47,38.488,45.381,53.246],[-9.235,-7.832,-6.657,-5.676,-4.862,-4.189,-3.635,-3.18,-2.807,-2.5,-2.247,-2.037,-1.861,-1.711,-1.583,-1.469,-1.368,-1.275,-1.188,-1.105,-1.024,-0.943,-0.859,-0.77,-0.673,-0.562,-0.433,-0.278,-0.088,0.146,0.437,0.8,1.253,1.815,2.51,3.365,4.408,5.675,7.203,9.035,11.216,13.799,16.841,20.403,24.553,29.364,34.917,41.298,48.6,56.922],[-9.214,-7.801,-6.617,-5.63,-4.812,-4.136,-3.58,-3.124,-2.75,-2.442,-2.188,-1.978,-1.801,-1.65,-1.52,-1.405,-1.301,-1.206,-1.115,-1.029,-0.943,-0.856,-0.765,-0.668,-0.561,-0.437,-0.293,-0.12,0.092,0.353,0.676,1.078,1.577,2.194,2.953,3.884,5.017,6.387,8.036,10.007,12.349,15.116,18.368,22.169,26.591,31.71,37.609,44.378,52.114,60.922],[-9.187,-7.763,-6.571,-5.579,-4.757,-4.078,-3.52,-3.062,-2.687,-2.378,-2.123,-1.911,-1.733,-1.581,-1.448,-1.33,-1.223,-1.124,-1.029,-0.937,-0.845,-0.751,-0.651,-0.543,-0.423,-0.284,-0.122,0.074,0.312,0.604,0.965,1.411,1.963,2.642,3.475,4.49,5.723,7.209,8.99,11.114,13.632,16.6,20.08,24.14,28.855,34.303,40.573,47.757,55.957,65.282],[-9.155,-7.721,-6.521,-5.523,-4.697,-4.015,-3.455,-2.995,-2.617,-2.307,-2.051,-1.837,-1.656,-1.501,-1.365,-1.244,-1.132,-1.028,-0.927,-0.828,-0.727,-0.623,-0.512,-0.391,-0.255,-0.098,0.088,0.309,0.579,0.908,1.313,1.81,2.422,3.172,4.087,5.198,6.541,8.155,10.084,12.376,15.085,18.272,22,26.34,31.37,37.173,43.84,51.469,60.164,70.038],[-9.118,-7.674,-6.467,-5.463,-4.632,-3.947,-3.384,-2.922,-2.542,-2.229,-1.97,-1.754,-1.57,-1.411,-1.271,-1.144,-1.027,-0.915,-0.807,-0.698,-0.587,-0.471,-0.346,-0.208,-0.052,0.128,0.34,0.593,0.9,1.272,1.728,2.285,2.965,3.795,4.803,6.021,7.488,9.243,11.334,13.811,16.73,20.155,24.151,28.795,34.165,40.35,47.443,55.547,64.77,75.23],[-9.08,-7.626,-6.412,-5.402,-4.567,-3.878,-3.311,-2.846,-2.463,-2.147,-1.884,-1.664,-1.475,-1.311,-1.165,-1.032,-0.906,-0.786,-0.668,-0.548,-0.423,-0.292,-0.149,0.01,0.189,0.397,0.641,0.932,1.281,1.704,2.218,2.843,3.603,4.523,5.635,6.974,8.578,10.49,12.759,15.439,18.588,22.272,26.56,31.532,37.269,43.864,51.415,60.027,69.814,80.898],[-9.046,-7.583,-6.361,-5.345,-4.504,-3.811,-3.24,-2.771,-2.384,-2.064,-1.796,-1.57,-1.376,-1.205,-1.051,-0.909,-0.774,-0.642,-0.511,-0.377,-0.236,-0.085,0.079,0.263,0.471,0.712,0.994,1.329,1.729,2.211,2.792,3.495,4.344,5.367,6.597,8.069,9.826,11.911,14.377,17.28,20.68,24.646,29.252,34.577,40.711,47.748,55.789,64.945,75.334,87.084],[-9.024,-7.551,-6.322,-5.299,-4.453,-3.754,-3.179,-2.704,-2.312,-1.986,-1.713,-1.48,-1.277,-1.098,-0.934,-0.781,-0.634,-0.488,-0.341,-0.188,-0.027,0.147,0.337,0.551,0.793,1.073,1.401,1.787,2.247,2.796,3.455,4.247,5.197,6.336,7.697,9.32,11.246,13.523,16.206,19.352,23.027,27.3,32.25,37.959,44.52,52.031,60.599,70.337,81.37,93.828],[-9.027,-7.544,-6.306,-5.276,-4.424,-3.719,-3.137,-2.656,-2.258,-1.925,-1.643,-1.401,-1.189,-0.999,-0.823,-0.656,-0.493,-0.33,-0.163,0.011,0.197,0.399,0.621,0.871,1.154,1.48,1.86,2.307,2.835,3.463,4.211,5.103,6.168,7.437,8.946,10.735,12.849,15.339,18.26,21.674,25.648,30.255,35.578,41.703,48.724,56.746,65.878,76.24,87.958,101.171],[-9.069,-7.576,-6.329,-5.292,-4.432,-3.72,-3.131,-2.642,-2.235,-1.893,-1.602,-1.349,-1.125,-0.921,-0.729,-0.545,-0.364,-0.18,0.011,0.212,0.428,0.663,0.923,1.215,1.546,1.927,2.369,2.885,3.492,4.209,5.059,6.066,7.26,8.675,10.349,12.323,14.646,17.37,20.553,24.259,28.56,33.531,39.258,45.831,53.349,61.92,71.657,82.686,95.138,109.155],[-9.174,-7.67,-6.414,-5.367,-4.498,-3.778,-3.18,-2.682,-2.265,-1.912,-1.608,-1.342,-1.103,-0.882,-0.672,-0.467,-0.263,-0.053,0.166,0.399,0.65,0.925,1.23,1.572,1.96,2.404,2.917,3.514,4.212,5.031,5.995,7.132,8.472,10.051,11.908,14.089,16.642,19.623,23.093,27.12,31.776,37.143,43.308,50.365,58.419,67.579,77.966,89.708,102.942,117.816],[-9.369,-7.854,-6.586,-5.53,-4.651,-3.92,-3.312,-2.803,-2.373,-2.006,-1.688,-1.405,-1.148,-0.907,-0.674,-0.445,-0.213,0.027,0.28,0.551,0.844,1.166,1.524,1.924,2.378,2.896,3.491,4.18,4.982,5.917,7.012,8.294,9.798,11.559,13.621,16.03,18.837,22.102,25.887,30.263,35.307,41.103,47.742,55.323,63.953,73.747,84.83,97.334,111.404,127.19],[-9.69,-8.162,-6.883,-5.815,-4.924,-4.182,-3.56,-3.038,-2.593,-2.21,-1.874,-1.571,-1.292,-1.027,-0.768,-0.509,-0.244,0.033,0.326,0.641,0.984,1.361,1.779,2.248,2.778,3.38,4.07,4.865,5.784,6.851,8.093,9.539,11.226,13.191,15.479,18.14,21.228,24.804,28.934,33.692,39.158,45.419,52.571,60.716,69.966,80.441,92.269,105.589,120.55,137.308],[-10.181,-8.64,-7.347,-6.266,-5.362,-4.605,-3.969,-3.43,-2.968,-2.565,-2.207,-1.881,-1.576,-1.282,-0.991,-0.697,-0.394,-0.074,0.266,0.633,1.034,1.475,1.964,2.512,3.129,3.828,4.626,5.541,6.594,7.809,9.216,10.846,12.736,14.928,17.468,20.407,23.804,27.72,32.227,37.401,43.325,50.091,57.797,66.551,76.468,87.673,100.3,114.491,130.402,148.194],[-10.898,-9.341,-8.034,-6.938,-6.018,-5.245,-4.591,-4.032,-3.549,-3.124,-2.74,-2.386,-2.05,-1.722,-1.394,-1.059,-0.71,-0.341,0.054,0.482,0.95,1.465,2.036,2.674,3.391,4.201,5.122,6.172,7.376,8.758,10.35,12.185,14.303,16.746,19.563,22.809,26.544,30.834,35.753,41.379,47.801,55.113,63.418,72.827,83.461,95.449,108.93,124.053,140.976,159.869],[-11.905,-10.332,-9.008,-7.895,-6.957,-6.165,-5.49,-4.909,-4.401,-3.948,-3.535,-3.148,-2.776,-2.408,-2.037,-1.654,-1.252,-0.825,-0.366,0.132,0.677,1.277,1.942,2.683,3.514,4.45,5.51,6.714,8.087,9.656,11.455,13.518,15.888,18.608,21.732,25.315,29.422,34.12,39.486,45.605,52.566,60.468,69.419,79.534,90.939,103.766,118.161,134.277,152.279,172.343],[-13.283,-11.691,-10.349,-9.216,-8.258,-7.443,-6.743,-6.136,-5.599,-5.115,-4.667,-4.241,-3.827,-3.413,-2.991,-2.553,-2.09,-1.596,-1.064,-0.485,0.148,0.845,1.617,2.475,3.436,4.514,5.73,7.107,8.67,10.449,12.478,14.795,17.443,20.47,23.931,27.884,32.396,37.54,43.394,50.047,57.592,66.132,75.779,86.654,98.884,112.611,127.982,145.159,164.31,185.619],[-15.125,-13.513,-12.149,-10.994,-10.011,-9.171,-8.443,-7.805,-7.235,-6.714,-6.225,-5.755,-5.292,-4.826,-4.345,-3.843,-3.31,-2.739,-2.123,-1.452,-0.718,0.09,0.983,1.974,3.081,4.319,5.712,7.282,9.057,11.069,13.353,15.951,18.906,22.271,26.102,30.461,35.417,41.045,47.43,54.662,62.838,72.067,82.464,94.154,107.271,121.96,138.375,156.681,177.057,199.688],[-17.541,-15.906,-14.518,-13.337,-12.328,-11.457,-10.697,-10.024,-9.415,-8.851,-8.316,-7.795,-7.276,-6.748,-6.2,-5.625,-5.012,-4.354,-3.641,-2.866,-2.017,-1.084,-0.054,1.088,2.358,3.777,5.366,7.152,9.163,11.434,14.001,16.909,20.204,23.94,28.176,32.978,38.417,44.574,51.534,59.392,68.251,78.222,89.426,101.991,116.058,131.775,149.304,168.816,190.493,214.529]]
var data_width = data[0].length;
var data_height = data.length;
var margin = { top: 20, right: 20, bottom: 40, left: 40 };
var height = 300 - margin.top - margin.bottom;
var width = 300 - margin.left - margin.right;
const hypothesis = [].concat.apply([], data);
var xScale = d3.scaleLinear()
.domain([0, 1000])
.range([0, width]);
var xAxis = d3.axisBottom(xScale).ticks(10);
var yScale = d3.scaleLinear()
.domain([0, 1000])
.range([height, 0]);
var yAxis = d3.axisLeft(yScale).ticks(10);
var svg = d3.select('#container')
.append('svg')
// .attr("viewBox", [0, 0, 50, 50]) This does not give my intended behavior
.attr("width", 300)
.attr("height", 300)
var chartArea = svg.append('g')
.attr('id','chart-area')
.attr('transform', `translate(${margin.left},${margin.top})`);
svg.select('#chart-area')
.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
svg.select('#chart-area')
.append('g')
.attr('class', 'y-axis')
.call(yAxis);
const path = d3.geoPath();
const contours = d3.contours().size([50, 50])
.thresholds([0]);
var g = chartArea.append("g")
.attr("stroke", "black")
.attr("stroke-width", 0.5)
.attr("fill", "none");
g.selectAll(null)
.data(contours(hypothesis))
.enter()
.append("path")
.attr("d", path);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="container">
</div>

I normally never add a second answer (I usually edit the first one instead), but this is a specific situation: in the first answer I said that adding a custom projection would be a lot of work... well, I stand corrected: using a projection is actually way easier than my proposed solution with d3.line().
Here's all you need (set the fitSize array according to your needs):
const projection = d3.geoIdentity()
.fitSize([200,200], contours(hypothesis)[0])
Then, just pass that projection to d3.geoPath():
const path = d3.geoPath()
.projection(projection);
And here is your code with that change only:
data = [[-69.776,-70.206,-70.503,-70.68,-70.75,-70.724,-70.613,-70.427,-70.174,-69.863,-69.501,-69.095,-68.652,-68.178,-67.676,-67.153,-66.613,-66.058,-65.492,-64.919,-64.339,-63.757,-63.172,-62.586,-62.001,-61.416,-60.831,-60.247,-59.662,-59.075,-58.486,-57.891,-57.289,-56.678,-56.052,-55.41,-54.747,-54.058,-53.337,-52.58,-51.778,-50.926,-50.016,-49.038,-47.983,-46.841,-45.602,-44.252,-42.779,-41.169],[-57.953,-58.222,-58.386,-58.455,-58.439,-58.348,-58.19,-57.973,-57.704,-57.39,-57.037,-56.65,-56.234,-55.795,-55.336,-54.861,-54.374,-53.877,-53.373,-52.864,-52.352,-51.84,-51.327,-50.815,-50.304,-49.794,-49.286,-48.779,-48.271,-47.761,-47.249,-46.73,-46.204,-45.667,-45.114,-44.543,-43.948,-43.325,-42.666,-41.967,-41.219,-40.415,-39.545,-38.601,-37.571,-36.444,-35.208,-33.849,-32.352,-30.702],[-48.121,-48.242,-48.283,-48.253,-48.159,-48.009,-47.808,-47.564,-47.281,-46.965,-46.62,-46.25,-45.86,-45.454,-45.033,-44.603,-44.164,-43.719,-43.271,-42.82,-42.37,-41.919,-41.471,-41.024,-40.58,-40.137,-39.697,-39.257,-38.817,-38.376,-37.93,-37.478,-37.018,-36.545,-36.055,-35.545,-35.008,-34.44,-33.833,-33.181,-32.476,-31.708,-30.868,-29.945,-28.928,-27.804,-26.559,-25.178,-23.644,-21.939],[-40.002,-39.986,-39.914,-39.793,-39.628,-39.424,-39.185,-38.916,-38.621,-38.303,-37.967,-37.614,-37.248,-36.871,-36.486,-36.095,-35.7,-35.303,-34.904,-34.507,-34.11,-33.716,-33.324,-32.935,-32.55,-32.167,-31.786,-31.406,-31.025,-30.643,-30.256,-29.862,-29.458,-29.04,-28.604,-28.145,-27.657,-27.135,-26.57,-25.956,-25.283,-24.541,-23.721,-22.809,-21.794,-20.661,-19.395,-17.98,-16.396,-14.625],[-33.348,-33.205,-33.03,-32.826,-32.595,-32.342,-32.069,-31.778,-31.473,-31.154,-30.826,-30.488,-30.144,-29.795,-29.442,-29.087,-28.732,-28.377,-28.023,-27.672,-27.324,-26.979,-26.638,-26.3,-25.966,-25.635,-25.306,-24.978,-24.649,-24.318,-23.982,-23.638,-23.282,-22.912,-22.521,-22.105,-21.657,-21.172,-20.64,-20.054,-19.404,-18.68,-17.869,-16.959,-15.936,-14.784,-13.486,-12.025,-10.38,-8.53],[-27.939,-27.68,-27.409,-27.129,-26.839,-26.541,-26.237,-25.927,-25.612,-25.294,-24.973,-24.65,-24.326,-24.001,-23.678,-23.356,-23.036,-22.719,-22.405,-22.095,-21.789,-21.488,-21.191,-20.899,-20.61,-20.324,-20.04,-19.757,-19.473,-19.186,-18.893,-18.592,-18.277,-17.946,-17.593,-17.212,-16.797,-16.34,-15.834,-15.268,-14.633,-13.917,-13.107,-12.189,-11.148,-9.967,-8.628,-7.11,-5.393,-3.452],[-23.58,-23.214,-22.856,-22.506,-22.162,-21.825,-21.493,-21.165,-20.843,-20.525,-20.211,-19.901,-19.595,-19.293,-18.996,-18.703,-18.415,-18.131,-17.853,-17.579,-17.311,-17.048,-16.79,-16.537,-16.287,-16.04,-15.796,-15.551,-15.306,-15.056,-14.8,-14.534,-14.254,-13.956,-13.633,-13.281,-12.891,-12.456,-11.967,-11.414,-10.786,-10.07,-9.253,-8.319,-7.251,-6.032,-4.642,-3.058,-1.258,0.785],[-20.102,-19.638,-19.2,-18.786,-18.393,-18.019,-17.662,-17.32,-16.99,-16.672,-16.365,-16.067,-15.778,-15.497,-15.223,-14.956,-14.696,-14.442,-14.195,-13.953,-13.718,-13.488,-13.264,-13.044,-12.828,-12.615,-12.404,-12.193,-11.979,-11.762,-11.536,-11.3,-11.049,-10.777,-10.479,-10.148,-9.777,-9.358,-8.88,-8.333,-7.705,-6.982,-6.15,-5.192,-4.09,-2.824,-1.373,0.286,2.179,4.334],[-17.356,-16.801,-16.29,-15.818,-15.381,-14.974,-14.594,-14.238,-13.903,-13.586,-13.285,-12.998,-12.724,-12.46,-12.207,-11.964,-11.728,-11.501,-11.28,-11.067,-10.86,-10.659,-10.464,-10.273,-10.086,-9.901,-9.718,-9.535,-9.349,-9.158,-8.958,-8.746,-8.518,-8.267,-7.988,-7.674,-7.316,-6.906,-6.433,-5.886,-5.251,-4.515,-3.661,-2.671,-1.527,-0.207,1.312,3.056,5.052,7.329],[-15.213,-14.575,-13.997,-13.472,-12.995,-12.558,-12.158,-11.79,-11.449,-11.133,-10.838,-10.561,-10.3,-10.053,-9.818,-9.595,-9.381,-9.176,-8.98,-8.79,-8.608,-8.432,-8.261,-8.095,-7.932,-7.772,-7.613,-7.453,-7.29,-7.12,-6.942,-6.749,-6.539,-6.304,-6.039,-5.736,-5.387,-4.981,-4.507,-3.954,-3.307,-2.551,-1.668,-0.641,0.553,1.935,3.531,5.368,7.475,9.884],[-13.562,-12.848,-12.209,-11.636,-11.121,-10.658,-10.24,-9.861,-9.516,-9.2,-8.91,-8.642,-8.393,-8.16,-7.942,-7.737,-7.542,-7.357,-7.18,-7.012,-6.85,-6.695,-6.545,-6.4,-6.258,-6.118,-5.979,-5.838,-5.693,-5.541,-5.379,-5.202,-5.006,-4.783,-4.528,-4.231,-3.885,-3.479,-3,-2.435,-1.771,-0.989,-0.072,1,2.249,3.701,5.382,7.32,9.548,12.099],[-12.308,-11.524,-10.829,-10.212,-9.664,-9.177,-8.742,-8.354,-8.005,-7.69,-7.405,-7.145,-6.906,-6.687,-6.483,-6.292,-6.114,-5.946,-5.787,-5.636,-5.492,-5.355,-5.222,-5.094,-4.969,-4.846,-4.723,-4.598,-4.468,-4.331,-4.182,-4.016,-3.83,-3.615,-3.365,-3.072,-2.725,-2.313,-1.824,-1.244,-0.557,0.256,1.212,2.335,3.647,5.175,6.948,8.996,11.352,14.055],[-11.37,-10.523,-9.777,-9.12,-8.542,-8.033,-7.584,-7.187,-6.834,-6.521,-6.24,-5.987,-5.757,-5.549,-5.357,-5.18,-5.016,-4.862,-4.718,-4.582,-4.453,-4.33,-4.213,-4.099,-3.988,-3.878,-3.768,-3.656,-3.538,-3.411,-3.272,-3.115,-2.935,-2.725,-2.478,-2.183,-1.832,-1.411,-0.908,-0.308,0.407,1.255,2.257,3.436,4.817,6.428,8.3,10.465,12.959,15.822],[-10.683,-9.777,-8.984,-8.291,-7.686,-7.157,-6.695,-6.29,-5.935,-5.622,-5.345,-5.098,-4.877,-4.678,-4.497,-4.331,-4.179,-4.038,-3.906,-3.782,-3.666,-3.555,-3.45,-3.348,-3.248,-3.149,-3.05,-2.947,-2.838,-2.72,-2.588,-2.436,-2.26,-2.052,-1.804,-1.505,-1.145,-0.712,-0.191,0.433,1.18,2.068,3.12,4.361,5.817,7.518,9.496,11.786,14.428,17.461],[-10.188,-9.229,-8.394,-7.668,-7.038,-6.492,-6.018,-5.607,-5.249,-4.936,-4.663,-4.421,-4.207,-4.016,-3.845,-3.689,-3.547,-3.416,-3.294,-3.181,-3.075,-2.974,-2.878,-2.786,-2.695,-2.605,-2.514,-2.418,-2.316,-2.204,-2.076,-1.928,-1.753,-1.544,-1.292,-0.986,-0.616,-0.167,0.376,1.028,1.811,2.744,3.852,5.159,6.696,8.493,10.585,13.009,15.805,19.018],[-9.842,-8.833,-7.96,-7.204,-6.552,-5.99,-5.506,-5.089,-4.728,-4.416,-4.146,-3.909,-3.701,-3.517,-3.353,-3.206,-3.072,-2.95,-2.837,-2.732,-2.634,-2.542,-2.453,-2.368,-2.285,-2.202,-2.116,-2.027,-1.929,-1.82,-1.695,-1.548,-1.373,-1.16,-0.902,-0.587,-0.202,0.266,0.833,1.517,2.34,3.322,4.49,5.87,7.494,9.394,11.607,14.172,17.132,20.534],[-9.605,-8.552,-7.644,-6.861,-6.189,-5.613,-5.12,-4.697,-4.335,-4.023,-3.755,-3.523,-3.32,-3.142,-2.985,-2.845,-2.718,-2.603,-2.497,-2.399,-2.307,-2.221,-2.139,-2.06,-1.982,-1.904,-1.823,-1.737,-1.643,-1.536,-1.412,-1.264,-1.085,-0.867,-0.601,-0.273,0.128,0.617,1.212,1.932,2.799,3.835,5.067,6.526,8.242,10.252,12.593,15.307,18.441,22.042],[-9.45,-8.356,-7.416,-6.609,-5.919,-5.33,-4.828,-4.401,-4.037,-3.726,-3.46,-3.231,-3.033,-2.861,-2.709,-2.574,-2.453,-2.344,-2.244,-2.151,-2.065,-1.984,-1.907,-1.832,-1.758,-1.683,-1.606,-1.522,-1.43,-1.323,-1.198,-1.048,-0.865,-0.64,-0.362,-0.021,0.399,0.913,1.54,2.298,3.212,4.307,5.609,7.151,8.967,11.093,13.57,16.443,19.759,23.57],[-9.353,-8.222,-7.252,-6.423,-5.717,-5.117,-4.608,-4.176,-3.811,-3.5,-3.236,-3.01,-2.816,-2.648,-2.501,-2.371,-2.255,-2.15,-2.055,-1.967,-1.885,-1.807,-1.734,-1.662,-1.591,-1.519,-1.444,-1.361,-1.269,-1.162,-1.035,-0.88,-0.691,-0.457,-0.167,0.191,0.632,1.174,1.834,2.636,3.601,4.758,6.136,7.767,9.688,11.938,14.559,17.599,21.108,25.14],[-9.295,-8.131,-7.134,-6.286,-5.565,-4.955,-4.439,-4.004,-3.637,-3.327,-3.065,-2.842,-2.651,-2.486,-2.343,-2.217,-2.105,-2.004,-1.912,-1.827,-1.748,-1.674,-1.603,-1.534,-1.465,-1.395,-1.32,-1.238,-1.145,-1.036,-0.906,-0.746,-0.549,-0.304,0,0.377,0.842,1.414,2.112,2.959,3.981,5.205,6.663,8.39,10.423,12.804,15.578,18.794,22.506,26.771],[-9.265,-8.069,-7.049,-6.182,-5.448,-4.829,-4.308,-3.869,-3.501,-3.192,-2.931,-2.71,-2.522,-2.361,-2.221,-2.098,-1.989,-1.891,-1.802,-1.72,-1.644,-1.571,-1.502,-1.435,-1.367,-1.298,-1.223,-1.141,-1.046,-0.934,-0.799,-0.633,-0.426,-0.169,0.151,0.549,1.041,1.645,2.384,3.281,4.363,5.66,7.204,9.033,11.185,13.705,16.641,20.043,23.969,28.48],[-9.251,-8.027,-6.985,-6.102,-5.357,-4.729,-4.203,-3.762,-3.393,-3.084,-2.824,-2.605,-2.42,-2.261,-2.124,-2.004,-1.897,-1.802,-1.715,-1.635,-1.56,-1.49,-1.422,-1.356,-1.289,-1.219,-1.144,-1.06,-0.963,-0.848,-0.707,-0.533,-0.316,-0.044,0.294,0.715,1.236,1.877,2.66,3.611,4.758,6.133,7.769,9.706,11.986,14.654,17.761,21.36,25.513,30.281],[-9.248,-7.998,-6.937,-6.039,-5.283,-4.648,-4.117,-3.674,-3.304,-2.995,-2.737,-2.52,-2.336,-2.18,-2.045,-1.927,-1.823,-1.729,-1.644,-1.565,-1.492,-1.423,-1.356,-1.29,-1.223,-1.153,-1.077,-0.991,-0.891,-0.77,-0.623,-0.439,-0.21,0.077,0.436,0.883,1.436,2.116,2.948,3.957,5.175,6.632,8.368,10.421,12.835,15.661,18.949,22.757,27.148,32.189],[-9.25,-7.976,-6.897,-5.986,-5.221,-4.58,-4.045,-3.6,-3.229,-2.921,-2.664,-2.448,-2.266,-2.112,-1.979,-1.862,-1.76,-1.668,-1.584,-1.506,-1.434,-1.365,-1.299,-1.233,-1.165,-1.094,-1.017,-0.928,-0.823,-0.697,-0.542,-0.348,-0.105,0.2,0.582,1.057,1.646,2.369,3.254,4.326,5.619,7.167,9.008,11.185,13.744,16.736,20.217,24.247,28.89,34.218],[-9.254,-7.959,-6.864,-5.941,-5.167,-4.521,-3.982,-3.535,-3.164,-2.856,-2.6,-2.386,-2.206,-2.053,-1.921,-1.806,-1.705,-1.614,-1.531,-1.455,-1.383,-1.314,-1.248,-1.181,-1.113,-1.04,-0.96,-0.868,-0.758,-0.625,-0.46,-0.254,0.005,0.33,0.737,1.243,1.871,2.642,3.583,4.725,6.099,7.743,9.698,12.007,14.721,17.891,21.577,25.841,30.751,36.382],[-9.259,-7.945,-6.834,-5.901,-5.119,-4.468,-3.927,-3.478,-3.106,-2.799,-2.543,-2.331,-2.152,-2,-1.87,-1.756,-1.656,-1.566,-1.483,-1.407,-1.336,-1.267,-1.2,-1.133,-1.063,-0.988,-0.905,-0.808,-0.692,-0.551,-0.375,-0.155,0.122,0.469,0.905,1.446,2.116,2.939,3.943,5.159,6.622,8.371,10.447,12.899,15.777,19.137,23.041,27.553,32.747,38.698],[-9.263,-7.93,-6.807,-5.864,-5.075,-4.419,-3.875,-3.425,-3.054,-2.746,-2.492,-2.28,-2.102,-1.952,-1.822,-1.71,-1.61,-1.52,-1.439,-1.363,-1.291,-1.222,-1.154,-1.085,-1.014,-0.936,-0.848,-0.746,-0.623,-0.472,-0.284,-0.047,0.25,0.623,1.09,1.671,2.388,3.268,4.34,5.637,7.196,9.057,11.265,13.87,16.924,20.487,24.622,29.399,34.893,41.183],[-9.264,-7.916,-6.78,-5.828,-5.033,-4.374,-3.827,-3.376,-3.004,-2.697,-2.443,-2.232,-2.055,-1.906,-1.777,-1.665,-1.566,-1.477,-1.395,-1.318,-1.246,-1.176,-1.107,-1.036,-0.962,-0.88,-0.787,-0.678,-0.546,-0.384,-0.181,0.074,0.395,0.797,1.299,1.923,2.692,3.635,4.782,6.168,7.831,9.814,12.164,14.932,18.175,21.955,26.337,31.395,37.208,43.858],[-9.263,-7.9,-6.752,-5.792,-4.993,-4.329,-3.781,-3.328,-2.956,-2.649,-2.396,-2.186,-2.01,-1.861,-1.733,-1.621,-1.522,-1.432,-1.35,-1.273,-1.2,-1.128,-1.057,-0.983,-0.905,-0.819,-0.719,-0.602,-0.46,-0.283,-0.063,0.213,0.56,0.995,1.537,2.209,3.037,4.049,5.278,6.761,8.537,10.652,13.155,16.1,19.546,23.557,28.203,33.561,39.711,46.743],[-9.258,-7.881,-6.724,-5.756,-4.951,-4.284,-3.734,-3.281,-2.908,-2.602,-2.349,-2.139,-1.963,-1.814,-1.687,-1.575,-1.475,-1.385,-1.302,-1.224,-1.149,-1.075,-1.001,-0.924,-0.841,-0.748,-0.641,-0.513,-0.358,-0.165,0.075,0.376,0.754,1.226,1.813,2.539,3.431,4.519,5.839,7.427,9.327,11.585,14.253,17.388,21.052,25.312,30.24,35.917,42.427,49.863],[-9.249,-7.859,-6.692,-5.718,-4.908,-4.238,-3.686,-3.232,-2.859,-2.553,-2.3,-2.09,-1.914,-1.765,-1.637,-1.525,-1.425,-1.334,-1.249,-1.169,-1.091,-1.015,-0.936,-0.854,-0.765,-0.664,-0.547,-0.407,-0.236,-0.025,0.239,0.569,0.982,1.496,2.134,2.92,3.884,5.057,6.476,8.18,10.215,12.628,15.476,18.816,22.714,27.24,32.47,38.488,45.381,53.246],[-9.235,-7.832,-6.657,-5.676,-4.862,-4.189,-3.635,-3.18,-2.807,-2.5,-2.247,-2.037,-1.861,-1.711,-1.583,-1.469,-1.368,-1.275,-1.188,-1.105,-1.024,-0.943,-0.859,-0.77,-0.673,-0.562,-0.433,-0.278,-0.088,0.146,0.437,0.8,1.253,1.815,2.51,3.365,4.408,5.675,7.203,9.035,11.216,13.799,16.841,20.403,24.553,29.364,34.917,41.298,48.6,56.922],[-9.214,-7.801,-6.617,-5.63,-4.812,-4.136,-3.58,-3.124,-2.75,-2.442,-2.188,-1.978,-1.801,-1.65,-1.52,-1.405,-1.301,-1.206,-1.115,-1.029,-0.943,-0.856,-0.765,-0.668,-0.561,-0.437,-0.293,-0.12,0.092,0.353,0.676,1.078,1.577,2.194,2.953,3.884,5.017,6.387,8.036,10.007,12.349,15.116,18.368,22.169,26.591,31.71,37.609,44.378,52.114,60.922],[-9.187,-7.763,-6.571,-5.579,-4.757,-4.078,-3.52,-3.062,-2.687,-2.378,-2.123,-1.911,-1.733,-1.581,-1.448,-1.33,-1.223,-1.124,-1.029,-0.937,-0.845,-0.751,-0.651,-0.543,-0.423,-0.284,-0.122,0.074,0.312,0.604,0.965,1.411,1.963,2.642,3.475,4.49,5.723,7.209,8.99,11.114,13.632,16.6,20.08,24.14,28.855,34.303,40.573,47.757,55.957,65.282],[-9.155,-7.721,-6.521,-5.523,-4.697,-4.015,-3.455,-2.995,-2.617,-2.307,-2.051,-1.837,-1.656,-1.501,-1.365,-1.244,-1.132,-1.028,-0.927,-0.828,-0.727,-0.623,-0.512,-0.391,-0.255,-0.098,0.088,0.309,0.579,0.908,1.313,1.81,2.422,3.172,4.087,5.198,6.541,8.155,10.084,12.376,15.085,18.272,22,26.34,31.37,37.173,43.84,51.469,60.164,70.038],[-9.118,-7.674,-6.467,-5.463,-4.632,-3.947,-3.384,-2.922,-2.542,-2.229,-1.97,-1.754,-1.57,-1.411,-1.271,-1.144,-1.027,-0.915,-0.807,-0.698,-0.587,-0.471,-0.346,-0.208,-0.052,0.128,0.34,0.593,0.9,1.272,1.728,2.285,2.965,3.795,4.803,6.021,7.488,9.243,11.334,13.811,16.73,20.155,24.151,28.795,34.165,40.35,47.443,55.547,64.77,75.23],[-9.08,-7.626,-6.412,-5.402,-4.567,-3.878,-3.311,-2.846,-2.463,-2.147,-1.884,-1.664,-1.475,-1.311,-1.165,-1.032,-0.906,-0.786,-0.668,-0.548,-0.423,-0.292,-0.149,0.01,0.189,0.397,0.641,0.932,1.281,1.704,2.218,2.843,3.603,4.523,5.635,6.974,8.578,10.49,12.759,15.439,18.588,22.272,26.56,31.532,37.269,43.864,51.415,60.027,69.814,80.898],[-9.046,-7.583,-6.361,-5.345,-4.504,-3.811,-3.24,-2.771,-2.384,-2.064,-1.796,-1.57,-1.376,-1.205,-1.051,-0.909,-0.774,-0.642,-0.511,-0.377,-0.236,-0.085,0.079,0.263,0.471,0.712,0.994,1.329,1.729,2.211,2.792,3.495,4.344,5.367,6.597,8.069,9.826,11.911,14.377,17.28,20.68,24.646,29.252,34.577,40.711,47.748,55.789,64.945,75.334,87.084],[-9.024,-7.551,-6.322,-5.299,-4.453,-3.754,-3.179,-2.704,-2.312,-1.986,-1.713,-1.48,-1.277,-1.098,-0.934,-0.781,-0.634,-0.488,-0.341,-0.188,-0.027,0.147,0.337,0.551,0.793,1.073,1.401,1.787,2.247,2.796,3.455,4.247,5.197,6.336,7.697,9.32,11.246,13.523,16.206,19.352,23.027,27.3,32.25,37.959,44.52,52.031,60.599,70.337,81.37,93.828],[-9.027,-7.544,-6.306,-5.276,-4.424,-3.719,-3.137,-2.656,-2.258,-1.925,-1.643,-1.401,-1.189,-0.999,-0.823,-0.656,-0.493,-0.33,-0.163,0.011,0.197,0.399,0.621,0.871,1.154,1.48,1.86,2.307,2.835,3.463,4.211,5.103,6.168,7.437,8.946,10.735,12.849,15.339,18.26,21.674,25.648,30.255,35.578,41.703,48.724,56.746,65.878,76.24,87.958,101.171],[-9.069,-7.576,-6.329,-5.292,-4.432,-3.72,-3.131,-2.642,-2.235,-1.893,-1.602,-1.349,-1.125,-0.921,-0.729,-0.545,-0.364,-0.18,0.011,0.212,0.428,0.663,0.923,1.215,1.546,1.927,2.369,2.885,3.492,4.209,5.059,6.066,7.26,8.675,10.349,12.323,14.646,17.37,20.553,24.259,28.56,33.531,39.258,45.831,53.349,61.92,71.657,82.686,95.138,109.155],[-9.174,-7.67,-6.414,-5.367,-4.498,-3.778,-3.18,-2.682,-2.265,-1.912,-1.608,-1.342,-1.103,-0.882,-0.672,-0.467,-0.263,-0.053,0.166,0.399,0.65,0.925,1.23,1.572,1.96,2.404,2.917,3.514,4.212,5.031,5.995,7.132,8.472,10.051,11.908,14.089,16.642,19.623,23.093,27.12,31.776,37.143,43.308,50.365,58.419,67.579,77.966,89.708,102.942,117.816],[-9.369,-7.854,-6.586,-5.53,-4.651,-3.92,-3.312,-2.803,-2.373,-2.006,-1.688,-1.405,-1.148,-0.907,-0.674,-0.445,-0.213,0.027,0.28,0.551,0.844,1.166,1.524,1.924,2.378,2.896,3.491,4.18,4.982,5.917,7.012,8.294,9.798,11.559,13.621,16.03,18.837,22.102,25.887,30.263,35.307,41.103,47.742,55.323,63.953,73.747,84.83,97.334,111.404,127.19],[-9.69,-8.162,-6.883,-5.815,-4.924,-4.182,-3.56,-3.038,-2.593,-2.21,-1.874,-1.571,-1.292,-1.027,-0.768,-0.509,-0.244,0.033,0.326,0.641,0.984,1.361,1.779,2.248,2.778,3.38,4.07,4.865,5.784,6.851,8.093,9.539,11.226,13.191,15.479,18.14,21.228,24.804,28.934,33.692,39.158,45.419,52.571,60.716,69.966,80.441,92.269,105.589,120.55,137.308],[-10.181,-8.64,-7.347,-6.266,-5.362,-4.605,-3.969,-3.43,-2.968,-2.565,-2.207,-1.881,-1.576,-1.282,-0.991,-0.697,-0.394,-0.074,0.266,0.633,1.034,1.475,1.964,2.512,3.129,3.828,4.626,5.541,6.594,7.809,9.216,10.846,12.736,14.928,17.468,20.407,23.804,27.72,32.227,37.401,43.325,50.091,57.797,66.551,76.468,87.673,100.3,114.491,130.402,148.194],[-10.898,-9.341,-8.034,-6.938,-6.018,-5.245,-4.591,-4.032,-3.549,-3.124,-2.74,-2.386,-2.05,-1.722,-1.394,-1.059,-0.71,-0.341,0.054,0.482,0.95,1.465,2.036,2.674,3.391,4.201,5.122,6.172,7.376,8.758,10.35,12.185,14.303,16.746,19.563,22.809,26.544,30.834,35.753,41.379,47.801,55.113,63.418,72.827,83.461,95.449,108.93,124.053,140.976,159.869],[-11.905,-10.332,-9.008,-7.895,-6.957,-6.165,-5.49,-4.909,-4.401,-3.948,-3.535,-3.148,-2.776,-2.408,-2.037,-1.654,-1.252,-0.825,-0.366,0.132,0.677,1.277,1.942,2.683,3.514,4.45,5.51,6.714,8.087,9.656,11.455,13.518,15.888,18.608,21.732,25.315,29.422,34.12,39.486,45.605,52.566,60.468,69.419,79.534,90.939,103.766,118.161,134.277,152.279,172.343],[-13.283,-11.691,-10.349,-9.216,-8.258,-7.443,-6.743,-6.136,-5.599,-5.115,-4.667,-4.241,-3.827,-3.413,-2.991,-2.553,-2.09,-1.596,-1.064,-0.485,0.148,0.845,1.617,2.475,3.436,4.514,5.73,7.107,8.67,10.449,12.478,14.795,17.443,20.47,23.931,27.884,32.396,37.54,43.394,50.047,57.592,66.132,75.779,86.654,98.884,112.611,127.982,145.159,164.31,185.619],[-15.125,-13.513,-12.149,-10.994,-10.011,-9.171,-8.443,-7.805,-7.235,-6.714,-6.225,-5.755,-5.292,-4.826,-4.345,-3.843,-3.31,-2.739,-2.123,-1.452,-0.718,0.09,0.983,1.974,3.081,4.319,5.712,7.282,9.057,11.069,13.353,15.951,18.906,22.271,26.102,30.461,35.417,41.045,47.43,54.662,62.838,72.067,82.464,94.154,107.271,121.96,138.375,156.681,177.057,199.688],[-17.541,-15.906,-14.518,-13.337,-12.328,-11.457,-10.697,-10.024,-9.415,-8.851,-8.316,-7.795,-7.276,-6.748,-6.2,-5.625,-5.012,-4.354,-3.641,-2.866,-2.017,-1.084,-0.054,1.088,2.358,3.777,5.366,7.152,9.163,11.434,14.001,16.909,20.204,23.94,28.176,32.978,38.417,44.574,51.534,59.392,68.251,78.222,89.426,101.991,116.058,131.775,149.304,168.816,190.493,214.529]]
var data_width = data[0].length;
var data_height = data.length;
var margin = { top: 20, right: 20, bottom: 40, left: 40 };
var height = 300 - margin.top - margin.bottom;
var width = 300 - margin.left - margin.right;
const hypothesis = [].concat.apply([], data);
var xScale = d3.scaleLinear()
.domain([0, 1000])
.range([0, width]);
var xAxis = d3.axisBottom(xScale).ticks(10);
var yScale = d3.scaleLinear()
.domain([0, 1000])
.range([height, 0]);
var yAxis = d3.axisLeft(yScale).ticks(10);
var svg = d3.select('#container')
.append('svg')
// .attr("viewBox", [0, 0, 50, 50]) This does not give my intended behavior
.attr("width", 300)
.attr("height", 300)
var chartArea = svg.append('g')
.attr('id','chart-area')
.attr('transform', `translate(${margin.left},${margin.top})`);
svg.select('#chart-area')
.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
svg.select('#chart-area')
.append('g')
.attr('class', 'y-axis')
.call(yAxis);
const contours = d3.contours().size([50, 50])
.thresholds([0]);
const projection = d3.geoIdentity()
.fitSize([200,200], contours(hypothesis)[0])
const path = d3.geoPath()
.projection(projection);
var g = chartArea.append("g")
.attr("stroke", "black")
.attr("stroke-width", 0.5)
.attr("fill", "none");
g.selectAll(null)
.data(contours(hypothesis))
.enter()
.append("path")
.attr("d", path);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="container">
</div>

d3.contours has no method for setting the size of the contours: the width and height of the matrix correspond to the positions created by the contour generator.
You're currently passing those positions to d3.geoPath(), which also has no method for setting the size of the generated path. You could pass a custom projection to d3.geoPath and then using projection.fitSize or projection.fitExtent to stretch the paths the way you want, but it seems a lot of work to me.
An easy alternative is dropping d3.geoPath() and using a line generator with a scale. In the scale you use the width/height of the matrix (since in your case they are the same, we will use just one scale) as the domain, and set your range as desired:
const scale = d3.scaleLinear()
.domain([0, 50])
.range([0, 200]);
const line = d3.line()
.x(d=>scale(d[0]))
.y(d=>scale(d[1]));
Then, in the paths, use the coordinates array:
g.selectAll(null)
.data(contours(hypothesis))
.enter()
.append("path")
.attr("d", d=>line(d.coordinates[0][0]));
Here is your code with those changes:
data = [[-69.776,-70.206,-70.503,-70.68,-70.75,-70.724,-70.613,-70.427,-70.174,-69.863,-69.501,-69.095,-68.652,-68.178,-67.676,-67.153,-66.613,-66.058,-65.492,-64.919,-64.339,-63.757,-63.172,-62.586,-62.001,-61.416,-60.831,-60.247,-59.662,-59.075,-58.486,-57.891,-57.289,-56.678,-56.052,-55.41,-54.747,-54.058,-53.337,-52.58,-51.778,-50.926,-50.016,-49.038,-47.983,-46.841,-45.602,-44.252,-42.779,-41.169],[-57.953,-58.222,-58.386,-58.455,-58.439,-58.348,-58.19,-57.973,-57.704,-57.39,-57.037,-56.65,-56.234,-55.795,-55.336,-54.861,-54.374,-53.877,-53.373,-52.864,-52.352,-51.84,-51.327,-50.815,-50.304,-49.794,-49.286,-48.779,-48.271,-47.761,-47.249,-46.73,-46.204,-45.667,-45.114,-44.543,-43.948,-43.325,-42.666,-41.967,-41.219,-40.415,-39.545,-38.601,-37.571,-36.444,-35.208,-33.849,-32.352,-30.702],[-48.121,-48.242,-48.283,-48.253,-48.159,-48.009,-47.808,-47.564,-47.281,-46.965,-46.62,-46.25,-45.86,-45.454,-45.033,-44.603,-44.164,-43.719,-43.271,-42.82,-42.37,-41.919,-41.471,-41.024,-40.58,-40.137,-39.697,-39.257,-38.817,-38.376,-37.93,-37.478,-37.018,-36.545,-36.055,-35.545,-35.008,-34.44,-33.833,-33.181,-32.476,-31.708,-30.868,-29.945,-28.928,-27.804,-26.559,-25.178,-23.644,-21.939],[-40.002,-39.986,-39.914,-39.793,-39.628,-39.424,-39.185,-38.916,-38.621,-38.303,-37.967,-37.614,-37.248,-36.871,-36.486,-36.095,-35.7,-35.303,-34.904,-34.507,-34.11,-33.716,-33.324,-32.935,-32.55,-32.167,-31.786,-31.406,-31.025,-30.643,-30.256,-29.862,-29.458,-29.04,-28.604,-28.145,-27.657,-27.135,-26.57,-25.956,-25.283,-24.541,-23.721,-22.809,-21.794,-20.661,-19.395,-17.98,-16.396,-14.625],[-33.348,-33.205,-33.03,-32.826,-32.595,-32.342,-32.069,-31.778,-31.473,-31.154,-30.826,-30.488,-30.144,-29.795,-29.442,-29.087,-28.732,-28.377,-28.023,-27.672,-27.324,-26.979,-26.638,-26.3,-25.966,-25.635,-25.306,-24.978,-24.649,-24.318,-23.982,-23.638,-23.282,-22.912,-22.521,-22.105,-21.657,-21.172,-20.64,-20.054,-19.404,-18.68,-17.869,-16.959,-15.936,-14.784,-13.486,-12.025,-10.38,-8.53],[-27.939,-27.68,-27.409,-27.129,-26.839,-26.541,-26.237,-25.927,-25.612,-25.294,-24.973,-24.65,-24.326,-24.001,-23.678,-23.356,-23.036,-22.719,-22.405,-22.095,-21.789,-21.488,-21.191,-20.899,-20.61,-20.324,-20.04,-19.757,-19.473,-19.186,-18.893,-18.592,-18.277,-17.946,-17.593,-17.212,-16.797,-16.34,-15.834,-15.268,-14.633,-13.917,-13.107,-12.189,-11.148,-9.967,-8.628,-7.11,-5.393,-3.452],[-23.58,-23.214,-22.856,-22.506,-22.162,-21.825,-21.493,-21.165,-20.843,-20.525,-20.211,-19.901,-19.595,-19.293,-18.996,-18.703,-18.415,-18.131,-17.853,-17.579,-17.311,-17.048,-16.79,-16.537,-16.287,-16.04,-15.796,-15.551,-15.306,-15.056,-14.8,-14.534,-14.254,-13.956,-13.633,-13.281,-12.891,-12.456,-11.967,-11.414,-10.786,-10.07,-9.253,-8.319,-7.251,-6.032,-4.642,-3.058,-1.258,0.785],[-20.102,-19.638,-19.2,-18.786,-18.393,-18.019,-17.662,-17.32,-16.99,-16.672,-16.365,-16.067,-15.778,-15.497,-15.223,-14.956,-14.696,-14.442,-14.195,-13.953,-13.718,-13.488,-13.264,-13.044,-12.828,-12.615,-12.404,-12.193,-11.979,-11.762,-11.536,-11.3,-11.049,-10.777,-10.479,-10.148,-9.777,-9.358,-8.88,-8.333,-7.705,-6.982,-6.15,-5.192,-4.09,-2.824,-1.373,0.286,2.179,4.334],[-17.356,-16.801,-16.29,-15.818,-15.381,-14.974,-14.594,-14.238,-13.903,-13.586,-13.285,-12.998,-12.724,-12.46,-12.207,-11.964,-11.728,-11.501,-11.28,-11.067,-10.86,-10.659,-10.464,-10.273,-10.086,-9.901,-9.718,-9.535,-9.349,-9.158,-8.958,-8.746,-8.518,-8.267,-7.988,-7.674,-7.316,-6.906,-6.433,-5.886,-5.251,-4.515,-3.661,-2.671,-1.527,-0.207,1.312,3.056,5.052,7.329],[-15.213,-14.575,-13.997,-13.472,-12.995,-12.558,-12.158,-11.79,-11.449,-11.133,-10.838,-10.561,-10.3,-10.053,-9.818,-9.595,-9.381,-9.176,-8.98,-8.79,-8.608,-8.432,-8.261,-8.095,-7.932,-7.772,-7.613,-7.453,-7.29,-7.12,-6.942,-6.749,-6.539,-6.304,-6.039,-5.736,-5.387,-4.981,-4.507,-3.954,-3.307,-2.551,-1.668,-0.641,0.553,1.935,3.531,5.368,7.475,9.884],[-13.562,-12.848,-12.209,-11.636,-11.121,-10.658,-10.24,-9.861,-9.516,-9.2,-8.91,-8.642,-8.393,-8.16,-7.942,-7.737,-7.542,-7.357,-7.18,-7.012,-6.85,-6.695,-6.545,-6.4,-6.258,-6.118,-5.979,-5.838,-5.693,-5.541,-5.379,-5.202,-5.006,-4.783,-4.528,-4.231,-3.885,-3.479,-3,-2.435,-1.771,-0.989,-0.072,1,2.249,3.701,5.382,7.32,9.548,12.099],[-12.308,-11.524,-10.829,-10.212,-9.664,-9.177,-8.742,-8.354,-8.005,-7.69,-7.405,-7.145,-6.906,-6.687,-6.483,-6.292,-6.114,-5.946,-5.787,-5.636,-5.492,-5.355,-5.222,-5.094,-4.969,-4.846,-4.723,-4.598,-4.468,-4.331,-4.182,-4.016,-3.83,-3.615,-3.365,-3.072,-2.725,-2.313,-1.824,-1.244,-0.557,0.256,1.212,2.335,3.647,5.175,6.948,8.996,11.352,14.055],[-11.37,-10.523,-9.777,-9.12,-8.542,-8.033,-7.584,-7.187,-6.834,-6.521,-6.24,-5.987,-5.757,-5.549,-5.357,-5.18,-5.016,-4.862,-4.718,-4.582,-4.453,-4.33,-4.213,-4.099,-3.988,-3.878,-3.768,-3.656,-3.538,-3.411,-3.272,-3.115,-2.935,-2.725,-2.478,-2.183,-1.832,-1.411,-0.908,-0.308,0.407,1.255,2.257,3.436,4.817,6.428,8.3,10.465,12.959,15.822],[-10.683,-9.777,-8.984,-8.291,-7.686,-7.157,-6.695,-6.29,-5.935,-5.622,-5.345,-5.098,-4.877,-4.678,-4.497,-4.331,-4.179,-4.038,-3.906,-3.782,-3.666,-3.555,-3.45,-3.348,-3.248,-3.149,-3.05,-2.947,-2.838,-2.72,-2.588,-2.436,-2.26,-2.052,-1.804,-1.505,-1.145,-0.712,-0.191,0.433,1.18,2.068,3.12,4.361,5.817,7.518,9.496,11.786,14.428,17.461],[-10.188,-9.229,-8.394,-7.668,-7.038,-6.492,-6.018,-5.607,-5.249,-4.936,-4.663,-4.421,-4.207,-4.016,-3.845,-3.689,-3.547,-3.416,-3.294,-3.181,-3.075,-2.974,-2.878,-2.786,-2.695,-2.605,-2.514,-2.418,-2.316,-2.204,-2.076,-1.928,-1.753,-1.544,-1.292,-0.986,-0.616,-0.167,0.376,1.028,1.811,2.744,3.852,5.159,6.696,8.493,10.585,13.009,15.805,19.018],[-9.842,-8.833,-7.96,-7.204,-6.552,-5.99,-5.506,-5.089,-4.728,-4.416,-4.146,-3.909,-3.701,-3.517,-3.353,-3.206,-3.072,-2.95,-2.837,-2.732,-2.634,-2.542,-2.453,-2.368,-2.285,-2.202,-2.116,-2.027,-1.929,-1.82,-1.695,-1.548,-1.373,-1.16,-0.902,-0.587,-0.202,0.266,0.833,1.517,2.34,3.322,4.49,5.87,7.494,9.394,11.607,14.172,17.132,20.534],[-9.605,-8.552,-7.644,-6.861,-6.189,-5.613,-5.12,-4.697,-4.335,-4.023,-3.755,-3.523,-3.32,-3.142,-2.985,-2.845,-2.718,-2.603,-2.497,-2.399,-2.307,-2.221,-2.139,-2.06,-1.982,-1.904,-1.823,-1.737,-1.643,-1.536,-1.412,-1.264,-1.085,-0.867,-0.601,-0.273,0.128,0.617,1.212,1.932,2.799,3.835,5.067,6.526,8.242,10.252,12.593,15.307,18.441,22.042],[-9.45,-8.356,-7.416,-6.609,-5.919,-5.33,-4.828,-4.401,-4.037,-3.726,-3.46,-3.231,-3.033,-2.861,-2.709,-2.574,-2.453,-2.344,-2.244,-2.151,-2.065,-1.984,-1.907,-1.832,-1.758,-1.683,-1.606,-1.522,-1.43,-1.323,-1.198,-1.048,-0.865,-0.64,-0.362,-0.021,0.399,0.913,1.54,2.298,3.212,4.307,5.609,7.151,8.967,11.093,13.57,16.443,19.759,23.57],[-9.353,-8.222,-7.252,-6.423,-5.717,-5.117,-4.608,-4.176,-3.811,-3.5,-3.236,-3.01,-2.816,-2.648,-2.501,-2.371,-2.255,-2.15,-2.055,-1.967,-1.885,-1.807,-1.734,-1.662,-1.591,-1.519,-1.444,-1.361,-1.269,-1.162,-1.035,-0.88,-0.691,-0.457,-0.167,0.191,0.632,1.174,1.834,2.636,3.601,4.758,6.136,7.767,9.688,11.938,14.559,17.599,21.108,25.14],[-9.295,-8.131,-7.134,-6.286,-5.565,-4.955,-4.439,-4.004,-3.637,-3.327,-3.065,-2.842,-2.651,-2.486,-2.343,-2.217,-2.105,-2.004,-1.912,-1.827,-1.748,-1.674,-1.603,-1.534,-1.465,-1.395,-1.32,-1.238,-1.145,-1.036,-0.906,-0.746,-0.549,-0.304,0,0.377,0.842,1.414,2.112,2.959,3.981,5.205,6.663,8.39,10.423,12.804,15.578,18.794,22.506,26.771],[-9.265,-8.069,-7.049,-6.182,-5.448,-4.829,-4.308,-3.869,-3.501,-3.192,-2.931,-2.71,-2.522,-2.361,-2.221,-2.098,-1.989,-1.891,-1.802,-1.72,-1.644,-1.571,-1.502,-1.435,-1.367,-1.298,-1.223,-1.141,-1.046,-0.934,-0.799,-0.633,-0.426,-0.169,0.151,0.549,1.041,1.645,2.384,3.281,4.363,5.66,7.204,9.033,11.185,13.705,16.641,20.043,23.969,28.48],[-9.251,-8.027,-6.985,-6.102,-5.357,-4.729,-4.203,-3.762,-3.393,-3.084,-2.824,-2.605,-2.42,-2.261,-2.124,-2.004,-1.897,-1.802,-1.715,-1.635,-1.56,-1.49,-1.422,-1.356,-1.289,-1.219,-1.144,-1.06,-0.963,-0.848,-0.707,-0.533,-0.316,-0.044,0.294,0.715,1.236,1.877,2.66,3.611,4.758,6.133,7.769,9.706,11.986,14.654,17.761,21.36,25.513,30.281],[-9.248,-7.998,-6.937,-6.039,-5.283,-4.648,-4.117,-3.674,-3.304,-2.995,-2.737,-2.52,-2.336,-2.18,-2.045,-1.927,-1.823,-1.729,-1.644,-1.565,-1.492,-1.423,-1.356,-1.29,-1.223,-1.153,-1.077,-0.991,-0.891,-0.77,-0.623,-0.439,-0.21,0.077,0.436,0.883,1.436,2.116,2.948,3.957,5.175,6.632,8.368,10.421,12.835,15.661,18.949,22.757,27.148,32.189],[-9.25,-7.976,-6.897,-5.986,-5.221,-4.58,-4.045,-3.6,-3.229,-2.921,-2.664,-2.448,-2.266,-2.112,-1.979,-1.862,-1.76,-1.668,-1.584,-1.506,-1.434,-1.365,-1.299,-1.233,-1.165,-1.094,-1.017,-0.928,-0.823,-0.697,-0.542,-0.348,-0.105,0.2,0.582,1.057,1.646,2.369,3.254,4.326,5.619,7.167,9.008,11.185,13.744,16.736,20.217,24.247,28.89,34.218],[-9.254,-7.959,-6.864,-5.941,-5.167,-4.521,-3.982,-3.535,-3.164,-2.856,-2.6,-2.386,-2.206,-2.053,-1.921,-1.806,-1.705,-1.614,-1.531,-1.455,-1.383,-1.314,-1.248,-1.181,-1.113,-1.04,-0.96,-0.868,-0.758,-0.625,-0.46,-0.254,0.005,0.33,0.737,1.243,1.871,2.642,3.583,4.725,6.099,7.743,9.698,12.007,14.721,17.891,21.577,25.841,30.751,36.382],[-9.259,-7.945,-6.834,-5.901,-5.119,-4.468,-3.927,-3.478,-3.106,-2.799,-2.543,-2.331,-2.152,-2,-1.87,-1.756,-1.656,-1.566,-1.483,-1.407,-1.336,-1.267,-1.2,-1.133,-1.063,-0.988,-0.905,-0.808,-0.692,-0.551,-0.375,-0.155,0.122,0.469,0.905,1.446,2.116,2.939,3.943,5.159,6.622,8.371,10.447,12.899,15.777,19.137,23.041,27.553,32.747,38.698],[-9.263,-7.93,-6.807,-5.864,-5.075,-4.419,-3.875,-3.425,-3.054,-2.746,-2.492,-2.28,-2.102,-1.952,-1.822,-1.71,-1.61,-1.52,-1.439,-1.363,-1.291,-1.222,-1.154,-1.085,-1.014,-0.936,-0.848,-0.746,-0.623,-0.472,-0.284,-0.047,0.25,0.623,1.09,1.671,2.388,3.268,4.34,5.637,7.196,9.057,11.265,13.87,16.924,20.487,24.622,29.399,34.893,41.183],[-9.264,-7.916,-6.78,-5.828,-5.033,-4.374,-3.827,-3.376,-3.004,-2.697,-2.443,-2.232,-2.055,-1.906,-1.777,-1.665,-1.566,-1.477,-1.395,-1.318,-1.246,-1.176,-1.107,-1.036,-0.962,-0.88,-0.787,-0.678,-0.546,-0.384,-0.181,0.074,0.395,0.797,1.299,1.923,2.692,3.635,4.782,6.168,7.831,9.814,12.164,14.932,18.175,21.955,26.337,31.395,37.208,43.858],[-9.263,-7.9,-6.752,-5.792,-4.993,-4.329,-3.781,-3.328,-2.956,-2.649,-2.396,-2.186,-2.01,-1.861,-1.733,-1.621,-1.522,-1.432,-1.35,-1.273,-1.2,-1.128,-1.057,-0.983,-0.905,-0.819,-0.719,-0.602,-0.46,-0.283,-0.063,0.213,0.56,0.995,1.537,2.209,3.037,4.049,5.278,6.761,8.537,10.652,13.155,16.1,19.546,23.557,28.203,33.561,39.711,46.743],[-9.258,-7.881,-6.724,-5.756,-4.951,-4.284,-3.734,-3.281,-2.908,-2.602,-2.349,-2.139,-1.963,-1.814,-1.687,-1.575,-1.475,-1.385,-1.302,-1.224,-1.149,-1.075,-1.001,-0.924,-0.841,-0.748,-0.641,-0.513,-0.358,-0.165,0.075,0.376,0.754,1.226,1.813,2.539,3.431,4.519,5.839,7.427,9.327,11.585,14.253,17.388,21.052,25.312,30.24,35.917,42.427,49.863],[-9.249,-7.859,-6.692,-5.718,-4.908,-4.238,-3.686,-3.232,-2.859,-2.553,-2.3,-2.09,-1.914,-1.765,-1.637,-1.525,-1.425,-1.334,-1.249,-1.169,-1.091,-1.015,-0.936,-0.854,-0.765,-0.664,-0.547,-0.407,-0.236,-0.025,0.239,0.569,0.982,1.496,2.134,2.92,3.884,5.057,6.476,8.18,10.215,12.628,15.476,18.816,22.714,27.24,32.47,38.488,45.381,53.246],[-9.235,-7.832,-6.657,-5.676,-4.862,-4.189,-3.635,-3.18,-2.807,-2.5,-2.247,-2.037,-1.861,-1.711,-1.583,-1.469,-1.368,-1.275,-1.188,-1.105,-1.024,-0.943,-0.859,-0.77,-0.673,-0.562,-0.433,-0.278,-0.088,0.146,0.437,0.8,1.253,1.815,2.51,3.365,4.408,5.675,7.203,9.035,11.216,13.799,16.841,20.403,24.553,29.364,34.917,41.298,48.6,56.922],[-9.214,-7.801,-6.617,-5.63,-4.812,-4.136,-3.58,-3.124,-2.75,-2.442,-2.188,-1.978,-1.801,-1.65,-1.52,-1.405,-1.301,-1.206,-1.115,-1.029,-0.943,-0.856,-0.765,-0.668,-0.561,-0.437,-0.293,-0.12,0.092,0.353,0.676,1.078,1.577,2.194,2.953,3.884,5.017,6.387,8.036,10.007,12.349,15.116,18.368,22.169,26.591,31.71,37.609,44.378,52.114,60.922],[-9.187,-7.763,-6.571,-5.579,-4.757,-4.078,-3.52,-3.062,-2.687,-2.378,-2.123,-1.911,-1.733,-1.581,-1.448,-1.33,-1.223,-1.124,-1.029,-0.937,-0.845,-0.751,-0.651,-0.543,-0.423,-0.284,-0.122,0.074,0.312,0.604,0.965,1.411,1.963,2.642,3.475,4.49,5.723,7.209,8.99,11.114,13.632,16.6,20.08,24.14,28.855,34.303,40.573,47.757,55.957,65.282],[-9.155,-7.721,-6.521,-5.523,-4.697,-4.015,-3.455,-2.995,-2.617,-2.307,-2.051,-1.837,-1.656,-1.501,-1.365,-1.244,-1.132,-1.028,-0.927,-0.828,-0.727,-0.623,-0.512,-0.391,-0.255,-0.098,0.088,0.309,0.579,0.908,1.313,1.81,2.422,3.172,4.087,5.198,6.541,8.155,10.084,12.376,15.085,18.272,22,26.34,31.37,37.173,43.84,51.469,60.164,70.038],[-9.118,-7.674,-6.467,-5.463,-4.632,-3.947,-3.384,-2.922,-2.542,-2.229,-1.97,-1.754,-1.57,-1.411,-1.271,-1.144,-1.027,-0.915,-0.807,-0.698,-0.587,-0.471,-0.346,-0.208,-0.052,0.128,0.34,0.593,0.9,1.272,1.728,2.285,2.965,3.795,4.803,6.021,7.488,9.243,11.334,13.811,16.73,20.155,24.151,28.795,34.165,40.35,47.443,55.547,64.77,75.23],[-9.08,-7.626,-6.412,-5.402,-4.567,-3.878,-3.311,-2.846,-2.463,-2.147,-1.884,-1.664,-1.475,-1.311,-1.165,-1.032,-0.906,-0.786,-0.668,-0.548,-0.423,-0.292,-0.149,0.01,0.189,0.397,0.641,0.932,1.281,1.704,2.218,2.843,3.603,4.523,5.635,6.974,8.578,10.49,12.759,15.439,18.588,22.272,26.56,31.532,37.269,43.864,51.415,60.027,69.814,80.898],[-9.046,-7.583,-6.361,-5.345,-4.504,-3.811,-3.24,-2.771,-2.384,-2.064,-1.796,-1.57,-1.376,-1.205,-1.051,-0.909,-0.774,-0.642,-0.511,-0.377,-0.236,-0.085,0.079,0.263,0.471,0.712,0.994,1.329,1.729,2.211,2.792,3.495,4.344,5.367,6.597,8.069,9.826,11.911,14.377,17.28,20.68,24.646,29.252,34.577,40.711,47.748,55.789,64.945,75.334,87.084],[-9.024,-7.551,-6.322,-5.299,-4.453,-3.754,-3.179,-2.704,-2.312,-1.986,-1.713,-1.48,-1.277,-1.098,-0.934,-0.781,-0.634,-0.488,-0.341,-0.188,-0.027,0.147,0.337,0.551,0.793,1.073,1.401,1.787,2.247,2.796,3.455,4.247,5.197,6.336,7.697,9.32,11.246,13.523,16.206,19.352,23.027,27.3,32.25,37.959,44.52,52.031,60.599,70.337,81.37,93.828],[-9.027,-7.544,-6.306,-5.276,-4.424,-3.719,-3.137,-2.656,-2.258,-1.925,-1.643,-1.401,-1.189,-0.999,-0.823,-0.656,-0.493,-0.33,-0.163,0.011,0.197,0.399,0.621,0.871,1.154,1.48,1.86,2.307,2.835,3.463,4.211,5.103,6.168,7.437,8.946,10.735,12.849,15.339,18.26,21.674,25.648,30.255,35.578,41.703,48.724,56.746,65.878,76.24,87.958,101.171],[-9.069,-7.576,-6.329,-5.292,-4.432,-3.72,-3.131,-2.642,-2.235,-1.893,-1.602,-1.349,-1.125,-0.921,-0.729,-0.545,-0.364,-0.18,0.011,0.212,0.428,0.663,0.923,1.215,1.546,1.927,2.369,2.885,3.492,4.209,5.059,6.066,7.26,8.675,10.349,12.323,14.646,17.37,20.553,24.259,28.56,33.531,39.258,45.831,53.349,61.92,71.657,82.686,95.138,109.155],[-9.174,-7.67,-6.414,-5.367,-4.498,-3.778,-3.18,-2.682,-2.265,-1.912,-1.608,-1.342,-1.103,-0.882,-0.672,-0.467,-0.263,-0.053,0.166,0.399,0.65,0.925,1.23,1.572,1.96,2.404,2.917,3.514,4.212,5.031,5.995,7.132,8.472,10.051,11.908,14.089,16.642,19.623,23.093,27.12,31.776,37.143,43.308,50.365,58.419,67.579,77.966,89.708,102.942,117.816],[-9.369,-7.854,-6.586,-5.53,-4.651,-3.92,-3.312,-2.803,-2.373,-2.006,-1.688,-1.405,-1.148,-0.907,-0.674,-0.445,-0.213,0.027,0.28,0.551,0.844,1.166,1.524,1.924,2.378,2.896,3.491,4.18,4.982,5.917,7.012,8.294,9.798,11.559,13.621,16.03,18.837,22.102,25.887,30.263,35.307,41.103,47.742,55.323,63.953,73.747,84.83,97.334,111.404,127.19],[-9.69,-8.162,-6.883,-5.815,-4.924,-4.182,-3.56,-3.038,-2.593,-2.21,-1.874,-1.571,-1.292,-1.027,-0.768,-0.509,-0.244,0.033,0.326,0.641,0.984,1.361,1.779,2.248,2.778,3.38,4.07,4.865,5.784,6.851,8.093,9.539,11.226,13.191,15.479,18.14,21.228,24.804,28.934,33.692,39.158,45.419,52.571,60.716,69.966,80.441,92.269,105.589,120.55,137.308],[-10.181,-8.64,-7.347,-6.266,-5.362,-4.605,-3.969,-3.43,-2.968,-2.565,-2.207,-1.881,-1.576,-1.282,-0.991,-0.697,-0.394,-0.074,0.266,0.633,1.034,1.475,1.964,2.512,3.129,3.828,4.626,5.541,6.594,7.809,9.216,10.846,12.736,14.928,17.468,20.407,23.804,27.72,32.227,37.401,43.325,50.091,57.797,66.551,76.468,87.673,100.3,114.491,130.402,148.194],[-10.898,-9.341,-8.034,-6.938,-6.018,-5.245,-4.591,-4.032,-3.549,-3.124,-2.74,-2.386,-2.05,-1.722,-1.394,-1.059,-0.71,-0.341,0.054,0.482,0.95,1.465,2.036,2.674,3.391,4.201,5.122,6.172,7.376,8.758,10.35,12.185,14.303,16.746,19.563,22.809,26.544,30.834,35.753,41.379,47.801,55.113,63.418,72.827,83.461,95.449,108.93,124.053,140.976,159.869],[-11.905,-10.332,-9.008,-7.895,-6.957,-6.165,-5.49,-4.909,-4.401,-3.948,-3.535,-3.148,-2.776,-2.408,-2.037,-1.654,-1.252,-0.825,-0.366,0.132,0.677,1.277,1.942,2.683,3.514,4.45,5.51,6.714,8.087,9.656,11.455,13.518,15.888,18.608,21.732,25.315,29.422,34.12,39.486,45.605,52.566,60.468,69.419,79.534,90.939,103.766,118.161,134.277,152.279,172.343],[-13.283,-11.691,-10.349,-9.216,-8.258,-7.443,-6.743,-6.136,-5.599,-5.115,-4.667,-4.241,-3.827,-3.413,-2.991,-2.553,-2.09,-1.596,-1.064,-0.485,0.148,0.845,1.617,2.475,3.436,4.514,5.73,7.107,8.67,10.449,12.478,14.795,17.443,20.47,23.931,27.884,32.396,37.54,43.394,50.047,57.592,66.132,75.779,86.654,98.884,112.611,127.982,145.159,164.31,185.619],[-15.125,-13.513,-12.149,-10.994,-10.011,-9.171,-8.443,-7.805,-7.235,-6.714,-6.225,-5.755,-5.292,-4.826,-4.345,-3.843,-3.31,-2.739,-2.123,-1.452,-0.718,0.09,0.983,1.974,3.081,4.319,5.712,7.282,9.057,11.069,13.353,15.951,18.906,22.271,26.102,30.461,35.417,41.045,47.43,54.662,62.838,72.067,82.464,94.154,107.271,121.96,138.375,156.681,177.057,199.688],[-17.541,-15.906,-14.518,-13.337,-12.328,-11.457,-10.697,-10.024,-9.415,-8.851,-8.316,-7.795,-7.276,-6.748,-6.2,-5.625,-5.012,-4.354,-3.641,-2.866,-2.017,-1.084,-0.054,1.088,2.358,3.777,5.366,7.152,9.163,11.434,14.001,16.909,20.204,23.94,28.176,32.978,38.417,44.574,51.534,59.392,68.251,78.222,89.426,101.991,116.058,131.775,149.304,168.816,190.493,214.529]]
var data_width = data[0].length;
var data_height = data.length;
var margin = { top: 20, right: 20, bottom: 40, left: 40 };
var height = 300 - margin.top - margin.bottom;
var width = 300 - margin.left - margin.right;
const hypothesis = [].concat.apply([], data);
var xScale = d3.scaleLinear()
.domain([0, 1000])
.range([0, width]);
var xAxis = d3.axisBottom(xScale).ticks(10);
var yScale = d3.scaleLinear()
.domain([0, 1000])
.range([height, 0]);
var yAxis = d3.axisLeft(yScale).ticks(10);
var svg = d3.select('#container')
.append('svg')
// .attr("viewBox", [0, 0, 50, 50]) This does not give my intended behavior
.attr("width", 300)
.attr("height", 300)
var chartArea = svg.append('g')
.attr('id','chart-area')
.attr('transform', `translate(${margin.left},${margin.top})`);
svg.select('#chart-area')
.append('g')
.attr('class', 'x-axis')
.attr('transform', `translate(0, ${height})`)
.call(xAxis);
svg.select('#chart-area')
.append('g')
.attr('class', 'y-axis')
.call(yAxis);
const scale = d3.scaleLinear()
.domain([0, 50])
.range([0, 200]);
const line = d3.line()
.x(d=>scale(d[0]))
.y(d=>scale(d[1]));
const contours = d3.contours().size([50, 50])
.thresholds([0]);
var g = chartArea.append("g")
.attr("stroke", "black")
.attr("stroke-width", 0.5)
.attr("fill", "none");
g.selectAll(null)
.data(contours(hypothesis))
.enter()
.append("path")
.attr("d", d=>line(d.coordinates[0][0]));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="container">
</div>

D3 - tickFormat not working

If anyone could take a look at my code and let me know why D3 doesn't want to format Y axis ticks as %M:%S.
JSFiddle
Code:
function renderScatterPlot(data) {
// set up svg and bar dimensions/margins
const width = 1000;
const height = 500;
const padding = 20;
const margin = { top: 40, right: 20, bottom: 80, left: 80 };
// append svg to DOM
const svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height)
// for parsing time string in data and converting back to original format
const parse = d3.timeParse('%M:%S');
const format = d3.timeFormat('%M:%S')
// calculate min and max data values
const timeMin = d3.min(data, (d) => parse(d.Time));
const timeMax = d3.max(data, (d) => parse(d.Time));
// set up scales
const xScale = d3.scaleBand()
.domain(data.map((d) => d.Year))
.range([margin.left, width - margin.right])
.paddingInner(0.1)
const yScale = d3.scaleTime()
.domain([timeMin, timeMax])
.range([height - margin.bottom, margin.top])
// set up x and y axes
const xAxis = d3.axisBottom(xScale)
const yAxis = d3.axisLeft(yScale)
.tickFormat(format)
// append axes to svg
svg.append('g')
.attr('id', 'x-axis')
.attr('transform', `translate(0, ${height - margin.bottom})`)
.call(xAxis)
svg.append('g')
.call(d3.axisLeft(yScale))
.attr('transform', `translate(${margin.left}, 0)`)
.attr('id', 'y-axis')
}
$.getJSON('https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json', (data) => renderScatterPlot(data));

D3 is formatting your ticks, tickFormat is working just fine.
However, there is no point in doing this...
const yAxis = d3.axisLeft(yScale)
.tickFormat(format)
... if, when calling the axis, you simply ignore yAxis:
svg.append('g')
.call(d3.axisLeft(yScale))
It should be:
svg.append('g')
.call(yAxis)
Here is your updated fiddle: https://jsfiddle.net/swxbx0Lt/

A simple scatterplot example in D3.js?

I'm looking for an example of how to draw a scatterplot in D3.js.
I haven't been able to find a simple example by looking through the official D3.js examples (impressive though they are). I just want to know how to:
draw and label the x- and y-axes
draw scatter points on the graph.
I did find this example in this D3 reusable library, but it is much more complex than I need, with external files that make it hard to pull out the essential points. Could anyone point me at a simple scatterplot example to get started?
Thanks very much.

This should get you started. You can see it in action at http://bl.ocks.org/2595950.
// data that you want to plot, I've used separate arrays for x and y values
var xdata = [5, 10, 15, 20],
ydata = [3, 17, 4, 6];
// size and margins for the chart
var margin = {top: 20, right: 15, bottom: 60, left: 60}
, width = 960 - margin.left - margin.right
, height = 500 - margin.top - margin.bottom;
// x and y scales, I've used linear here but there are other options
// the scales translate data values to pixel values for you
var x = d3.scale.linear()
.domain([0, d3.max(xdata)]) // the range of the values to plot
.range([ 0, width ]); // the pixel range of the x-axis
var y = d3.scale.linear()
.domain([0, d3.max(ydata)])
.range([ height, 0 ]);
// the chart object, includes all margins
var chart = d3.select('body')
.append('svg:svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('class', 'chart')
// the main object where the chart and axis will be drawn
var main = chart.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('width', width)
.attr('height', height)
.attr('class', 'main')
// draw the x axis
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
main.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'main axis date')
.call(xAxis);
// draw the y axis
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
main.append('g')
.attr('transform', 'translate(0,0)')
.attr('class', 'main axis date')
.call(yAxis);
// draw the graph object
var g = main.append("svg:g");
g.selectAll("scatter-dots")
.data(ydata) // using the values in the ydata array
.enter().append("svg:circle") // create a new circle for each value
.attr("cy", function (d) { return y(d); } ) // translate y value to a pixel
.attr("cx", function (d,i) { return x(xdata[i]); } ) // translate x value
.attr("r", 10) // radius of circle
.style("opacity", 0.6); // opacity of circle
Used like this:
<!DOCTYPE html>
<html>
<head>
<title>The d3 test</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js" charset="utf-8"></script>
</head>
<body>
<div class='content'>
<!-- /the chart goes here -->
</div>
<script type="text/javascript" src="scatterchart.js"></script>
</body>
</html

NVD3.js has great examples. You will need to include their library also or take a look at their implementation. Take a look at this example of scatterplot: http://nvd3.org/livecode/#codemirrorNav

Take a look at this example of scatterplot with C3.js (D3-based): http://c3js.org/samples/chart_scatter.html
You can chang radius size like this : http://grokbase.com/t/gg/c3js/14a7jfj28c/bubble-chart-with-changing-radius-size-in-c3-js

Categories