This question already has answers here:
How can I generate as many colors as I want using d3?
(8 answers)
Closed 7 years ago.
According to the D3 Wiki. there is a scale function d3.scale.category20() that
Constructs a new ordinal scale with a range of twenty categorical
colors:
Question: is there anything that one can do to generate more than 20 unique colors? I was hoping to get at least 50.
By looking at the source code for that method:
d3.scale.category20 = function() {
return d3.scale.ordinal().range(d3_category20);
};
var d3_category20 = [
0x1f77b4, 0xaec7e8,
0xff7f0e, 0xffbb78,
0x2ca02c, 0x98df8a,
0xd62728, 0xff9896,
0x9467bd, 0xc5b0d5,
0x8c564b, 0xc49c94,
0xe377c2, 0xf7b6d2,
0x7f7f7f, 0xc7c7c7,
0xbcbd22, 0xdbdb8d,
0x17becf, 0x9edae5
].map(d3_rgbString);
You should be able to call d3.scale.ordinal().range(...) on your own color list.
Related
This question already has answers here:
How to set some xlim and ylim in Seaborn lmplot facetgrid
(2 answers)
set individual ylim of seaborn lmplot columns
(1 answer)
Closed 12 days ago.
I was trying to plot this using displot.
This is my plot
my code
plt = sns.displot(reg_pred-y_test,kind = 'kde')
Now I want to set ranges of X axis (-20,20) and Y axis (0.00 to 0.12).
I tried plt.xlim(-20,20)
It gives me the followring error message :
AttributeError: 'FacetGrid' object has no attribute 'xlim'
Can anyone help me with setting the ranges?
Im implementing the code below in a React, Typescript project.
When hovering over my graph I don't get the nearest entity its roughly 5 years off, on my x-axis(time).
I've tried switching out entityNearest for entityNearestXThenY but it yielded similar results.
Below is my pointer interaction function:
new Plottable.Interactions.Pointer()
.attachTo(Chart)
.onPointerMove(function(p) {
var entity = hiddenGraph.entityNearest(p);
var date = parseTime(entity.datum.x);
var value = currencySymbolNoPrecision(entity.datum.y);
var displayValue = (value + " • " + date);
guideline.value(entity.datum.x);
xAxis.annotatedTicks([entity.datum.x]);
title.text(displayValue).yAlignment();
})
.onPointerExit(function() {
guideline.pixelPosition(-10);
xAxis.annotatedTicks([]);
});
Pointer tracking is also very jumpy. My dataset is the gold price per month since 1950. I've checked the dataset to ensure that there are no problems there.
In the image below my mouse is hovering roughly where the red circle is.
Please let me know if I can provide any further information.
I eventually reached a solution by directly editing the coordinates of the mouse after it had bean calculated:
.onPointerMove(p){
p={x: p.x-(compensationValue), y:p.y}
...
...
...
}
While I understand this is by far not the best solution to the problem I had, it has managed to resolve the problem and seemingly with no adverse effects on different screen sizes or when nesting components.
I want to show the most recent 10 bins for box plot.
If a filter is applied to the bar chart or line chart, the box plot should show the most recent 10 records according to those filters.
I made dimension by date(ordinal). But I am unable to get the result.
I didn’t get how to do it with a fake group. I am new to dc.js.
The pic of scenario is attached. Let me know if anyone need more detail to help me.
in image i tried some solution by time scale.
You can do this with two fake groups, one to remove the empty box plots, and one to take the last N elements of the resulting data.
Removing empty box plots:
function remove_empty_array_bins(group) {
return {
all: function() {
return group.all().filter(d => d.value.length);
}
};
}
This just filters the bins, removing any where the .value array is of length 0.
Taking the last N elements:
function cap_group(group, N) {
return {
all: function() {
var all = group.all();
return all.slice(all.length - N);
}
};
}
This is essentially what the cap mixin does, except without creating a bin for "others" (which is somewhat tricky).
We fetch the data from the original group, see how long it is, and then slice that array from all.length - N to the end.
Chain these fake together when passing them to the chart:
chart
.group(cap_group(remove_empty_array_bins(closeGroup), 5))
I'm using 5 instead of 10 because I have a smaller data set to work with.
Demo fiddle.
This example uses a "real" time scale rather than ordinal dates. There are a few ways to do ordinal dates, but if your group is still sorted from low to high dates, this should still work.
If not, you'll have to edit your question to include an example of the code you are using to generate the ordinal date group.
I am stuck on a problem here. Could be simple though but i am having a tough time figuring it out. I want to show multiple lines on a dc composite chart.
My data is like this:
{ Name: Mike, mark1: 26.9, mark2: 62.3 },
{ Name: John, mark1: 23.5, mark2: 60.3 },
{ Name: Firen, mark1: 24.3, mark2: 62.5 }
I need the name plotted against X axis and mark1 and mark2 plotted as lines against the Y axis. I found a fiddle here which uses a linear scale to achieve the same result. http://jsfiddle.net/anmolkoul/mzx6mnru/3/
But it uses a linear scale as the base dimension is numerical. My base dimension is a string and hence not working with the same code. I figured it is due to the scale definition that i am using. Here is the fiddle that i need help with: http://jsfiddle.net/anmolkoul/pjLoh1az/1/
I have currently defined my x axis as
.x(d3.scale.ordinal().domain(nameDimension))
.xUnits(dc.units.ordinal)
I think this is where it is going wrong. I have two supplementary questions as well:
Once this is done, how to assign different colors to the lines ( it should reflect in the legend as well)
I was taking a look at the dc.js series chart, what does this line of code do?
runDimension = ndx.dimension(function(d) {return [+d.Expt, +d.Run]; });
Does it pivot the two dimensions? or is it just a quicker way of creating two crossfilter dimensions.
Thank you for the help!`
You can get the ordinal values with :
nameDimension.top(Infinity).map(function(d) {return d.Name}))
which returns ["Mike", "John", "Firen"] , then use it for the ordinal domain.
But it's not necessary, it's calculated automatically :
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal)
For colors, you can use :
dc.lineChart(lineChart1).group(mark1Group,"Mark 1").colors("#FF0000")
Here is a fiddle with those modifications : http://jsfiddle.net/1exo25u9/
This question already has an answer here:
Initial Range selection in DC.js chart
(1 answer)
Closed 7 years ago.
I've created this visualization and would like to use predefined filters in the explanation text. I created a link where the filter is applied on a barchart like so:
Filter
The filterAge function is:
function filterAge(filters) {
dc.filterAll();
for (var i = 0; i < filters.length; i++) {
ageChart.filter(filters[i]);
}
dc.redrawAll();
}
The filter works ok, however the brushes in the Age chart are not set accordingly. So for a user it is hard to tell what exactly has been filtered.
I came across this question but did not manage to apply this to the dc.js way of working. Another question seems in the same direction but lacks a thorough answer.
Since we don't have enough reviewers to get questions marked as duplicate, I'll spell this out.
dc.js treats filtering completely differently for quantitative scales, so you can't use the code above, which is for ordinal scales.
Try using a ranged filter object instead:
Filter
function filterAge(low, high) {
dc.filterAll();
ageChart.filter(dc.filters.RangedFilter(low, high));
dc.redrawAll();
}