TechQA.

Why is my word cloud not showing all the data involved?

69 views Asked by At

Anyone familiar with creating word clouds in d3 and html able to tell me why my code below is not showing all the IDs in the word cloud? The values represent the average product ratings for each product ID. So the size of each word would be dependent on the ratings. Thanks in advance!

Please see code below:

<!DOCTYPE html> 
<html>
    <head>
        <title>Programming Assignment 2 Visualization</title>
        <div id="worddataviz"></div>
        <style>
          html, body, #worddataviz {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;}
        </style>
    </head>
     <body>
        <script src="https://d3js.org/d3.v4.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3.layout.cloud.js"></script>
        <script>
            var productrating = [
                {ID:'B001E4KFG0', value:'5'},
                {ID:'B00813GRG4', value:'1'},
                {ID:'B000LQOCH0', value:'4'},
                {ID:'B000UA0QIQ', value:'2'},
                {ID:'B006K2ZZ7K', value:'4.75'},
                {ID:'B000E7L2R4', value:'5'},
                {ID:'B00171APVA', value:'5'},
                {ID:'B0001PB9FE', value:'5'},
                {ID:'B0009XLVG0', value:'3'},
                {ID:'B001GVISJM', value:'4.4'},
                {ID:'B00144C10S', value:'5'},
                {ID:'B0001PB9FY', value:'5'},
                {ID:'B003F6UO7K', value:'5'},
                {ID:'B001EO5QW8', value:'4.21'},
                {ID:'B000G6RPMY', value:'4'},
                {ID:'B002GWHC0G', value:'4.5'},
                {ID:'B004N5KULM', value:'4.67'},
                {ID:'B001EO5TPM', value:'1'},
                {ID:'B005DUM9UQ', value:'4.4'},
                {ID:'B000E7VI7S', value:'4'},
                {ID:'B001GVISJC', value:'5'},
                {ID:'B006SQBRMA', value:'5'},
                {ID:'B0059WXJKM', value:'1'},
                {ID:'B001EPPI84', value:'1.5'},
                {ID:'B004X2KR36', value:'4.33'},
                {ID:'B005R8JE8O', value:'5'},
                {ID:'B0066DMI6Y', value:'4.5'},
                {ID:'B003ZFRKGO', value:'5'},
                {ID:'B0019CW0HE', value:'4.53'},
                ];

                var margin = {top: 10, right: 10, bottom: 10, left: 10},
                    width = 450 - margin.left - margin.right,
                    height = 450 - margin.top - margin.bottom;
                    
                var svg = d3.select("#worddataviz").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 + ")");
                    
                var layout = d3.layout.cloud()
                                      .size([width, height])
                                      .words(productrating.map(function(d) { return {text: d.ID, size:d.value}; }))
                                      .padding(5)
                                      .rotate(function() { return ~~(Math.random() * 2) * 90; })
                                      .fontSize(function(d) { return d.value; })     
                                      .on("end", draw);
                    layout.start();

                function draw(words) {
                    svg.append("g")
                       .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
                       .selectAll("text")
                       .data(words)
                       .enter().append("text")
                       .style("font-size", function(d) { return d.value; })
                       .style("fill", "#69b3a2")
                       .attr("text-anchor", "middle")
                       .style("font-family", "Impact")
                       .attr("transform", function(d) {
                        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                        })
                       .text(function(d) { return d.text; });
                    }
               
        </script>
    </body>
</html>
html d3.js word-cloud
Original Q&A
1

There are 1 answers

0
Michael Rovinsky On

Your sample has some errors (mostly with managing the coordinates).

See my attempt to solve them in the snippet below:

var productrating = [
                {ID:'B001E4KFG0', value:'5'},
                {ID:'B00813GRG4', value:'1'},
                {ID:'B000LQOCH0', value:'4'},
                {ID:'B000UA0QIQ', value:'2'},
                {ID:'B006K2ZZ7K', value:'4.75'},
                {ID:'B000E7L2R4', value:'5'},
                {ID:'B00171APVA', value:'5'},
                {ID:'B0001PB9FE', value:'5'},
                {ID:'B0009XLVG0', value:'3'},
                {ID:'B001GVISJM', value:'4.4'},
                {ID:'B00144C10S', value:'5'},
                {ID:'B0001PB9FY', value:'5'},
                {ID:'B003F6UO7K', value:'5'},
                {ID:'B001EO5QW8', value:'4.21'},
                {ID:'B000G6RPMY', value:'4'},
                {ID:'B002GWHC0G', value:'4.5'},
                {ID:'B004N5KULM', value:'4.67'},
                {ID:'B001EO5TPM', value:'1'},
                {ID:'B005DUM9UQ', value:'4.4'},
                {ID:'B000E7VI7S', value:'4'},
                {ID:'B001GVISJC', value:'5'},
                {ID:'B006SQBRMA', value:'5'},
                {ID:'B0059WXJKM', value:'1'},
                {ID:'B001EPPI84', value:'1.5'},
                {ID:'B004X2KR36', value:'4.33'},
                {ID:'B005R8JE8O', value:'5'},
                {ID:'B0066DMI6Y', value:'4.5'},
                {ID:'B003ZFRKGO', value:'5'},
                {ID:'B0019CW0HE', value:'4.53'},
                ];
                
               const words = productrating.map(d => Object.create({text: d.ID, size: parseFloat(d.value) * 100}));

               
                var svg = d3.select("#worddataviz").append("svg")
                            .attr("width", 300)
                            .attr("height", 200)
                            .append("g")
                            .attr("transform", "translate(150, 100)");
                    
                var layout = d3.layout.cloud()
                                      .size([300, 200])
                                      .words(words)
                                      .padding(2)
                                      .rotate(() => Math.random() * 180)
                                      .fontSize(d => d.size / 50)     
                   
                                      
                    layout
                      .on("end", () => draw(layout.words()))
                      .start();
                    
                   

                function draw(words) {
                    console.log({words});
                  
                    svg
                       .selectAll("text")
                       .data(words)
                       .enter().append("text")
                       .style("font-size", function(d) { return d.value; })
                       .style("fill", "#69b3a2")
                       .attr("text-anchor", "middle")
                       // .style("font-family", "Impact")
                       .attr("transform", d => `translate(${d.x}, ${d.y}) rotate (${d.rotate})`)
                       .text(function(d) { return d.text; });
                       
                    }
               
<script src="https://d3js.org/d3.v4.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3.layout.cloud.js"></script>
        
<div id="worddataviz" />

Related Questions in HTML

Related Questions in D3.JS

Related Questions in WORD-CLOUD

Popular Questions

Trending Questions