score:4

Accepted answer

Here are the necessary changes:

var color = d3.scaleLinear()

Instead of scale.linear().

And for the force:

var force = d3.forceSimulation()
    .force("collide", d3.forceCollide(12))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .nodes(data)
    .on("tick", tick);

Here is a demo with the "enter" selection (which I moved outside the tick function, besides removing all code that doesn't matter for the force):

function draw_bble() {
    var width = 500,
        height = 400,
        padding = 20;

    var start = new Date(2013, 0, 1),
        end = new Date(2013, 11, 31)

    var data = []

    for (i = 0; i < 80; i++) {
        var point = {}

        var year = 2013;
        var month = Math.floor(Math.random() * 12)
        var day = Math.floor(Math.random() * 28)

        point.date = new Date(year, month, day)
        point.mIndex = i
        point.impact = Math.floor(Math.random() * 80)
        data.push(point)
    }

    var color = d3.scaleLinear()
        .domain([d3.min(data, function(d) {
            return d.impact;
        }), (d3.max(data, function(d) {
            return d.impact;
        }) - d3.min(data, function(d) {
            return d.impact;
        })) / 2, d3.max(data, function(d) {
            return d.impact;
        })])
        .range(["red", "#FFFF55", "green"]);

    var force = d3.forceSimulation()
        .force("collide", d3.forceCollide(12))
        .force("center", d3.forceCenter(width / 2, height / 2))
        .nodes(data)
        .on("tick", tick);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var nodes = svg.selectAll(".node")
        .data(data, function(d) {
            return d.mIndex;
        }).enter()
        .append("circle")
        .attr("class", "node")
        .attr("r", 10)
        .attr("fill", function(d) {
            return color(d.impact)
        })
        .style("stroke", "#000")
        .style("stroke-width", "1px");

    function tick() {

        nodes.attr("cx", function(d) {
                return d.x
            })
            .attr("cy", function(d) {
                return d.y
            })
    }
}
draw_bble();
<script src="https://d3js.org/d3.v4.min.js"></script>


Related Query