Migrated from the original suvoBGD WordPress archive.
Original URL: https://suvobgd.wordpress.com/2017/11/19/d3-js-api-wordcloud/
If you are looking for wordcloud. The best or easiest way to implement this using D3 library. well no more out of the world geek talk. lets keep this simple. Install D3 library package then DB USE [Northwind] GO /****** Object: Table [dbo].[WordCloud] Script Date: 19/11/2017 12:35:24 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[WordCloud]( [WordID] [int] IDENTITY(1,1) NOT NULL, [Word] varchar NULL, [weight] [int] NULL, CONSTRAINT [PK_WordCloutTables] PRIMARY KEY CLUSTERED ( [WordID] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY] GO The API controller public class Controller : ApiController { NorthwindEntities dataContext = new NorthwindEntities(); // GET api/piechart public IEnumerable Get() { return dataContext.WordClouds.ToList(); } } The .cshtml or .Html word cloud Example http://Scripts/jquery-1.10.2.js http://Scripts/d3.js http://Scripts/d3.layout.cloud.js http://Scripts/index.js --> Top search keywords $(function () { var word = []; var count = []; $.ajax({ type: "GET", url: "api/PieChart", contentType: "application/json; charset=utf-8", dataType: "json", success: function (result) { $.each(result, function (i, j) { word.push(j.word); count.push(j.weight); }); console.log(word); console.log(count); var fill = d3.scale.category20(); d3.layout.cloud().size([500, 300]) //.words(data.map(function (d) { // return { text: d.word, size: d.weight }; //})) .words(d3.zip(word, count).map(function (d) { return { text: d[0], size: d[1] }; })) .padding(5) //.rotate(function () { return ~~(Math.random() * 2) * 90; }) .rotate(0) .font("Lato") .fontSize(function (d) { return d.size; }) .on("end", draw) .start(); function draw(words) { d3.select("#wordcloud").append("svg") .attr("width", 700) .attr("height", 500) .append("g") .attr("transform", "translate(250,250)") .selectAll("text") .data(words) .enter().append("text") .style("font-size", function (d) { return d.size + "px"; }) .style("font-family", "Lato") .style("fill", function (d, i) { return fill(i); }) .style("display", "block") .style("margin", "auto") .attr("text-anchor", "middle") .attr("transform", function (d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .text(function (d) { return d.text; }); } }, error: function (msg) { $("#result").text(msg); } }); }); Voila Credit Jason Davis