CODEWITHSUNDEEP
d3.jschartsdata-visualization
Clannad System
Clannad System

Reputation: 489

How to create a D3 Bubble Chart in straigth line path?

I would like to create a bubble chart, like the one in the image. A bubble chart in straigth line path. The bubbles having a size range for each type of data.

enter image description here

Upvotes: 0

Views: 1981

Answers (1)

elydelacruz
elydelacruz

Reputation: 155

Use an svg element, loop through data, and for each datum draw circle and append text field. Here is a base to build from:

var data = [{
    label: 'Datum 1',
    rVal: 1,
    yVal: 1,
    xVal: 1,
        'class': 'red'
}, {
    label: 'Datum 2',
    rVal: 2,
    yVal: 1,
    xVal: 2,
        'class': 'green'
}, {
    label: 'Datum 3',
    rVal: 3,
    yVal: 1,
    xVal: 3,
        'class': 'blue'
}],

    // Preliminaries
    // domain is the data domain to show
    // range is the range the values are mapped to
    svgElm = d3.select('svg'),
    rscale = d3.scale.linear().domain([0, 5])
        .range([0, 60]),
    xscale = d3.scale.linear().domain([0, 5])
        .range([0, 320]),
    yscale = d3.scale.linear().domain([0, 5])
        .range([240, 0]),
    circles;

// Circles now easily reusable
circles = svgElm.select('g.data-group')
    .selectAll('circle')
    .data(data)
    .enter()
    .append('circle');

// Alter circles
circles.attr('class', function (d) {
    return d['class'];
})
    .attr('r', function (d) {
    return rscale(d.rVal);
})
    .attr('cx', function (d) {
    return xscale(d.xVal);
})
    .attr('cy', function (d) {
    return yscale(d.yVal);
});

See full example on jsfiddle: http://jsfiddle.net/elydelacruz/XW8sE/13/

Upvotes: 3

Related Questions