Q:

y scale in scatterplot scales y axis differently than y values D3.js

The scatterplot I'm making has a correct y axis going from 0 to around 5000, but the nodes that are being drawn come way short of their value.
The problem (I think) is domain for y scale. I've tried using extent(), min and max, and hard coding values in. (these attempts are there and commented out). I've debugged the values getting fed into the y scale and they seem to be ok, they should be reaching the top of this chart, but they barely come half way up.
The only way to get the nodes to the top of the chart is if I hardcode the max of y scale domain to be 3000, which isn't even close to the max y value which is around 4600.
picture of chart
<!-- STACK OVERFLOW This code at the top is simple HTML/HTTP request stuff, you can 
scroll down till my other comments to start looking at the problem.
I left this code here so people can run the chart on their browser.-->

<meta charset="utf-8">
<title>Template Loading D3</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>

<style media="screen">
    .axis path,
    .axis line {
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
</style>

</head>
<body>

<h1>Bitcoin BTC</h1>

<script type="text/javascript">

var xhr = new XMLHttpRequest();

function makeRequest(){
    xhr.open("GET", "https://api.coindesk.com/v1/bpi/historical/close.json?start=2010-07-17&end=2017-09-11", true);
    xhr.send();
    xhr.onreadystatechange = processRequest;
}

function processRequest(){
    console.log("testing, state: ", xhr.readyState)
    if(xhr.readyState == 4 && xhr.status == 200){
        let response = JSON.parse(xhr.responseText);
        makeChart(response);
    }
}

// STACK OVERFLOW -- code above this can be ignored since it's just making HTTP request. 
// I'm leaving it here so people can serve this code on their own machine and 
// see it working in their browser. D3 code is below

// When the HTTP request is finished, this function gets called to draw my chart, 
// this is where D3.js starts.
function makeChart(response){
    var w = window.innerWidth - 100;
    var h = window.innerHeight - 100;
    var padding = 20;
    var Lpadding = 45;

// makeDatesAndValues is not part of my problem, this formats the dates
// coming from HTTP request into something easier to feed into D3.js X Scale
    var makeDatesAndValues = function(input){    
        let dates = [];
        let values = [];
        let returnData = [];

        for(prop in input){
            values.push(input[prop])

            let counter = 0;
            let year = [];
            let month = [];
            let day = [];

            for( var j = 0; j < prop.length; j++){
                if(lastDate[j] !== "-" && counter == 0){
                    year.push(prop[j]);
                } else if(prop[j] == "-"){
                    counter++;
                } else if(prop[j] !== "-" && counter == 1){
                    month.push(prop[j])
                } else if(prop[j] !== "-" && counter == 2){
                    day.push(prop[j])
                }
            }
            dates.push([Number(year.join("")), Number(month.join("")), Number(day.join(""))]);

            returnData.push(
                {
                    date: [Number(year.join("")), Number(month.join("")), Number(day.join(""))],
                    value: input[prop]
                }
            )
        }
        return returnData;
    }

    var inputData = makeDatesAndValues(response.bpi);

// HERE WE GO, this is where I think the problem is, drawing the actual chart.
    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

// Here is the problem child, both "y" and the commented out "yScale" are attempts to 
// get the correct y-coordinates for values fed into the scale
// Both of these will make a correct y Axis, but then screw up the y-coordinates of my data 
// getting fed in, as described on SO
    var y = d3.scale.linear()
                    .domain([d3.min(inputData, function(d){ return d.value; }), d3.max(inputData, function(d){ return d.value; })])
                    // .domain([d3.extent(d3.values(inputData, function(d){ return d.value}))])
                    // .domain([0, 3000])
                    .range([h - padding, padding])

    // var yScale = d3.scale.linear()
    //                 // .domain([0, 5000])
    //                 .domain([d3.min(inputData, function(d){ return d.value; }), d3.max(inputData, function(d){ return d.value; })])
    //                 // .domain([d3.extent(d3.values(inputData, function(d){ return d.value}))])
    //                 .range([0, h])

// X scale works fine, no problems here
    var x = d3.time.scale()
                        .domain([new Date(2010, 7, 18), new Date(2017, 7, 18)])
                        .range([Lpadding, w]);

// Both Axes seem to be working fine
    var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom")
                    .ticks(8)

    var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    // .tickSize(-w, 0, 0)
                    .ticks(8)

    svg.selectAll("circle")
                    .data(inputData)
                    .enter()
                    .append("circle")
                    .attr("cx", function(d){
                        let thisDate = x(new Date(d.date[0], d.date[1], d.date[2]))
                        return thisDate;
                    })
// And here is the other side of the problem. There are different attempts 
// to plot they y-coordinate of my values commented out.
// None of these are working and I don't understand why it works correctly 
// for the Y Axis, but my plotted values come way short of where they should be.
                    .attr("cy", function(d, i){
                        console.log("this is with yScale: ", y(d.value))
                        console.log("Without: ", d.value)
                        // return y(( d.value) - padding)
                        // return y(d.value);
                        // return  y(d.value) - (h - padding)
                        return h - padding - y(d.value);
                    })
                    .attr("r", function(d){
                        return 1;
                    })
                    .attr("fill", "red")

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(" + 0 + ", " + (h - padding) + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + Lpadding + ", 0)")
        .call(yAxis);
}

makeRequest();

</script>

</body>

A:

I suggest you may need to consider people's feeling when you post such long codes with poor comments.
Your problem is you are not awareness the coordinate system of SVG where the y points to bottom. The following is a little modification:
svg.selectAll("circle")
    .data(inputData)
    .enter()
    .append("circle")
    .attr("cx", function(d){
        let thisDate = x(new Date(d.date[0], d.date[1], d.date[2]));
        return thisDate;
    })

    // this is the KEY part you should change:
    .attr("cy", function(d, i){ return h - padding - y(d.value); })

    .attr("r", 1)
    .attr("fill", "red");

Since you don't offer detail data, I can't check it. hope it will help!

