I'm trying to make a group bar chart that gives the frequency of two group combos. I referred to this site for rollup and nest function reference:
http://bl.ocks.org/phoebebright/raw/3176159/
I'm trying to use my own dataset to create the following effect:
https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad
My current attempt with my own data, drug1.csv:
https://blockbuilder.org/lydiawawa/9efb5df76c08640316efbef702437db7
In the console, the grouped counts do not seem to generate the right distributions. Something is wrong with my rollup and nest
const nestedData = d3.nest()
.key(function(d){return d.s_category})
.key(function(d){return d.drug_cat})
.rollup(function(leaves) { return leaves.length; })
.entries(data);
Following is the desired cross tab distribution count of s_category x drug_cat :
1 2 3 4 5 6
2 367 35 8 1 1 1
3 223 24 4 4 2 2
4 29 5 9 1 2 3
5 37 1 3 3 2 26
Static chart:
In the animated bar graph that I attempted to create, cross tab count should be the y-axis, drug_c is the x-axis and s_category determines the groups of the bar graph. Thank you for any help!
The moment you use the nest generator you don't have drug_cat and count as properties anymore: you have key and values (or value for the inner arrays).
Here is your block builder changing the names of those properties: https://blockbuilder.org/GerardoFurtado/f4c825a5f8c92e87cc5a81591ba1f7c9
Related
I am trying to solve nonograms.
Right now I am trying to solve for overlapping patterns :
A 3 long bar in a 5 wide grid will always be at least on the 3rd cell
a 2-6 in a 10 wide grid allow to place 1 cell for the 2 bar an 5 cells for the 6 bar
I tried to solve this through permutations, but is is way too inefficient (3M permutation for a 10 wide grid) and there is quite a few rule to reduce the result count :
bar order can't be changed
there is at least 1 empty cell between 2 bars (you can't merge bars)
I need to find an algorithm to find all different repartitions of empty cells between bars :
2XX2XX2, X2X2XX2, X2X2X2X, etc
I'm wondering if there is any way in chart.js that I can group chart legends as I want.
eg: First set of Data 1 to Data 4 as one group & second set of Data 1 to Data 4 as one group.
DATA 1 DATA 2 DATA 3 DATA 4
Group 1
DATA 1 DATA 2 DATA 3 DATA 4
Group 2
Is this achievable?
Currently I am working with a dynamic set of data and Chart.js. There is no standardised scale within the data I am using, so I have created a simple algorithm, for example:
3 out of 7 for question 1 [3 * (12 / 7)]
2 out of 9 for question 2 [2 * (12 / 9)]
6 out of 7 for question 3 [6 * (12 / 7)]
So that all the results for the Radar Graph are measured equally at 12.
By doing this the value is not going to be correct, even though the position of the point in respect to the rest of the graph will be.
[Label]Question 1 (3/7) : [Value]5.14
I have already included the true value in the label by combining the label with the data in the label array.
So I would like to show just the label when the mouse hovers over the spoke or dot on the chart.
Question 1 (3/7)
Is there a way of doing this without messing around with the Chart.js file?
Use the tooltipTemplate option
new Chart(ctx).Radar(data, {
tooltipTemplate: "<%=label%>",
});
Fiddle - http://jsfiddle.net/dz6mt4dy/
I am working in d3.js and have two pannable (but not zoomable) time axes. One axis has labels for days, one has labels for months. I use the same scale for both axes.
Currently, it looks like this: (pipe- and minus-symbol only for better visibility)
|November
1 2 3 4 5 6 7 8 9 10 11 12 13 ... 30
I want to move the name of the month to the middle of the interval, so that it looks like this:
|-------------November
1 2 3 4 5 6 7 8 9 10 11 12 13 ... 30
I already tried several ways to fix the issue, but without success. The core problem is that when panning, the text of the tick will disappear as soon as the tick itself disappears.
If I use post selection to move the text of the tick to the right position, the text will disappear too early when panning the axis to the left.
Initial (ok):
|-------------November
1 2 3 4 5 6 7 8 9 10 11 12 13 ... 30
After panning to the left (wrong):
(gone)
2 3 4 5 6 7 8 9 10 11 12 13 ... 30
I tried to change the interval to a date near "the middle". Instead of placing the Label with
.ticks(d3.time.months, 1);
I tried to set it using the following:
.ticks(d3.time.days, 15);
But this had not the desired effect. It generates the following:
|November-----November------November
1 2 3 4 5 6 7 8 9 10 11 12 13 ... 30
The following did not help me:
.style("text-anchor", "end/begin")
I found a way (as described in this example: http://bl.ocks.org/mbostock/6186172) to add a offset to the axis, so ticks that are too long will still be displayed. I was not able to get this working in a pannable graph.
var x = d3.time.scale()
.domain([t0, t3])
.range([t0, t3].map(d3.time.scale()
.domain([t1, t2])
.range([0, width])));
Is there any better working solution?
Writing a custom ticks() function worked for me. Using this, I am able to set the tick (and its label) to any given position.
I created a simple gist to show you my solution:
http://bl.ocks.org/kevinnoll/77430421843b940869ed
I have two tables in database like this:
Table_1
PK Column generated by db...
Any other columns...
Table_1_association
PK Column generated by db...
FK Column for Table_1
Another FK Column for Table_1
In this case, I can have the follow lines in Table_1_association
FK1 -> FK2
1 -> 2
1 -> 3
1 -> 4
1 -> 5
1 -> 6
1 -> 7
7 -> 8
7 -> 9
10 -> 1
10 -> 7
10 -> 11
10 -> 12
I can have
9 -> 1
too.
I'd like to make a graph that show this structure.
I used FOrceDirected graph with 'arrow' Edges because the direction is
FK1 to FK2 (the -> in example above).
But I can't get. Some arrows are in wrong direction.
Does the ForceDirected graph allow this?
You can specify direction by adding $direction to the data section in the JSON which is a list of two strings representing the "from" node ID and the "to" node ID, respectively. For example:
"adjacencies" : [
{
"nodeTo" : "222",
"data" : {
"$direction" : [
"111",
"222"
]
}
}
]