CODEWITHSUNDEEP
javascriptcsvd3.js
user3435505
user3435505

Reputation: 157

d3.js simple csv treemap two columns

so I've been doing research on d3.js for a while but didn't want to ask a question like this because it is such a simple task that I've been trying to accomplish.

I want to create a d3.js treemap using a CSV file with two columns. Name and Number. However, all the treemaps that I have encountered that is on version 4 creates a hierarchy structure. I do not want to use a hierarchy structure. I can't find a work around from stratify. Looking at the d3.js documentation, I believe I haven't been able to find an alternative.

So simply, I want to create a d3. treemap using this csv data. I want to know how to structure it and how to send it to the d3.treemap() function.

If you can help me much thanks!!!

data.csv

content,count
apple,10
oranges,20
strawberry,30
pineapple,40
kiwi,50

Upvotes: 1

Views: 767

Answers (1)

beaver
beaver

Reputation: 17647

Here is an example with d3.v4:

var vWidth = 600;
var vHeight = 400;
// Prepare our physical space
var g = d3.select('svg').attr('width', vWidth).attr('height', vHeight).select('g');

// Get the data from our CSV file
/*var csv_url = "https://gist.githubusercontent.com/denjn5/bb835c4fb8923ee65a13008832d2efed/raw/9e8d621174aba36624311944a93cdf8d96109099/data.csv";
d3.csv(csv_url, function(error, vCsvData) {
  if (error) throw error;
  vData = d3.stratify()(vCsvData);
  drawViz(vData);
});*/

// Get the data from our CSV string
var csvString = 'content,parent,count\n';
csvString += 'fruit,\n';
csvString += 'apple,fruit,10\n';
csvString += 'oranges,fruit,20\n';
csvString += 'strawberry,fruit,30\n';
csvString += 'pineapple,fruit,40\n';
csvString += 'kiwi,fruit,50\n';

var data = d3.csvParse(csvString);
var stratify = d3.stratify()
  .id(function(d) { return d.content; })
  .parentId(function(d) { return d.parent; });
var treeData = stratify(data);
// assign the name to each node
treeData.each(function(d) {
    d.name = d.id;
});
  
drawViz(treeData, data);

function drawViz(vData, data) {
  // Declare d3 layout
  var vLayout = d3.treemap().size([vWidth, vHeight]).
  paddingOuter(3);
  // Layout + Data
  var vRoot = d3.hierarchy(vData).sum(function (d) {
  	return d.data.count;
  });
  var vNodes = vRoot.descendants();
  vLayout(vRoot);
  var vSlices = g.selectAll('rect').data(vNodes).enter().append('rect');
  // Draw on screen
  vSlices.attr('x', function (d) { return d.x0; })
    .attr('y', function (d) { return d.y0; })
    .attr('width', function (d) { return d.x1 - d.x0; })
    .attr('height', function (d) { return d.y1 - d.y0; });      
    
  g.selectAll('g').data(vNodes).enter()
  .append('text')
  .attr('x', function (d) { return d.x0; })
  .attr('y', function (d) { return d.y0; })
  .text(function(d) { if (d.data.depth>0) return d.data.id; })
  .attr("dy", "1em")
  .attr("dx", "1em");
}
rect {
  fill: #8d4705;
  opacity: 0.3;
  stroke: #FF0000;
  stroke-width: 2px;
}

text {
  stroke: #FF0000;
  stroke-width: 1px;
  font-family: 'Verdana';
  font-size: 12px;
}
<script src="https://d3js.org/d3.v4.min.js"></script>

<svg>
    <g></g>
</svg>

Update:

If CSV data are not in a hierarchical form, it is possible to use a row conversion function in csvParse() to adapt data:

var csvString = 'content,count\n';
csvString += 'apple,10\n';
csvString += 'oranges,20\n';
csvString += 'strawberry,30\n';
csvString += 'pineapple,40\n';
csvString += 'kiwi,50\n';
// trasform in hierarchical
var data = d3.csvParse(csvString, function(d) {
  return {
    content: d.content,
    parent:"fruit",
    count: d.count,
  };
});
// add first element
data.unshift({content: "fruit", parent: "", count: undefined});

Fiddle: https://jsfiddle.net/beaver71/061g1j6q/

Upvotes: 1

Related Questions