Ggtcf

Combinations of multiple lists

Is it canonical bit space?

Took a trip to a parallel universe, need help deciphering

Why is consensus so controversial in Britain?

Blender 2.8 I can't see vertices, edges or faces in edit mode

What reasons are there for a Capitalist to oppose a 100% inheritance tax?

I Accidentally Deleted a Stock Terminal Theme

What to put in ESTA if staying in US for a few days before going on to Canada

Why is it a bad idea to hire a hitman to eliminate most corrupt politicians?

How to model explosives?

Can one be a co-translator of a book, if he does not know the language that the book is translated into?

Today is the Center

How is it possible to have an ability score that is less than 3?

90's TV series where a boy goes to another dimension through portal near power lines

Why is Collection not simply treated as Collection<?>

Twin primes whose sum is a cube

How can I fix/modify my tub/shower combo so the water comes out of the showerhead?

Anagram holiday

Emailing HOD to enhance faculty application

Why doesn't H₄O²⁺ exist?

What is the word for reserving something for yourself before others do?

Reserved de-dupe rules

Can I ask the recruiters in my resume to put the reason why I am rejected?

Is it possible to run Internet Explorer on OS X El Capitan?

d3 treemap from array without hierarchy

How do I remove a property from a JavaScript object?How do I check if an array includes an object in JavaScript?How to append something to an array?How to insert an item into an array at a specific index (JavaScript)?How do I empty an array in JavaScript?Loop through an array in JavaScriptHow to check if an object is an array?How do I remove a particular element from an array in JavaScript?How to use foreach with array in JavaScript?How do I return the response from an asynchronous call?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

1

I am trying to create a treemap layout but only with an array of number values. My code simply looks like this (example followed from here):

const data = [32, 16, 37, 56];

const treeMapLayout = d3.treemap().size([400, 200]).paddingOuter(10);
const root = d3.hierarchy(data);

root.sum(d => d.value);
treeMapLayout(root);

d3.select('svg g')
 .selectAll('rect')
 .data(root.descendants())
 .enter()
 .append('rect')
 .attr('x', d => d.x0)
 .attr('y', d => d.y0)
 .attr('width', d => d.x1 - d.x0)
 .attr('height', d => d.y1 - d.y0)

rect 
 fill: cadetblue;
 opacity: 0.3;
 stroke: white;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="420" height="220">
 <g></g>
</svg>

Is this possible to do without using d3.hierarchy? Or atleast a way to set this up where I don't need multiple levels?

javascript d3.js layout hierarchy treemap

share|improve this question

edited Mar 9 at 1:09

Sosa

asked Mar 8 at 23:43

SosaSosa

389516

add a comment | 

1

I am trying to create a treemap layout but only with an array of number values. My code simply looks like this (example followed from here):

const data = [32, 16, 37, 56];

const treeMapLayout = d3.treemap().size([400, 200]).paddingOuter(10);
const root = d3.hierarchy(data);

root.sum(d => d.value);
treeMapLayout(root);

d3.select('svg g')
 .selectAll('rect')
 .data(root.descendants())
 .enter()
 .append('rect')
 .attr('x', d => d.x0)
 .attr('y', d => d.y0)
 .attr('width', d => d.x1 - d.x0)
 .attr('height', d => d.y1 - d.y0)

rect 
 fill: cadetblue;
 opacity: 0.3;
 stroke: white;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="420" height="220">
 <g></g>
</svg>

Is this possible to do without using d3.hierarchy? Or atleast a way to set this up where I don't need multiple levels?

javascript d3.js layout hierarchy treemap

share|improve this question

edited Mar 9 at 1:09

Sosa

asked Mar 8 at 23:43

SosaSosa

389516

add a comment | 

I am trying to create a treemap layout but only with an array of number values. My code simply looks like this (example followed from here):

const data = [32, 16, 37, 56];

const treeMapLayout = d3.treemap().size([400, 200]).paddingOuter(10);
const root = d3.hierarchy(data);

root.sum(d => d.value);
treeMapLayout(root);

d3.select('svg g')
 .selectAll('rect')
 .data(root.descendants())
 .enter()
 .append('rect')
 .attr('x', d => d.x0)
 .attr('y', d => d.y0)
 .attr('width', d => d.x1 - d.x0)
 .attr('height', d => d.y1 - d.y0)

rect 
 fill: cadetblue;
 opacity: 0.3;
 stroke: white;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="420" height="220">
 <g></g>
</svg>

Is this possible to do without using d3.hierarchy? Or atleast a way to set this up where I don't need multiple levels?

javascript d3.js layout hierarchy treemap

share|improve this question

edited Mar 9 at 1:09

Sosa

asked Mar 8 at 23:43

SosaSosa

389516

const data = [32, 16, 37, 56];

const treeMapLayout = d3.treemap().size([400, 200]).paddingOuter(10);
const root = d3.hierarchy(data);

root.sum(d => d.value);
treeMapLayout(root);

d3.select('svg g')
 .selectAll('rect')
 .data(root.descendants())
 .enter()
 .append('rect')
 .attr('x', d => d.x0)
 .attr('y', d => d.y0)
 .attr('width', d => d.x1 - d.x0)
 .attr('height', d => d.y1 - d.y0)

rect 
 fill: cadetblue;
 opacity: 0.3;
 stroke: white;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="420" height="220">
 <g></g>
</svg>

const data = [32, 16, 37, 56];

const treeMapLayout = d3.treemap().size([400, 200]).paddingOuter(10);
const root = d3.hierarchy(data);

root.sum(d => d.value);
treeMapLayout(root);

d3.select('svg g')
 .selectAll('rect')
 .data(root.descendants())
 .enter()
 .append('rect')
 .attr('x', d => d.x0)
 .attr('y', d => d.y0)
 .attr('width', d => d.x1 - d.x0)
 .attr('height', d => d.y1 - d.y0)

rect 
 fill: cadetblue;
 opacity: 0.3;
 stroke: white;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="420" height="220">
 <g></g>
</svg>

const data = [32, 16, 37, 56];

const treeMapLayout = d3.treemap().size([400, 200]).paddingOuter(10);
const root = d3.hierarchy(data);

root.sum(d => d.value);
treeMapLayout(root);

d3.select('svg g')
 .selectAll('rect')
 .data(root.descendants())
 .enter()
 .append('rect')
 .attr('x', d => d.x0)
 .attr('y', d => d.y0)
 .attr('width', d => d.x1 - d.x0)
 .attr('height', d => d.y1 - d.y0)

rect 
 fill: cadetblue;
 opacity: 0.3;
 stroke: white;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="420" height="220">
 <g></g>
</svg>

share|improve this question

edited Mar 9 at 1:09

Sosa

asked Mar 8 at 23:43

SosaSosa

389516

share|improve this question

edited Mar 9 at 1:09

Sosa

asked Mar 8 at 23:43

SosaSosa

389516

asked Mar 8 at 23:43

SosaSosa

389516

asked Mar 8 at 23:43

SosaSosa

389516

1 Answer
1

active

oldest

votes

1

Yes you can set up a hierarchy that only has 1 level below the root, following the example data in the Hierarchical Layouts section of the page you linked to.

Here is the data format you need:

const data = 
 children:[
 
 value: 32
 ,
 
 value: 16
 ,
 
 value: 37
 ,
 
 value: 56
 ,
 ]

Or you can transform it like this:

const originalData = [32, 16, 37, 56];

const data = 
 children: originalData.map(item => (value: item))
;

Here is a fiddle.

share|improve this answer

edited Mar 9 at 17:59

answered Mar 9 at 17:33

sheilaksheilak

4,10672532

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Exactly what I was looking for, thank you!
  
  – Sosa
  Mar 10 at 8:18
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55072521%2fd3-treemap-from-array-without-hierarchy%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

Yes you can set up a hierarchy that only has 1 level below the root, following the example data in the Hierarchical Layouts section of the page you linked to.

Here is the data format you need:

const data = 
 children:[
 
 value: 32
 ,
 
 value: 16
 ,
 
 value: 37
 ,
 
 value: 56
 ,
 ]

Or you can transform it like this:

const originalData = [32, 16, 37, 56];

const data = 
 children: originalData.map(item => (value: item))
;

Here is a fiddle.

share|improve this answer

edited Mar 9 at 17:59

answered Mar 9 at 17:33

sheilaksheilak

4,10672532

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Exactly what I was looking for, thank you!
  
  – Sosa
  Mar 10 at 8:18
  

  
  
  
  

add a comment | 

1

Yes you can set up a hierarchy that only has 1 level below the root, following the example data in the Hierarchical Layouts section of the page you linked to.

Here is the data format you need:

const data = 
 children:[
 
 value: 32
 ,
 
 value: 16
 ,
 
 value: 37
 ,
 
 value: 56
 ,
 ]

Or you can transform it like this:

const originalData = [32, 16, 37, 56];

const data = 
 children: originalData.map(item => (value: item))
;

Here is a fiddle.

share|improve this answer

edited Mar 9 at 17:59

answered Mar 9 at 17:33

sheilaksheilak

4,10672532

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Exactly what I was looking for, thank you!
  
  – Sosa
  Mar 10 at 8:18
  

  
  
  
  

add a comment | 

Yes you can set up a hierarchy that only has 1 level below the root, following the example data in the Hierarchical Layouts section of the page you linked to.

Here is the data format you need:

const data = 
 children:[
 
 value: 32
 ,
 
 value: 16
 ,
 
 value: 37
 ,
 
 value: 56
 ,
 ]

Or you can transform it like this:

const originalData = [32, 16, 37, 56];

const data = 
 children: originalData.map(item => (value: item))
;

Here is a fiddle.

share|improve this answer

edited Mar 9 at 17:59

answered Mar 9 at 17:33

sheilaksheilak

4,10672532

const data = 
 children:[
 
 value: 32
 ,
 
 value: 16
 ,
 
 value: 37
 ,
 
 value: 56
 ,
 ]

const originalData = [32, 16, 37, 56];

const data = 
 children: originalData.map(item => (value: item))
;

share|improve this answer

edited Mar 9 at 17:59

answered Mar 9 at 17:33

sheilaksheilak

4,10672532

answered Mar 9 at 17:33

sheilaksheilak

4,10672532

answered Mar 9 at 17:33

sheilaksheilak

4,10672532