I want to add Wordcloud as label for the Bar Charts created in d3.js, I got various examples online, but not able to merge the code with my existing code, Everytime it is getting failed.. Here is the word cloud file i want to add as lable for the my Bar Chart, i am strucked with it since 4,5 hours. any help shall be appreciated.. thanks

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    .bar1 { fill: aqua; }
    .bar2 { fill: deepskyblue; }
    .bar3 { fill: steelblue; }
    .bar:hover {fill: orange; }
    .axis--x path { display: none; }
    .line {
        fill: none;
        stroke: royalblue;
        stroke-width: 3;
    }
    .dot {
        fill: royalblue;
        stroke: royalblue;
    }
  </style>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <script>
  var dataset = [
    ['1963-66',703,1902],
    ['1967-69',1473,3341],
    ['1970-73',863,1935],
    ['1974-76',1494,3008],
    ['1977-80',965,1743],
    ['1981-83',568,1271],
    ['1984-86',189, 626],
    ['1987-89',464, 1064],
    ['1990-93',731, 1443],
    ['1994-96',306, 630],
    ['1997-99',899, 2556],
    ['2000-03',231, 880],
    ['2004-06',262, 589],
    ['2007-09',429, 1497],
    ['2010-13',322, 749],
    ['2014-16',315, 720]
  ];

  var margin = {top: 200, right: 20, bottom: 30, left: 80},
      width = 960,
      height = 400;

  var xScale = d3.scaleBand()
                .rangeRound([0, width])
                .padding(0.1)
                .domain(dataset.map(function(d) {
                  return d[0];
                }));
      yScale = d3.scaleLinear()
                .rangeRound([height, 0])
                .domain([0, d3.max(dataset, (function (d) {
                  return d[2];
                }))]);

  var svg = d3.select("body").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);


  svg.append("text")
   .attr("transform", "translate(100,0)")
   .attr("x", 40)
   .attr("y", 250)
   .attr("font-size", "14px")
   .text("")

  var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // axis-x
  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xScale));

      g.append("g")
         .append("text")
         .attr("y", height - 250)
         .attr("x", width - 900)
         .attr("text-anchor", "end")
         .attr("stroke", "black")
         .text("Drama");

      g.append("g")
         .append("text")
         .attr("y", height - 272)
         .attr("x", width - 900)
         .attr("text-anchor", "end")
         .attr("stroke", "black")
         .text("Comedy");

  // axis-y
  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(yScale));

  var bar = g.selectAll("rect")
    .data(dataset)
    .enter().append("g");

  // bar chart
  bar.append("rect")
    .attr("x", function(d) { return xScale(d[0]); })
    .attr("y", function(d) { return yScale(d[2]); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return height - yScale(d[2]); })
    .attr("class", function(d) {
      var s = "bar ";
      if (d[1] < 400) {
        return s + "bar1";
      } else if (d[1] < 800) {
        return s + "bar2";
      } else {
        return s + "bar3";
      }
    });

  // labels on the bar chart
  bar.append("text")
    .attr("dy", "1.3em")
    .attr("x", function(d) { return xScale(d[0]) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yScale(d[2]); })
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "black")
    .text(function(d) {
      return d[2];
    });

  // line chart
  var line = d3.line()
      .x(function(d, i) { return xScale(d[0]) + xScale.bandwidth() / 2; })
      .y(function(d) { return yScale(d[1]); })
      .curve(d3.curveMonotoneX);

  var text = svg.selectAll("text")
         .data(dataset)
         .enter()
         .append("text")
         .text(function(d){
          return d;
         })
         .attr("y", function(d,i){
          return height -d -2;
         })
         .attr("x", function(d,i){
          return width * i;
         })
         .attr("fill","#A64C38");

  bar.append("path")
    .attr("class", "line") // Assign a class for styling
    .attr("d", line(dataset)); // 11. Calls the line generator

  bar.append("circle") // Uses the enter().append() method
      .attr("class", "dot") // Assign a class for styling
      .attr("cx", function(d, i) { return xScale(d[0]) + xScale.bandwidth() / 2; })
      .attr("cy", function(d) { return yScale(d[1]); })
      .attr("r", 5);

  d3.select('body')
  .append('p') 
  .attr("text-anchor", "middle")
  .attr("font-family", "sans-serif")
  .attr("font-size", "11px")
  .attr("fill", "black")
  .text("This is Test");


  </script>
</body>
</html>

and word cloud

<html>
<script src="http://d3js.org/d3.v3.min.js"></script>

  <script src="https://rawgit.com/jasondavies/d3-cloud/master/build/d3.layout.cloud.js"></script>
<head>
    <title>Word Cloud Example</title>
</head>
<style>
    body {
        font-family:"Lucida Grande","Droid Sans",Arial,Helvetica,sans-serif;
    }
    .legend {
        border: 1px solid #555555;
        border-radius: 5px 5px 5px 5px;
        font-size: 0.8em;
        margin: 10px;
        padding: 8px;
    }
    .bld {
        font-weight: bold;
    }
</style>
<body>

</body>
<script>

    var frequency_list = [{"text":"Action","size":40},{"text":"Adventure","size":15},{"text":"Thriller","size":10}];


    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([200, 100])
            .words(frequency_list)
            .rotate(0)
            .fontSize(function(d) { return d.size; })
            .on("end", draw)
            .start();

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

</html>

0 Answers