We Keep Coding

D3 - Chart with positive and negative values

I am trying to build the d3 chart with the positive and negative number values as below
and I found some examples of this and this. I am facing difficulties in customizing it because I have no prior experience in d3 and I think it would need some time for learning. I tried that as well. Created some simple chart examples but could not achieve the above. So I thought of reaching for help. Maybe someone can help with this if they have already done a similar chart or some guidance would be greatly appreciated. Thanks in advance.

The first step would be to identify how this chart can be simplified. Removing features until the most basic thing remains. Then, build that and gradually add features until it resembles what you want.
In your case, that'd be a horizontal bar chart. Then, add some negative values and a centred zero-line. Finally, make the height of the bars less so they become nodes, and add the text.
I'll try to add something like this, in these steps, without the layout and everything, but hopefully you'll be able to see my logic.
The basic vertical bar chart
// Some fake data
const data = ['SaaS', 'Sales', 'Fruits & Veggies', 'IT'].map((v, i) => ({
name: v,
value: 3 * i + 2
}));
const width = 600,
height = 300
margin = {
top: 20,
left: 100,
right: 40,
bottom: 40
};
// Process it to find the x and y axis domains
// scaleLinear because it considers numbers
const x = d3.scaleLinear()
.domain([0, d3.max(data.map(d => d.value))]) // the possible values
.range([0, width]); // the available screen space
// scaleBand because it's just categorical data
const y = d3.scaleBand()
.domain(data.map(d => d.name)) // all possible values
.range([height, 0]) // little weird, y-axis is always backwards, because (0,0) is the top left
.padding(0.1);
const svg = d3.select('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
const g = svg
// Append a container element. This will hold the chart
.append('g')
// Move it a little to account for the axes and labels
.attr('transform', `translate(${margin.left} ${margin.right})`);
// Draw the bars
// First, assign the data to the bar objects, this will decide which to remove, update, and add
const bars = g.append('g')
.selectAll('rect')
.data(data);
// Good practice: always call remove before adding stuff
bars.exit().remove();
// Add the new bars and assign any attributes that do not depend on the data
// for example, font for texts
bars.enter()
.append('rect')
.attr('fill', 'steelblue')
// Now merge it with the existing bars
.merge(bars)
// From now on we operate on both the old and the new bars
// Bars are weird, first we position the top left corner of each bar
.attr('x', 0)
.attr('y', d => y(d.name))
// Then we determine the width and height
.attr('width', d => x(d.value))
.attr('height', y.bandwidth())
// Draw the x and y axes
g.append('g')
.classed('x-axis', true)
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(x))
g.append('g')
.classed('y-axis', true)
.call(d3.axisLeft(y))
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
Now I'll remove all old comments and explain what I'm doing differently.
The negative horizontal bar chart
// Now, the data can also be negative
const data = ['SaaS', 'Sales', 'Fruits & Veggies', 'IT'].map((v, i) => ({
name: v,
value: 3 * i - 5
}));
const width = 600,
height = 300,
margin = {
top: 20,
left: 100,
right: 40,
bottom: 40
};
// Now, we don't use 0 as a minimum, but get it from the data using d3.extent
const x = d3.scaleLinear()
.domain(d3.extent(data.map(d => d.value)))
.range([0, width]);
const y = d3.scaleBand()
.domain(data.map(d => d.name))
.range([height, 0])
.padding(0.1);
const svg = d3.select('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
const g = svg
.append('g')
.attr('transform', `translate(${margin.left} ${margin.right})`);
const bars = g.append('g')
.selectAll('rect')
.data(data);
bars.exit().remove();
bars.enter()
.append('rect')
.merge(bars)
// All the same until here
// Now, if a bar is positive it starts at x = 0, and has positive width
// If a bar is negative it starts at x < 0 and ends at x = 0
.attr('x', d => d.value > 0 ? x(0) : x(d.value))
.attr('y', d => y(d.name))
// If the bar is positive it ends at x = v, but that means it's x(v) - x(0) wide
// If the bar is negative it ends at x = 0, but that means it's x(0) - x(v) wide
.attr('width', d => d.value > 0 ? x(d.value) - x(0) : x(0) - x(d.value))
.attr('height', y.bandwidth())
// Let's color the bar based on whether the value is positive or negative
.attr('fill', d => d.value > 0 ? 'darkgreen' : 'darkred')
g.append('g')
.classed('x-axis', true)
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(x))
g.append('g')
.classed('y-axis', true)
.call(d3.axisLeft(y))
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
And now, I'll change the bars to the nodes you have in your example code.
The horizontal chart with nodes
const data = ['SaaS', 'Sales', 'Fruits & Veggies', 'IT'].map((v, i) => ({
name: v,
value: 3 * i - 5
}));
// We want to center each rect around the value it's supposed to have.
// That means that we need to have a node width
const nodeWidth = 60;
const width = 600,
height = 300,
margin = {
top: 20,
left: 100,
right: 40,
bottom: 40
};
// We also need to make sure there is space for all nodes, even at the edges.
// One way to get this is by just extending the domain a little.
const domain = d3.extent(data.map(d => d.value));
const x = d3.scaleLinear()
.domain([domain[0] - 1.5, domain[1] + 1.5])
.range([0, width]);
const y = d3.scaleBand()
.domain(data.map(d => d.name))
.range([height, 0])
.padding(0.1);
const svg = d3.select('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
const g = svg
.append('g')
.attr('transform', `translate(${margin.left} ${margin.right})`);
const bars = g.append('g')
.selectAll('rect')
.data(data);
bars.exit().remove();
// All the same until here
bars.enter()
.append('rect')
// width has become a constant
.attr('width', nodeWidth)
// Now, transform each node so it centers around the value it's supposed to have
.attr('transform', `translate(${-nodeWidth / 2} 0)`)
// Round the corners for aesthetics
.attr('rx', 15)
.merge(bars)
// `x` denotes the placement directly again
.attr('x', d => x(d.value))
.attr('y', d => y(d.name))
.attr('height', y.bandwidth())
.attr('fill', d => d.value > 0 ? 'darkgreen' : 'darkred');
// Now one more thing, we want to add labels to each node.
// `<rect>` can't have children, we we add them to the plot seperately
// using the same `data` as for the bars
const labels = g.append('g')
.selectAll('text')
.data(data);
labels.exit().remove();
labels.enter()
.append('text')
.attr('fill', 'white')
.attr('text-anchor', 'middle') // center-align the text
.attr('dy', 5) // place it down a little so it middles nicely in the node.
.merge(bars)
// `x` denotes the placement directly
.attr('x', d => x(d.value))
// Add half a bar's height to target the center of each node
.attr('y', d => y(d.name) + y.bandwidth() / 2)
// Actually fill in the text
.text(d => d.value);
g.append('g')
.classed('x-axis', true)
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(x))
g.append('g')
.classed('y-axis', true)
.call(d3.axisLeft(y))
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
I hope you can follow this. Let me know if anything about this tutorial is unclear.

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>

Beautify scaleBand

I just tried out d3js for some days and I want to beautify the x and y scales of my graph to be something like this
But this is what I got so far.
I have tried changing from scaleBand() to scaleLinear() and fix the normally bandwidth() method to a constant value, the graph just would not show.
This is the code
mounted () {
this.generateChart()
},
methods: {
generateChart () {
// set the dimensions and margins of the graph
const margin = { top: 20, right: 20, bottom: 30, left: 30 }
const width = 1850 - margin.left - margin.right
const height = 200 - margin.top - margin.bottom
// make the area for the graph to stay
const svg = d3.select('#heatmap')
.append('svg') // svg area can include headers and color scales
.attr('width', width + margin.left + margin.right) // set width
.attr('height', height + margin.top + margin.bottom) // set height
.append('g') // new g tag area for graph only
.attr('transform', `translate(${margin.left}, ${margin.bottom})`)
// stick g tag to the bottom
// range function generate graph scales
// TODO: make a range using date and time
const xLabel = d3.range(259)
const yLabel = d3.range(23, -1, -1)
// create x, y scales and axes
const x = d3.scaleBand()
.domain(xLabel)
.range([0, width])
.padding(0.05)
svg.append('g')
.attr('transform', `translate(0, ${height})`)
.call(d3.axisBottom(x))
const y = d3.scaleBand()
.domain(yLabel)
.range([height, 0])
.padding(0.05)
svg.append('g').call(d3.axisLeft(y))
d3.json('../predictions.json').then(function (data) {
svg.selectAll()
.data(data.heatmaps.kw.Sand_Heads)
.enter()
.append('rect')
.attr('x', function (d) {
return x(d[1]) // return cell's position
})
.attr('y', function (d) {
return y(d[0])
})
.attr('cx', 1)
.attr('cy', 1)
.attr('width', x.bandwidth()) // return cell's width
.attr('height', y.bandwidth()) // return cell's height
.style('fill', function (d) {
return rgbaToHex(0, 128, 255, 100 * d[2])
})
.on('mouseover', function () { // box stroke when hover
d3.select(this)
.style('stroke', 'black')
.style('opacity', 1)
})
.on('mouseout', function () { // fade block stroke when mouse leave the cell
d3.select(this)
.style('stroke', 'none')
.style('opacity', 0.8)
})
})
}
Note: I have to make it work with date selection in the future too.
This is the structure of the data I'm working on.
{
"days": ["2019-04-11", "2019-04-12", ..., "2019-12-25"],
"heatmaps": {
"kw": {
"Tilly_Point": [[5, 112, 0.0012], [6, 112, 0.0016], ...],
"Mouat_Point": [...]
},
"hw": {
...
}
}
}
Explanation:
the first element of subarray in Tilly_Point is the time of the whale found. ranging from 0 to 23 (midnight to next midnight) and 5 means 05:00 A.M. to 06:00 A.M.
the second element is the nth day of the operation. It's 112 meaning it's the 112th day of the operation. which is 1 August 2019
the last element is the real data being plotted on the graph. the higher -> darker colour towards the real color with 1 opacity

By looking at the desired design we can understand what you mean by "beautify" is reducing the number of ticks. And you are absolutely correct: in very few and specific situations we need to show all of them; most of the times, the design is cleaner and the user benefits from a more tidy dataviz if we choose what ticks to display.
That's clear if we look at this basic example I wrote, simulating your axes:
const svg = d3.select("svg");
const yScale = d3.scaleBand()
.domain(d3.range(25))
.range([10, 80])
.paddingInner(1);
const xScale = d3.scaleBand()
.domain(d3.range(261))
.range([25, 490])
.paddingInner(1);
d3.axisLeft(yScale)(svg.append("g").attr("transform", "translate(25,0)"));
d3.axisBottom(xScale)(svg.append("g").attr("transform", "translate(0,80)"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100"></svg>
There are different approaches for reducing the number of ticks here: you can explicitly chose the ticks to show by value or, as I'll do in this answer, you can simply choose how many of them to show. Here, I'll do this using the remainder operator (%) filtering the scale's domain and passing it to tickValues (since you have a band scale we cannot use ticks), for instance showing every 6th value for the y axis:
.tickValues(yScale.domain().filter((_, i) => !(i % 6)))
Here is the result:
const svg = d3.select("svg");
const yScale = d3.scaleBand()
.domain(d3.range(25))
.range([10, 80])
.paddingInner(1);
const xScale = d3.scaleBand()
.domain(d3.range(261))
.range([25, 490])
.paddingInner(1);
d3.axisLeft(yScale).tickValues(yScale.domain().filter((_, i) => !(i % 6)))(svg.append("g").attr("transform", "translate(25,0)"));
d3.axisBottom(xScale).tickValues(xScale.domain().filter((_, i) => !(i % 20)))(svg.append("g").attr("transform", "translate(0,80)"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="300"></svg>

D3 line graph getting error and not getting plotted

I am making a line graph for a set of data regarding letter vs frequency. I have made proper code for x and y axis, but while plotting line I am getting error and not able to plot the line-graph. Can someone help fix the issue?
SNIPPET:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<svg></svg>
<script>
//module declaration
var app = angular.module('myApp',[]);
//Controller declaration
app.controller('myCtrl',function($scope){
$scope.svgWidth = 800;//svg Width
$scope.svgHeight = 500;//svg Height
//Data in proper format
var data = [
{"letter": "A","frequency": "5.01"},
{"letter": "B","frequency": "7.80"},
{"letter": "C","frequency": "15.35"},
{"letter": "D","frequency": "22.70"},
{"letter": "E","frequency": "34.25"},
{"letter": "F","frequency": "10.21"},
{"letter": "G","frequency": "7.68"},
];
//removing prior svg elements ie clean up svg
d3.select('svg').selectAll("*").remove();
//resetting svg height and width in current svg
d3.select("svg").attr("width", $scope.svgWidth).attr("height", $scope.svgHeight);
//Setting up of our svg with proper calculations
var svg = d3.select("svg");
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = svg.attr("width") - margin.left - margin.right;
var height = svg.attr("height") - margin.top - margin.bottom;
//Plotting our base area in svg in which chart will be shown
var g = svg.append("g");
//shifting the canvas area from left and top
g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//X and Y scaling
var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleBand().rangeRound([height, 0]).padding(0.4);
//Feeding data points on x and y axis
x.domain([0, d3.max(data, function(d) { return +d.frequency; })]);
y.domain(data.map(function(d) { return d.letter; }));
//Final Plotting
//for x axis
g.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
//for y axis
g.append("g")
.call(d3.axisLeft(y))
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.attr("text-anchor", "end");
//the line function for path
var lineFunction = d3.line()
.x(function(d) {return xScale(d.x); })
.y(function(d) { return yScale(d.y); })
.curve(d3.curveLinear);
//defining the lines
var path = g.append("path");
//plotting lines
path
.attr("d", lineFunction(data))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("fill", "none");
});
</script>
</body>
</html>
ERROR:
NEW ERROR:

Look at the console: you don't have a xScale or a yScale.
So, the line generator should be:
var lineFunction = d3.line()
.x(function(d) {return x(d.frequency); })
.y(function(d) { return y(d.letter); })
.curve(d3.curveLinear);
Besides that, frequency is a string, not a number. So, it's a good idea turning it into a number. Write this right after your data variable:
data.forEach(function(d){
d.frequency = +d.frequency;
});
Note: it's a good practice defining your variable names properly, with descriptive names, like xScale, yAxis, chartLegend or formatNumber... Look at your line generator: you have two different x in a single line. If you don't take care, you'll mix them.

If you want to use xScale and yScale , you need to define these functions. Syntax is given below (ignore values):
Below code is for d3 version 3
me.xscale = d3.scale.linear() // for horizontal distances if using for 2D
.domain([0, 500])
.range([0, 700]);
me.yscale = d3.scale.linear() // for vertical distances if using for 2D
.domain([0, 600])
.range([0, 200]);
These functions are used to define mapping of a values in one range to values in other range.
e.g - Suppose you want draw a graph on your browser screen. And you want assume that width 500px on your browser screen should be counted as 500 on your graph.
You need to define xScale as above . In this case , this function will map every value in domain (0-500) to unique value in range (0-700) and vice versa.

D3 Updating Data Overlays Second Graph Instead of Updating

I'm pretty new to D3 and am working on a reusable bar chart which can be sent new data and it will update the existing graph based on the new data that it receives.
Currently, it is correctly drawing the chart, but when the data changes it is overlaying a graph of the new data over the old graph instead of updating it.
I believe the issue must be with my bars variable and how I'm binding my data but I can't be sure. The data is simply the score of a reddit post from the reddit JSON API.
Example:
My code for the chart is:
d3.namespace.barChart = function() {
var data, group, height, margin = {top: 0, right: 0, bottom: 0, left: 0}, width;
function chart(container) {
group = container;
// Determine the max score and timestamps from the Reddit data for use in our scales
var maxScore = d3.max(data, function(d) { return d.data.score; });
data.forEach(function(d) {
d.data.created *= 1000;
});
// Create the scales to ensure data fits in the graphs
var xScale = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([0, width], 0.25);
var yScale = d3.scale.linear()
.domain([0, maxScore])
.range([0, height]); // .range(starting, )
var yScaleLine = d3.scale.linear()
.domain([0, maxScore])
.range([height, 0]);
var colorScale = d3.scale.linear()
.domain(d3.extent(data, function(d) { return d.data.score; }))
.range(['#DA4453', '#A0D468'])
.interpolate(d3.interpolateRgb);
// Create the Y-Axis function. yScaleLine is used as the scale to ensure
// that the data goes from 0 at the bottom left to max score in the top left
var yAxis = d3.svg.axis()
.scale(yScaleLine)
.orient('left');
// Setup our chart using our width, height and margins.
group.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
// Add a group element for the primary graphic that is moved
// using the margins. Left and top are used since 0,0 is top left corner
var graph = group.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Append our yAxis to the SVG canvas and move it according to the margins
group.append('g')
.attr('class', 'y axis')
.call(yAxis)
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// Inside of our group, we need to make a 'rect' for each item in the dataset
// We link the data, and append one rect for each piece of data.
var bars = graph.selectAll('rect')
.data(data, function(d) { return d.data.id; });
bars.enter()
.append('rect');
// We begin with the height of each bar as 0 allowing us to transition to their full height
bars.attr({
x: function(d, i) { return xScale(i); },
y: function() { return height; },
height: 0,
width: xScale.rangeBand(),
fill: function(d) { return colorScale(d.data.score); }
});
// Events must be linked before a transition to function
bars.on('mouseover', function() {
d3.select(this).attr('fill', '#000');
})
.on('mouseleave', function() {
d3.select(this).attr('fill', function(d) { return colorScale(d.data.score); });
});
bars.transition().duration(150)
.attr({
x: function(d, i) { return xScale(i); },
y: function(d) { return height - yScale(d.data.score); },
height: function(d) { return yScale(d.data.score); },
width: xScale.rangeBand()
});
bars.exit().transition().duration(150).attr({ height: 0.0001 }).remove();
}
EDIT:
After digging into the created source it seems it's not updating but rather just continuing to create a new svg g element for all the rects. Removing the group.append('g') chain fixes the graph not updating but the graph is no longer in a group and makes the SVG very messy.