D3 - tickFormat not working - javascript

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/

Related

How to place the bars of a bar chart in the right positions of the xAxis using d3.js?

I'm making a bar chart but I'm having problems to match the bar positions with the xAxis. They're not in the right place, for example, by hovering the bar above the 2010 mark, you can see it shows a 2007 value. How can I fix that?
let url = "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json";
const padding = 50;
const height = 460;
const width = 940;
const barthickness = 2.909090909090909;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var arr = [];
var years = [];
d3.json(url, function(data) {
for (let i = 0; i < data.data.length; i++) {
arr[i] = data.data[i];
years[i] = parseInt(data.data[i][0].slice(0,4));
}
const yScale = d3.scaleLinear()
.domain([0, d3.max(arr, (d) => d[1])])
.range([height - padding, padding]);
const xScale = d3.scaleLinear()
.domain([d3.min(years, d => d), d3.max(years, (d) => d)])
.range([padding, width - padding]);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xAxis);
svg.append('g')
.attr('transform', 'translate(' + padding + ', 0)')
.call(yAxis)
svg.selectAll('rect')
.data(arr)
.enter()
.append('rect')
.attr('fill', 'blue')
.attr('height', d => height - padding - yScale(d[1]))
.attr('width', barthickness)
.attr('x', (d, i) => padding + (3.2* i))
.attr('y', d => yScale(d[1]))
.append('title')
.text((d, i) => years[i] + ': ' + d[1])
});
<script src="https://d3js.org/d3.v4.min.js"></script>

The problem is that you are not using your x-scale to position the bars. You are using padding + (3.2* i) to set the x coordinate of the bars, which does not line up with your scale. Your chart is 840 pixels wide and has 275 bars, which would be ~3.055 pixels per bar. Your code is placing bars every 3.2 pixels, which is too far.
Typically with bar charts, rather than hard-coding a bar thickness, you use a band scale. You'll want to use your scales both in your axes and to position the bars.
Alternatively, since you are working with temporal data, you could also consider using an area chart instead of a bar chart.
Below I've provided two similarly looking charts for your data. One is a bar chart and the other an area chart.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v7.js"></script>
</head>
<body>
<div id="bar-chart"></div>
<div id="area-chart"></div>
<script>
const url = 'https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json';
d3.json(url).then(json => {
// convert the string into Date objects
const parse = d3.timeParse('%Y-%m-%d');
const data = json.data.map(d => ({ date: parse(d[0]), value: d[1] }));
barchart(data);
areachart(data);
});
function barchart(data) {
// set up
const margin = { top: 20, right: 20, bottom: 20, left: 30 };
const width = 600 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
const svg = d3.select('#bar-chart')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
// scales
const x = d3.scaleBand()
.domain(data.map(d => d.date))
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height, 0]);
// axes
// by default, axes for band scales show tick marks for every bar
// that would be too cluttered for this data, so we override this
// by explicitly setting tickValues()
const [minDate, maxDate] = d3.extent(data, d => d.date);
const xAxis = d3.axisBottom(x)
.tickSizeOuter(0)
// only show the year in the tick labels
.tickFormat(d3.timeFormat('%Y'))
.tickValues(d3.timeTicks(minDate, maxDate, 10));
const yAxis = d3.axisLeft(y)
.tickSizeOuter(0)
.ticks(10, '~s');
svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(xAxis);
svg.append('g')
.call(yAxis);
// bars
// function to convert Date into string showing the month and year
const format = d3.timeFormat('%b %Y');
svg.selectAll('rect')
.data(data)
.join('rect')
.attr('x', d => x(d.date))
.attr('width', d => x.bandwidth())
.attr('y', d => y(d.value))
.attr('height', d => height - y(d.value))
.attr('fill', 'steelblue')
.append('title')
.text(d => `${format(d.date)}: ${d.value}`)
}
function areachart(data) {
// set up
const margin = { top: 20, right: 20, bottom: 20, left: 30 };
const width = 600 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
const svg = d3.select('#area-chart')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
// scales
const x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range([height, 0]);
// area generator
const area = d3.area()
.x(d => x(d.date))
.y0(y(0))
.y1(d => y(d.value))
.curve(d3.curveStepAfter);
// axes
const xAxis = d3.axisBottom(x)
.tickSizeOuter(0)
// only show the year in the tick labels
.tickFormat(d3.timeFormat('%Y'));
const yAxis = d3.axisLeft(y)
.tickSizeOuter(0)
.ticks(10, '~s');
svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(xAxis);
svg.append('g')
.call(yAxis);
// area
svg.append('path')
.attr('d', area(data))
.attr('fill', 'steelblue')
}
</script>
</body>
</html>

How to parse new Date.now() object with D3.js to generate a linechart

I'm trying to make a linechart with D3 and React where the x axis is based on Date.now() object and all the ticks are a minute apart on a 10mn window.
I can't generate the line because I get "NaNNaNNaN" in my svg path;
Can't seem to figure out how to have ticks minutes apart on my x axis;
Here's how the data looks like
// data state
data = [
{"loadAverage":0.008333333333333333,"timestamp":1632740462342},
{"loadAverage":0.008333333333333333,"timestamp":1632740459323},
{"loadAverage":0.013333333333333334,"timestamp":1632740471400}
];
the timestamp key is a new Date.now() coming from the server
useEffect(() => {
const svg = d3.select(d3Container.current);
let margin = { top: 20, right: 20, bottom: 50, left: 70 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
let x = d3
.scaleTime()
.domain(d3.extent(data, (d) => timeFormat(d.timestamp)))
.range([0, width]);
let y = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d.loadAverage)])
.nice()
.range([height, 0]);
// Parse the date
let parseTime = d3.timeParse("%s");
let timeFormat = d3.timeFormat("%M:%S");
// Constructing the line
const myLine = d3
.line()
.x((d) => {
const convertedTime = parseTime(d.timestamp);
return x(convertedTime);
})
.y((d) => {
return y(d.loadAverage);
});
svg
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg
.select("svg")
.selectAll("path")
.data([data])
.join("path")
.attr("d", (value) => myLine(value))
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
// Add the x Axis
svg
.select("svg")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the y Axis
svg
.select("svg")
.append("g")
.call(d3.axisLeft(y).tickFormat(timeFormat).ticks(10));
}, [data]);
This is my first time using D3, any help would be greatly appreciated !
Edit: here's what I tried so far
// Constructing the line
const myLine = d3
.line()
.x((d) => {
const convertedTime = new Date(d.timestamp);
return x(convertedTime);
})
.y((d) => {
return y(d.loadAverage);
});
Even tried to return convertedTime wrapped up by parsetime like so parsetime(convertedTime) Didn't work either.

I think you have a problem in Initializing x scale domain
// set the ranges
let x = d3
.scaleTime()
// ⬇️ here is the issue, just get rid of timeFormat
.domain(d3.extent(data, (d) => timeFormat(d.timestamp)))
.range([0, width]);
the scaleTime expect the domain to be a [Date|number, Date|number], you are using timeFormat which convert number|Date into a string based on the given format.
Try to use this instead:
let x = d3
.scaleTime()
.domain(d3.extent(data, (d) => d.timestamp))
.range([0, width]);
// The short vesion
let x = d3.scaleTime(d3.extent(data, (d) => d.timestamp), [0, width])
Constructing the line
const myLine = d3
.line()
.x((d) => x(d.timestamp))
.y((d) => y(d.loadAverage));
If you need to convert timestamps into Dates, you can map the whole data array
data = data.map(d=> d.timestamp = new Date(d.timestamp), d)

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.js bar chart, bars extending from top to bottom, instead of bottom to top

Barchart image
D3.js bar chart, bars extending from top to bottom, instead of bottom to top.
I am not sure what attributes i should be changing to correct this.
I have posted my code and an image of the resulting chart.
...
const marketCataRender = marketCataData => {
const marketCataSVG = d3.select('.marketCataChart').append('svg')
marketCataSVG.attr('class', 'marketCataSVG')
.attr('height', marketCataHeight)
.attr('width', marketCataWidth);
// x y values
const xValue = d => d.loc_start_str;
const yValue = d => d.total_matched;
// x y scales
const xScale = d3.scaleBand()
.domain(marketCataData.map(xValue))
.range(\[0, innerWidth\]);
const yScale = d3.scaleLinear()
.domain(d3.extent(marketCataData, yValue))
.range(\[innerHeight, 0\])
.nice();
// x y axis
const xAxis = d3.axisBottom(xScale)
const yAxis = d3.axisLeft(yScale)
// set chart group to make it easier to transform
const g = marketCataSVG.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// x y axis groups
const xAxisG = g.append('g')
.call(xAxis)
.attr('transform', `translate(0, ${innerHeight})`)
.selectAll('text')
.style('text-anchor', 'end')
.attr('transform', `rotate(-90)`)
.attr('x', -7)
const yAxisG = g.append('g')
.call(yAxis)
// Apply bar chart rectangle to chart
const marketCataRect = g.selectAll('rect')
marketCataRect.data(marketCataData)
.enter().append('rect')
.attr('x', d => xScale(xValue(d)))
.attr('height', d => yScale(yValue(d)))
.attr('width', xScale.bandwidth());
}][1]
...

You haven't declared the Y coordinates for your rectangles.
You need to scale the y coordinate of your rectangles.
const marketCataRect = g.selectAll('rect')
marketCataRect.data(marketCataData)
.enter().append('rect')
.attr('x', d => xScale(d.loc_start_str) )
.attr('y', d => yScale(d.total_matched) ) // set y
.attr('height', d => marketCataHeight - yScale(d.total_matched)) // find height by subtracting y value from height of the chart.
.attr('width', xScale.bandwidth());
example here: https://bl.ocks.org/d3noob/8952219

Try to always provide a Minimal, Complete, and Verifiable example. https://stackoverflow.com/help/mcve
I tried to do this by taking your code and adding dummy data etc. and then modifying it
The result is this (Demo here- https://codepen.io/Alexander9111/pen/gObEZym):
HTML:
<div class="marketCataChart"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
Javascript:
const marketCataHeight = 800;
const marketCataWidth = 2000;
const innerWidth = 1500;
const innerHeight = 500;
const margin = {
top: 30,
left: 30,
bottom: 30,
right: 30
};
const marketCataRender = marketCataData => {
const marketCataSVG = d3.select('.marketCataChart').append('svg')
marketCataSVG.attr('class', 'marketCataSVG')
.attr('height', marketCataHeight)
.attr('width', marketCataWidth);
// x y values
const xValue = d => d.loc_start_str;
const yValue = d => d.total_matched;
// x y scales
const xScale = d3.scaleBand();
xScale.domain(marketCataData.map(xValue))
.range([0, innerWidth]);
const yScale = d3.scaleLinear();
yScale.domain(d3.extent(marketCataData, yValue))
.range([innerHeight, 0])
.nice();
// x y axis
//const xAxis = d3.axisBottom(xScale)
const xAxis = d3.axisTop(xScale) //change to axisTop
const yAxis = d3.axisLeft(yScale)
// set chart group to make it easier to transform
const g = marketCataSVG.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// x y axis groups
const xAxisG = g.append('g')
.call(xAxis)
.attr('class', 'x-axis')
.attr('transform', `translate(0, ${0})`) // no longer need to translate by innerHeight as the x-axis is on the top
.selectAll('text')
.style('text-anchor', 'middle')
.attr('transform', `rotate(-0)`) //-90
.attr('x', -7)
const yAxisG = g.append('g')
.call(yAxis)
.attr('class', 'y-axis');
// Apply bar chart rectangle to chart
const marketCataRect = g.selectAll('rect');
marketCataRect.data(marketCataData)
.enter().append('rect')
.attr('x', d => xScale(xValue(d)))
.attr('height', d => yScale(yValue(d)))
.attr('width', xScale.bandwidth());
//Optional - add chart border:
g.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', innerWidth)
.attr('height', innerHeight)
.attr('stroke', 'black')
.attr('stroke-width', '1px')
.attr('fill', 'none')
.attr('class', 'chart-boarder');
};
const marketCataData = [
{loc_start_str: "example0", total_matched: 0},
{loc_start_str: "example1", total_matched: 100},
{loc_start_str: "example2", total_matched: 200},
{loc_start_str: "example3", total_matched: 300},
{loc_start_str: "example4", total_matched: 400},
]
marketCataRender(marketCataData);
Most important lines were: const xAxis = d3.axisTop(xScale) and const xAxisG.attr('transform', `translate(0, ${0})`)

D3: scale data on the x-axis every 7 years

I have a d3 project where I want to include all my dates but only on certain intervals. Right now it displays everything which is too cluttered. I only want to display the labels on the x axis every 7 years. so for example 1947, 1954, 1961, 1968, etc. Pease help and thank you in advance.
Here is my code:
loadData = ()=> {
req = new XMLHttpRequest();
req.open("GET", "https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json" , true);
req.send();
req.onload= ()=>{
json = JSON.parse(req.responseText);
//dynmaic height
/*var margin = {top: 20, right: 200, bottom: 0, left: 20},
width = 300,
height = datajson.length * 20 + margin.top + margin.bottom;*/
//create measurements
const margin = 60
const width = 1000 - margin;
const height = 600 - margin;
const maxYScale = d3.max(json.data, (d) => d[1]);
//date formatter
const formatDate = d3.timeParse("%Y-%m-%d"); //convert from string to date format
const parseDate = d3.timeFormat("%Y"); //format date to cstring
//create svg
const svg = d3.select("svg");
const chart = svg.append("g")
.attr("transform", `translate(${margin}, ${margin})`);
//y-axis: split charts into 2 equal parts using scaling function
const yScale = d3.scaleLinear()
.range([height, 0]) //length
.domain([0, maxYScale]); //content
//create x-axis
const yAxis = d3.axisLeft(yScale);
//append y-axis
chart.append("g")
.call(yAxis);
//create x-scale
const xScale = d3.scaleBand()
.range([0, width]) //length
//.domain(json.data.filter((date, key) => { return (key % 20 === 0)}).map((d)=> parseDate(formatDate(d[0]))))
.domain(json.data.map((d)=> parseDate(formatDate(d[0]))))
.padding(0.2);
//create x-axis
const xAxis = d3.axisBottom(xScale);
//append x-axis
chart.append("g")
.attr(`transform`, `translate(0, ${height})`)
.call(xAxis);
//make bars
chart.selectAll("rect")
.data(json.data)
.enter()
.append("rect")
.attr("x", (d) => xScale(parseDate(formatDate(d[0]))))
.attr("y", (d) => yScale(d[1]))
.attr("height", (d) => height - yScale(d[1]))
.attr("width", xScale.bandwidth())
}
}
loadData();
Here is my codepen:
codepen

I am just going to answer my own question as I found the solution. In order to set intervals in the x axis I simply used tickValues. Then I used my scale and a filter function to filter the intervals based on the data I had. Below you may find the answer.
const xAxis = d3.axisBottom(xScale)
.tickValues(xScale.domain().filter(function(d) { return (d % 7 === 0)}));

Categories