<script>
var jsonData = [
    
    //Q1 - ТРЕБА, ХОЧУ
    {interest: 'Релігії',       треба: 1,    хочу: 3},
    {interest: 'Подорожі',      треба: 1,    хочу: 6},
    {interest: 'Книжки',        треба: 2,    хочу: 1},

    //Q2 - НЕ треба, ХОЧУ
    {interest: 'Генеалогія',    треба: -1,  хочу: 10},
    {interest: 'Генетика',      треба: -6,   хочу: 9},
    {interest: 'Історія',       треба: -2,   хочу: 8},
    {interest: 'Етимологія',    треба: -3,   хочу: 7},
    {interest: 'Картографія',     треба: -1,   хочу: 6},
    {interest: 'Філософія',     треба: -8,  хочу: 4},
    {interest: 'Музика',        треба: -10,  хочу: 9},
    {interest: 'Overtone',      треба: -10,  хочу: 7},
    {interest: 'English',       треба: -4,   хочу: 10},
    {interest: 'Polska',        треба: -5,   хочу: 8},
    {interest: 'Deutsch',       треба: -5,   хочу: 6},
    {interest: 'Латинь',        треба: -5,   хочу: 4},
    {interest: 'Блоги',         треба: -8,   хочу: 10},
    {interest: 'Психологія',    треба: -7,   хочу: 5},
    {interest: 'Сноуборд',      треба: -6,   хочу: 1},
    {interest: 'Зодіак',        треба: -10,   хочу: 5},
    {interest: 'Робота',        треба: -2,   хочу: 4},
    {interest: 'Комп\'ютер',    треба: -1,    хочу: 2},
    {interest: 'Фізіогноміка',  треба: -10,    хочу: 2},

    //Q3 - НЕ треба, НЕ хочу
    {interest: 'Фотографії',    треба: -8,   хочу: -1},
    {interest: 'Політика',      треба: -5,   хочу: -5},
    {interest: 'Французька',    треба: -7,   хочу: -2},
    {interest: 'Бізнес',        треба: -1,   хочу: -10},
    {interest: 'Менеджмент',    треба: -3,   хочу: -10},
    {interest: 'Космос',        треба: -10,   хочу: -1},

    //Q4 - ТРЕБА, НЕ хочу
    {interest: 'Одружитись',    треба: 10,   хочу: -4},
    {interest: 'Здоровя',       треба: 10,   хочу: -9},
    {interest: 'Їда',   				треба: 1,    хочу: -2},
    {interest: 'Машина',        треба: 8,    хочу: -2},
    {interest: 'Квартира',      треба: 7,    хочу: -1},
    {interest: 'Будинок',       треба: 3,    хочу: -8},
    {interest: 'Відпочинок',    треба: 9,    хочу: -3},
    {interest: 'Ранкові Пробіжки',треба: 5,    хочу: -1},
  
];
  
var jsonDataMapped = jsonData.map(function(elem, index, arr){
    var newObj = {
        text: elem.interest,
        size: (elem.хочу + 20),
        // size: (elem.треба + 20),
    };
    return newObj;
});
</script>
<div id="chart"></div>

<div id="cloud"></div>
#chart, #cloud {
  display: inline-block;
}

.c3-region.Q1 {
  fill: gray;
}
.c3-region.Q2 {
  fill: green;
}
.c3-region.Q3 {
  fill: blue;
}
.c3-region.Q4 {
  fill: yellow;
}
//
// Scatter chart
//
var chart = c3.generate({
    size: {
        width: 500
    },
    data: {
        json: jsonData,
        keys: {
            x: 'треба', 
            value: ['хочу'],
        },
        xSort: false,
        type: 'scatter',
    },
    regions: [
        // Q1 quadrant (x>0, y>0)
        {axis: 'x', start: 0, end: 12, class: 'Q1'},
        {axis: 'y', start: 0, end: 12, class: 'Q1'},

        // Q2 quadrant (x<0, y>0)
        {axis: 'x', start: -12, end: 0, class: 'Q2'},
        {axis: 'y', start: 0, end: 12, class: 'Q2'},

        // Q3 quadrant (x<0, y<0)
        {axis: 'x', start: -12, end: 0, class: 'Q3'},
        {axis: 'y', start: 0, end: -12, class: 'Q3'},

        // Q4 quadrant (x>0, y<0)
        {axis: 'x', start: 0, end: 12, class: 'Q4'},
        {axis: 'y', start: 0, end: -12, class: 'Q4'}
    ],
    point: {
        r: 10
    },
    axis: {
        x: {
            label: 'Треба',
            min: -11,
            max: 11,
            tick: {
                fit: false
            }
        },
        y: {
            label: 'Хочу',
            min: -10,
            max: 10,
            tick: {
                fit: false
            }
        }
    },
    legend: {
        hide: true
    },
    tooltip: {
        format: {
            title: function (x) { 
                return 'треба ' + x; 
            },
            name: function (name, ratio, id, index) { 
                // console.log(name, id, index);
                return 'хочу ('+jsonData[index].interest+')'; 
            }
        }
    }
});

chart.xgrids([
  {value: 0, text:''}
]);

chart.ygrids([
  {value: 0, text:''}
]);

function drawLabels(chartInternal) {
    var textLayers = chartInternal.main.selectAll('.' + c3.chart.internal.fn.CLASS.texts);

    var callback = function (point, index) {
        var d3point = d3.select(point);
        // console.log(jsonData[index]);
        var bubleText = jsonData[index].interest;

        d3.select(textLayers[0][i])
            .append('text')
            // center horizontally and vertically
            .style('text-anchor', 'middle').attr('dy', '.3em')
            .text(bubleText)
            // same as at the point
            .attr('x', d3point.attr('cx')).attr('y', d3point.attr('cy'));

            // TODO check x and y and depends on value, set 4 text or buble color for 4 quadrants
    };

    for (var i = 0; i < textLayers[0].length; i++) {
        // select each of the scatter points
        chartInternal.mainCircle[i].forEach(callback);
    }
}

drawLabels(chart.internal);

//
// Cloud
//

var color = d3.scale.linear()
    .domain([0,1,2,3,4,5,6,10,15,20,100])
    .range(["#ddd", "#ccc", "#bbb", "#aaa", "#999", "#888", "#777", "#666", "#555", "#444", "#333", "#222"]);

d3.layout.cloud().size([800, 500])
    .words(jsonDataMapped) 
    .rotate(0)
    .fontSize(function(d) { return d.size; })
    .on("end", draw)
    .start();

function draw(words) {
    d3.select("body #cloud").append("svg")
        .attr("width", 850)
        .attr("height", 350)
        .attr("class", "wordcloud")
        .append("g")
        // without the transform, words would get cutoff to the left and top, they would
        // appear outside of the SVG area
        .attr("transform", "translate(320,200)")
        .selectAll("text")
        .data(words)
        .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .style("fill", function(d, i) { /*console.log(d, i, color(i));*/ return color(i); })
        .attr("transform", function(d) {
            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });
}
Run Pen

External CSS

  1. https://rawgit.com/masayuki0812/c3/master/c3.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js
  2. https://www.jasondavies.com/wordcloud/cloud.min.js
  3. https://rawgit.com/masayuki0812/c3/master/c3.js