We Keep Coding

How to Size D3 Contours - javascript

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>

Related

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>

I'm trying to create a function that creates a histogram for a given array. Clearly, there's no data for the X-Axis and I have to choose the bins arbitrarily. What would be the best way to do so?
My code:
var width = 700, height = 500, pad = 30, barPadding = 1;
function plotHistogram(element, dataset) {
var svg = d3.select(element)
.append("svg")
.attr("width", width)
.attr("height", height)
var bars = svg.append("g")
// Container box
var rectangle = svg.append("rect")
.attr("height", height)
.attr("width", width)
.attr("stroke-width", 2).attr("stroke", "#ccc")
.attr("fill", "transparent")
var xScale = d3.scaleLinear()
// Using default domain (0 - 1)
.range([pad, width - pad * 2])
var yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, function(d) { return d; })])
.range([height - pad, pad])
var xAxis = d3.axisBottom(xScale)
var yAxis = d3.axisLeft(yScale)
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height - pad) + ")")
.call(xAxis)
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + pad +", 0)")
.call(yAxis)
svg.selectAll("bars")
.data(dataset)
.enter()
.append("rect")
// Evenly spacing out bars
.attr("x", function(d, i) { return i * width/dataset.length; })
// Top of each bar as the top of svg. To remove inverted bar graph.
.attr("y", function(d) { return height - (d * 4); })
// To give padding between bars
.attr("width", width / dataset.length - barPadding)
// To make the bars taller
.attr("height", function(d) { return d * 4; })
.attr("fill", "teal");
}
// #normal is the id of the div element.
plotHistogram("#normal", [10, 20, 30, 40, 50, 60, 70, 80]);
Edit 1: I have decided to use the default bin size (0 - 1) for the xScale above. I'm facing problems creating the bars.

Generate the bins as in https://bl.ocks.org/mbostock/3048450
The array in your plotHistogram is like the array data in #mbostock's bl.ock...
HTH

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/

I am making a bar chart with D3. Most of the work is done, but the output is not behaving as I expect it to, and I can't figure the problem out.
The sample data is this, which is a JSON file comprising an array of figures for Gross Domestic Product in the US.
My bar chart is showing the curve I expect, although the figures start just over 2000, whereas in the data, they start at just over 200. I have attempted to change around the values but each time I tinker with the y positioning and height, I get unexpected results.
JS:
var fccDataUrl = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
var dataset;
var fccData;
$.getJSON(fccDataUrl, (myData) => {
dataset = myData.data;
fccData = myData;
console.log('dataset', dataset)
console.log('fccData', fccData)
var w = '800'
var h = '500'
var padding = 50;
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h)
var xScale = d3.scale.linear()
.domain([1947, 2015])
.range([padding, w - padding])
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, d => d[1])])
.range([h - padding, padding])
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(10)
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.ticks(10)
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.classed('bars', true)
.attr('x', (d, i) => i * (w / dataset.length) + 50)
.attr('y', d => yScale(d[1]) - 50)
.style('width', '4px')
.style('height', d => h - yScale(d[1]))
svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(0, ${h - padding})`)
.call(xAxis)
svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(${padding}, 0)`)
.call(yAxis)
});
Here is a codepen of my work so far.

There is some mix-up between h, and the chart height. Here is an updated codepen with the padding, h, and chartHeight defined separately.
var fccDataUrl = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
var dataset;
var fccData;
$.getJSON(fccDataUrl, (myData) => {
dataset = myData.data;
fccData = myData;
console.log('dataset', dataset)
console.log('fccData', fccData)
var w = '800'
var h = '500'
var padding = {top: 50, bottom: 50, right: 50, left: 50};
var chartWidth = w - padding.left - padding.right;
var chartHeight = h - padding.top - padding.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', w)
.attr('height', h)
.append("g") // apply the transform to the parent elem instead of individually.
.attr("transform", `translate(${padding.left}, ${padding.top})`)
var xScale = d3.scale.linear()
.domain([1947, 2015])
.range([0, chartWidth]) // no need to account for padding anymore
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, d => d[1])])
.range([chartHeight, 0]) // no need to account for padding anymore
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(10)
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.ticks(10)
svg.selectAll('rect')
.data(dataset)
.enter()
.append('rect')
.classed('bars', true)
.attr('x', (d, i) => i * (w / dataset.length)) // no need to account for padding anymore
.attr('y', d => yScale(d[1])) // no need to account for padding anymore
.style('width', '4px')
.style('height', d => chartHeight - yScale(d[1]))
svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(0, ${chartHeight})`) // no need to account for padding anymore
.call(xAxis)
svg.append('g')
.attr('class', 'axis')
//.attr('transform', `translate(${padding}, 0)`) // no need to account for padding anymore
.call(yAxis)
});

Solution:
I spent a little time looking into this, and came up with a decent solution. Lars is right, d3.js doesn't really allow for what I wanted, but with a little layering, it worked out. Basically, I created a new SVG to contain only the axis, overlaid it on the actual graph and tied the two zoom scales together. Here is the code:
var x = d3.scale.linear()
.nice()
.domain([-1, 1])
.range([0, w]);
var xScale = d3.scale.linear()
.nice()
.domain([0, 1])
.range([0, 230]);
var xAxis = d3.svg.axis()
.scale(xScale)
.ticks(3)
.tickSize(7);
var y = d3.scale.linear()
.nice()
.domain([1, -1])
.range([h, 0]);
/* Control panning and zooming */
var zoom = function() {
if( d3.event ) {
zm.scale(d3.event.scale).translate(d3.event.translate);
za.scale(d3.event.scale); // don't translate so the axis is fixed
}
/* Do other zoom/pan related translations for chart */
// Update x-axis on pan and zoom
vis2.select(".xaxis")
.transition()
.ease("sin-in-out")
.call(xAxis);
vis.selectAll("line.link")
.attr("x1", function(d) { return x(parseFloat(d.source.x)); })
.attr("y1", function(d) { return y(parseFloat(d.source.y)); })
.attr("x2", function(d) { return x(parseFloat(d.target.x)); })
.attr("y2", function(d) { return y(parseFloat(d.target.y)); });
};
var zm = d3.behavior.zoom().x(x).y(y).scaleExtent([-Infinity, Infinity]).on("zoom", zoom);
var za = d3.behavior.zoom().x(xScale).scaleExtent([-Infinity, Infinity]).on("zoom", zoom);
force = d3.layout.force()
.gravity(0)
.charge(-5)
.alpha(-20)
.size([w, h]);
nodes = force.nodes();
links = force.links();
vis = d3.select(CHART).append("svg:svg")
.attr("width", w)
.attr("height", h)
.call(zm);
vis.append("rect")
.attr("class", "overlay")
.attr("width", "100%")
.attr("height", "100%");
vis2 = vis.append("svg:svg")
.attr("width", 300)
.attr("height", 30)
.call(za);
vis2.append("svg:g")
.attr("class", "xaxis")
.attr("transform", "translate(20,10)")
.call(xAxis);
vis2.append("rect")
.attr("class", "overlay")
.attr("width", "100%")
.attr("height", "100%");
force.on("tick", zoom);
The result (with some additional CSS, of course) looks something like this, where the scale adjusts automatically as the user zooms in and out:
http://i.imgur.com/TVYVp4M.png
Original Question:
I have a chart in D3js that displays a scale along the X-axis and appropriately updates as I zoom in and out. However, rather than having the entire bottom of the chart be a scale, I'd like to display the scale as more of a legend, like a distance scale on a map (ex. http://2012books.lardbucket.org/books/essentials-of-geographic-information-systems/section_06/91302d9e3ef560ae47c25d02a32a629a.jpg). Is this possible?
Snippet of relevant code:
var x = d3.scale.linear()
.nice()
.domain([-1, 1])
.range([0, w]);
var xAxis = d3.svg.axis()
.scale(x);
var zoom = function() {
vis.selectAll("g.node")
.attr("transform", function(d) {
return "translate(" + x(parseFloat(d.x)) + "," + y(parseFloat(d.y)) + ")";
});
// Update x-axis on pan and zoom
vis.select(".xaxis")
.transition()
.ease("sin-in-out")
.call(xAxis);
};