basic bubble chart

by Ryan

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="chart"></div>
Max Radius:<input type="text" id="rScale" value="10"/>
<button id="redraw">Redraw</button>

CSS

body { font: 10px sans-serif; }
svg { background-color: #eee; }

.circle {
    fill: #f77;
    stroke: #d00;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 400 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var data = [
    {x:1, y:1, s:1},
    {x:2, y:2, s:2},
    {x:3, y:3, s:1},
    {x:4, y:2, s:3},
    {x:5, y:3, s:4},
    {x:6, y:4, s:3},
    {x:7, y:6, s:2},
    {x:8, y:4, s:1},
    {x:9, y:4, s:2},
    {x:10, y:2, s:1}
];

var xScale = d3.scale.linear().range([0, width]).domain([0, 10.5]);
var yScale = d3.scale.linear().range([height, 0]).domain([0, 10]);
var rScale = d3.scale.linear().range([0, 20]).domain([0, 5]);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");

var g = d3.select("div#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

g.append("g")
    .attr("class", "y axis")
    .call(yAxis)

var redraw = function(){
    var rScaleValue = d3.select("input#rScale").node().value;
    rScale.range([0, rScaleValue]);
    
    // Join
    var circle = g.selectAll("circle").data(data);
    
    // Enter
    circle.enter()
        .append("circle")
        .attr("class", "circle")
        .style("opacity", 0.5);

    // Enter/Update
    circle.transition().duration(300)
        .attr("r", function(d) { return rScale(d.s); })
        .attr("cx", function(d) { return xScale(d.x); })
        .attr("cy", function(d) { return yScale(d.y); })
    
    //Exit
    circle.exit()
        .transition().duration(500)
            .style("opacity", 0)
            .remove();
    
};

d3.select("button#redraw").on("click", function(d){
    redraw();
});

redraw();