D3 - Bubble Chart

by Rishabh Sharma

HTML

<script src="https://d3js.org/d3.v4.js"></script>
<div class="chart-example" id="chart">
  <svg></svg>
</div>

JavaScript

var chart = bubbleChart().width(300).height(300);
d3.select('#chart').data(getData()).call(chart);

function bubbleChart() {
  var width = 480,
    height = 480,
    maxRadius = 6,
    columnForColors = "probability",
    columnForRadius = "price";

  function chart(selection) {
    var data = selection.enter().data();
    var div = selection,
      svg = div.selectAll('svg');
    svg.attr('width', width).attr('height', height);

    var tooltip = selection
      .append("div")
      .style("position", "absolute")
      .style("visibility", "hidden")
      .style("color", "white")
      .style("padding", "8px")
      .style("background-color", "#626D71")
      .style("border-radius", "6px")
      .style("text-align", "center")
      .style("font-family", "monospace")
      .style("width", "100px")
      .text("");


    var simulation = d3.forceSimulation(data)
      .force("charge", d3.forceManyBody().strength([-30]))
      .force("x", d3.forceX())
      .force("y", d3.forceY())
      .on("tick", ticked);

    function ticked(e) {
      node.attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        });
    }

    var colorCircles = d3.scaleOrdinal(d3.schemeCategory10);
    var color = function(value) {
      if (value > .50) return '#659157';
      else if (value > .40) return '#72A563';
      else if (value > .30) return '#82BC71';
      else if (value > .20) return '#98DB83';
      else return '#A4ED8E';
    }
    var scaleRadius = d3.scaleLinear().domain([d3.min(data, function(d) {
      return +d[columnForRadius];
    }), d3.max(data, function(d) {
      return +d[columnForRadius];
    })]).range([5, 18])

    var node = svg.selectAll("circle")
      .data(data)
      .enter()
      .append("circle")
      .attr('r', function(d) {
        return scaleRadius(d[columnForRadius])
      })
      .style("fill", function(d) {
        console.log(d[columnForColors]);
        return...