outputing array variables javascript

Question

I am successfully able to output the coordinates of the last randomly generated points (randomX,randomY) inside the for loop, but I cannot seem to output all of them which would be dependant on how many the user wants. Any help would be appreciated. thanks. You can see the live project here http://math.mercyhurst.edu/~cmihna/DataViz/D3Chart.html

<!doctype html>

<html>
<head>
    <script src="http://math.mercyhurst.edu/~lwilliams/js/d3.js"></script>

    <style>
        .axis path,
        .axis line{
            fill: none;
            stroke: purple;

        }

        .axis text {
            font-family: sans-serif;
            font-size:10px;
        }
    </style>


</head>




<body>

    <h1> D3 Scatter Plot</h1>



    <script align='center' >

        // create variables for the size of the SVG area that D3 will create
        var w = 800
        var h = 600



        var pad = { left: 50, top: 50, bottom: 20, right: 20 }

        var chartHeight = h - pad.top - pad.bottom
        var chartWidth = w - pad.left - pad.right


        var n = prompt("Enter the number of rolls")


        for (var i = 0; i <n; i++)
        {

            var dataset = []


            for (var i = 0; i < n; i++) 

            {
            var randomX = Math.round(Math.random()*w)
            var randomY = Math.round(Math.random()*h)
            var randomR = Math.round(Math.random()*20)



            dataset.push([randomX,randomY,randomR])



            }

            document.write(randomX + ' , ' + randomY)


            console.log(dataset)

        }





        var xscale = d3.scale.linear() 
            .domain([0, d3.max( dataset, function(d) { return d[0] } )])
            .range([0,chartWidth])

        var yscale = d3.scale.linear()
            .domain([0, d3.max( dataset, function(d) { return d[1] } )])
            .range([chartHeight,0])





        var scatterSVG = d3.select("body")
            .append('svg')
            .attr('width', w)
            .attr('height', h)




        scatterSVG.selectAll('circle')
            .data(dataset)
            .enter()
            .append('circle')
            .attr('cx', function(d){ return xscale(d[0]) + pad.left })
            .attr('cy', function(d){ return yscale(d[1]) + pad.top })
            .attr('r', function(d){ return d[2] })
            .attr('fill', function(d) {
                return 'rgb(0,'+d[0]+','+d[1]+')'
            })



        var yAxis = d3.svg.axis()   
            .scale(yscale)
            .orient('left')
            .ticks(6)

        var yAxisObject = scatterSVG.append('g')
            .call(yAxis)
            .attr("class", "axis")
            .attr("transform", 'translate('+pad.left+','+pad.top+')')

        var xAxis = d3.svg.axis()
            .scale(xscale)
            .orient('bottom')
            .ticks(3)

        var xAxisObject = scatterSVG.append('g')
            .call(xAxis)
            .attr("class","axis")
            .attr("transform", 'translate('+pad.left+','+(h-pad.bottom)+')')




            var out = "Here are the coordinates from your " + n + " rolls: ";

            document.write(out)


        </script>






</body>

<footer>

<br>
<br>
<br>
<br>
<input type="button" value="Enter New Number" onClick="window.location.href=window.location.href">

</footer>


</html>

try putting 'document.write(randomX + ' , ' + randomY)' inside the for loop — KiiroSora09
– KiiroSora09, Commented Mar 28, 2016 at 2:41
Then please update the post on what you have already tried so that we would not be guessing. Have you tried putting the declaration 'var dataset = []' outside the for loop and looping through it at the end (after 'document.write(out)') to output each element of the 'dataset' array? — KiiroSora09
– KiiroSora09, Commented Mar 28, 2016 at 2:49
also you're using two for loops with the same variable 'i', maybe you should remove the outer loop instead. — KiiroSora09
– KiiroSora09, Commented Mar 28, 2016 at 2:51
when i remove the first for loop everything still works fine, so i can perminetly take that out. moving the document.write now into the foor loop outputs huge numbers, leaving it outside just outputs the last coordinates. — Thesystem32
– Thesystem32, Commented Mar 28, 2016 at 2:57

Gerardo Furtado · Accepted Answer · 2016-03-28 07:47:57Z

1

I know you already figured out, but it's important to explain: JavaScript doesn't have block scope (unless you use let - see the comments below). This means that the var i in the outer loop is the same var i in the inner loop. So, it's being reset all the time, and the loop never completes.

Normally, when we have two loops one inside the other, we use var i and var j.

edited Mar 28, 2016 at 7:47

answered Mar 28, 2016 at 6:38

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gerardo Furtado Over a year ago

Yes, I remembered that when I was writing the answer, but this is ECMA 6, right? What browsers accept it?

techie_28 Over a year ago

Mozilla does I believe.. :)

techie_28 Over a year ago

actually it is not very well supported.. :D

Thesystem32 · Accepted Answer · 2016-03-28 03:21:32Z

0

fgured it out, seperate for loop

for (var i = 0; i <n; i++)
        {

        document.write("(" + dataset[i] + ")")


        }

answered Mar 28, 2016 at 3:21

Thesystem32

176 bronze badges

Collectives™ on Stack Overflow

outputing array variables javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related