function render(nodes) {
    var svg = d3.select('svg') 
    var width = +svg.attr('width')
    var height = +svg.attr('height')
    var vis = svg.select('g.vis') 
    var axis = svg.select('g.axis') 
    var f = d3.format('.2f')

    var xScale = d3.scaleLinear()
        .domain([0, 100])
        .range([0, 900])

    var simulation = d3.forceSimulation(nodes) 
        .force('x', d3.forceX().x(function (d) { return xScale(d.value); }).strength(1))
        .force('y', d3.forceY().y(function (d) { return height/2; }).strength(1))
        .force('collision', d3.forceCollide(7))//.radius(d => d.radius + 1))

    simulation.stop()

    for (var i = 0; i < nodes.length; ++i){
        simulation.tick()
    }     

    //append circles
    var u = vis.selectAll('circle')
        .data(nodes)

    u.enter()
        .append('circle')
        // .attr('r', d => d.radius + 1))
        .attr('r', 5)
        .style('fill', function (d) { return d.color; })
        .merge(u)
        .attr('cx', function (d) { return d.x; })
        .attr('cy', function (d) { return d.y; })
        .on('mouseover', function(d) {
            d3.select('#js-info').text(("size: " + (f(d.radius)) + " | x: \n                " + (f(d.value))))
        })

    u.exit().remove()

    // render an axis
    var xAxis = d3.axisBottom().scale(xScale)
    axis.call(xAxis)

}