D3 grouped dot matrix with 2 rows each groups
I'm trying to create some sort of unit graph (I don't actually know the name of it). What I'm trying to achieve is that the circles render next to each other and when they reached a limit (for example 2) they stack on top of each other and so on.
I just don't know how to solve this kind of problem and need some help to throw me the right direction and possible help me with it.
I made a JS fiddle where you can see all the dots stacked on top of each other in each group.
JS fiddle
Most of the code can be seen there, but I expect something needs to happen here where I need to add something with the CX
var dots = groups
.selectAll('circle')
.data(d => d3.range(0, d.apples))
.enter()
.append('circle')
.attr('class', 'dot')
.attr('r', 10)
.attr('cy', d => y(d))
.style('fill', 'blue')
For the most part I got it solved but this is the final result I wanna achieve. The outcome needs that dots group them self 2 each row. Here is a picture of the outcome I'm trying to achieve.
Thanks in advance!
javascript d3.js
asked Nov 15 '18 at 11:33
DennisDennis
213111
add a comment |
I'm trying to create some sort of unit graph (I don't actually know the name of it). What I'm trying to achieve is that the circles render next to each other and when they reached a limit (for example 2) they stack on top of each other and so on.
I just don't know how to solve this kind of problem and need some help to throw me the right direction and possible help me with it.
I made a JS fiddle where you can see all the dots stacked on top of each other in each group.
JS fiddle
Most of the code can be seen there, but I expect something needs to happen here where I need to add something with the CX
var dots = groups
.selectAll('circle')
.data(d => d3.range(0, d.apples))
.enter()
.append('circle')
.attr('class', 'dot')
.attr('r', 10)
.attr('cy', d => y(d))
.style('fill', 'blue')
For the most part I got it solved but this is the final result I wanna achieve. The outcome needs that dots group them self 2 each row. Here is a picture of the outcome I'm trying to achieve.
Thanks in advance!
javascript d3.js
asked Nov 15 '18 at 11:33
DennisDennis
213111
your day=7 example in the image is not matching the requirement
– rioV8
Nov 15 '18 at 12:27
1
jsfiddle.net/5Lmjogqh/1
– Gerardo Furtado
Nov 16 '18 at 1:06
add a comment |
I'm trying to create some sort of unit graph (I don't actually know the name of it). What I'm trying to achieve is that the circles render next to each other and when they reached a limit (for example 2) they stack on top of each other and so on.
I just don't know how to solve this kind of problem and need some help to throw me the right direction and possible help me with it.
I made a JS fiddle where you can see all the dots stacked on top of each other in each group.
JS fiddle
Most of the code can be seen there, but I expect something needs to happen here where I need to add something with the CX
var dots = groups
.selectAll('circle')
.data(d => d3.range(0, d.apples))
.enter()
.append('circle')
.attr('class', 'dot')
.attr('r', 10)
.attr('cy', d => y(d))
.style('fill', 'blue')
For the most part I got it solved but this is the final result I wanna achieve. The outcome needs that dots group them self 2 each row. Here is a picture of the outcome I'm trying to achieve.
Thanks in advance!
javascript d3.js
asked Nov 15 '18 at 11:33
DennisDennis
213111
I'm trying to create some sort of unit graph (I don't actually know the name of it). What I'm trying to achieve is that the circles render next to each other and when they reached a limit (for example 2) they stack on top of each other and so on.
I just don't know how to solve this kind of problem and need some help to throw me the right direction and possible help me with it.
I made a JS fiddle where you can see all the dots stacked on top of each other in each group.
JS fiddle
Most of the code can be seen there, but I expect something needs to happen here where I need to add something with the CX
var dots = groups
.selectAll('circle')
.data(d => d3.range(0, d.apples))
.enter()
.append('circle')
.attr('class', 'dot')
.attr('r', 10)
.attr('cy', d => y(d))
.style('fill', 'blue')
For the most part I got it solved but this is the final result I wanna achieve. The outcome needs that dots group them self 2 each row. Here is a picture of the outcome I'm trying to achieve.
Thanks in advance!
javascript d3.js
javascript d3.js
asked Nov 15 '18 at 11:33
DennisDennis
213111
asked Nov 15 '18 at 11:33
DennisDennis
213111
asked Nov 15 '18 at 11:33
DennisDennis
213111
asked Nov 15 '18 at 11:33
DennisDennis
213111
asked Nov 15 '18 at 11:33
DennisDennis
213111
213111
your day=7 example in the image is not matching the requirement
– rioV8
Nov 15 '18 at 12:27
1
jsfiddle.net/5Lmjogqh/1
– Gerardo Furtado
Nov 16 '18 at 1:06
add a comment |
your day=7 example in the image is not matching the requirement
– rioV8
Nov 15 '18 at 12:27
1
jsfiddle.net/5Lmjogqh/1
– Gerardo Furtado
Nov 16 '18 at 1:06
your day=7 example in the image is not matching the requirement
– rioV8
Nov 15 '18 at 12:27
your day=7 example in the image is not matching the requirement
– rioV8
Nov 15 '18 at 12:27
1
1
jsfiddle.net/5Lmjogqh/1
– Gerardo Furtado
Nov 16 '18 at 1:06
jsfiddle.net/5Lmjogqh/1
– Gerardo Furtado
Nov 16 '18 at 1:06
add a comment |
0
active
oldest
votes
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
);
);
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
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53318554%2fd3-grouped-dot-matrix-with-2-rows-each-groups%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53318554%2fd3-grouped-dot-matrix-with-2-rows-each-groups%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
your day=7 example in the image is not matching the requirement
– rioV8
Nov 15 '18 at 12:27
1
jsfiddle.net/5Lmjogqh/1
– Gerardo Furtado
Nov 16 '18 at 1:06