How to change tick labels in d3.svg.axis() - html

I am trying to edit an HTML code of a map. And I want to change the labels of the scalebar by three orders of magnitude less, I mean, if the value is 100000 the scalebar should show 100, without changing the scale domain, just the labels.
Actual scalebar
And these are the values i want to appear in the scalebar:
[0.0, 189.0, 377.0, 566.0, 755.0, 943.0, 1132.0, 1320.0, 1509.0]
I know maybe it's with .tickFormart but i don't know which format i have to use. Here is the code:
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.x = d3.scale.linear()
.domain([0.0, 1509134.0])
.range([0, 400]);
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.legend = L.control({position: 'topright'});
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.legend.onAdd = function (map) {var div = L.DomUtil.create('div', 'legend'); return div};
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.legend.addTo(map_327a7d6fcd834e0aa3fc248c7a9557c9);
color_map_0caac4580c6c4cdd8684ab303e6dc8e4.xAxis = d3.svg.axis()
.scale(color_map_0caac4580c6c4cdd8684ab303e6dc8e4.x)
.orient("top")
.tickSize(1)
.tickValues([0.0, 188641.75, 377283.5, 565925.25, 754567.0, 943208.75, 1131850.5, 1320492.25, 1509134.0])
.tickFormat([0.0, 189.0, 377.0, 566.0, 755.0, 943.0, 1132.0, 1320.0, 1509.0]);
You can ignore this color_map_0caac4580c6c4cdd8684ab303e6dc8e4it's a Folium thing (Python)

You can pass your own custom function to tickFormat. The input to this function is the tick value and the output is what you want the label to be. In your case, you could do
.tickFormat(d => d / 1000)

Related

Extracting color from complex function: " Cannot modify global variable 'cColor' in function."

I'd like to extract the "col" color value from this function to be used to paint plots or candle colors. But everything I try creates one error or another. I checked the Script Reference. Shouldn't there be some way to "return" a value, as is usually the case with most functions?
lset(l,x1,y1,x2,y2,col)=>
line.set_xy1(l,x1,y1)
line.set_xy2(l,x2,y2)
line.set_width(l,5)
line.set_style(l, line.style_solid)
line.set_color(l,y2 > y1 ? #ff1100 : #39ff14) //red : green
temp = line.get_price(l,bar_index) // another value to extract
The documentation is showing it like this:
line.new(x1, y1, x2, y2, xloc, extend, color, style, width) → series line
So in your code it's looking differently and also the "new" is missing.
Scrolling a bit up on the linked page shows that there exist indeed methods to retrieve some properties of the line object:
Lines are managed using built-in functions in the line namespace. They include:
line.new() to create them.
line.set_*() functions to modify the properties of an line.
line.get_*() functions to read the properties of an existing line.
line.copy() to clone them.
line.delete() to delete them.
The line.all array which always contains the IDs of all
the visible lines on the chart. The array’s size will depend on
the maximum line count for your script and how many of those you
have drawn. aray.size(line.all) will return the array’s size.
The most simple usage is to instantiate a line object with the correct values directly, like shown here:
//#version=5
indicator("Price path projection", "PPP", true, max_lines_count = 100)
qtyOfLinesInput = input.int(10, minval = 1)
y2Increment = (close - open) / qtyOfLinesInput
// Starting point of the fan in y.
lineY1 = math.avg(close[1], open[1])
// Loop creating the fan of lines on each bar.
for i = 0 to qtyOfLinesInput
// End point in y if line stopped at current bar.
lineY2 = open + (y2Increment * i)
// Extrapolate necessary y position to the next bar because we extend lines one bar in the future.
lineY2 := lineY2 + (lineY2 - lineY1)
lineColor = lineY2 > lineY1 ? color.lime : color.fuchsia
line.new(bar_index - 1, lineY1, bar_index + 1, lineY2, color = lineColor)
Getting the line color from outside is difficult or impossible though as there never exists a method to retrieve it while for other properties those methods exist.
So the most simple way is to create the same funcionality, to get the color that exists inside the line-object, outside too, or only outside.
currentLineColor = y2 > y1 ? #ff1100 : #39ff14
You could try to extend the line-object somehow like this:
line.prototype.get_color = function() {
return this.color;
};
console.log(line.get_color())
I'm not sure if the approach with the prototype is working but it's worth it to try if you need it.

How to effectively adjust graph margin or padding in dash plotly

I have plotted two graphs using plotly dash. But when the y-axis / x-axis tick size is more it gets cut off.
Y-axis :
Code :
data = [go.Scatter(x = df[df['S2PName-Category']==category]['S2BillDate'],
y = df[df['S2PName-Category']==category]['totSale'],
mode = 'markers+lines',
name = category) for category in df['S2PName-Category'].unique()]
layout = go.Layout(title='Category Trend',
xaxis = dict(title = 'Time Frame', tickformat = '%d-%b-%y'),
yaxis = dict(tickprefix= '₹', tickformat=',.2f',type='log'),
hovermode = 'closest',
plot_bgcolor = colors['background'],
paper_bgcolor = colors['background'],
font = dict(color = colors['text'])
)
X-Axis :
Code :
data = [go.Scatter(x = df[df['S2PName']==item]['S2BillDate'],
y = df[df['S2PName']==item]['totSale'],
mode = 'markers+lines',
name = item) for item in items]
layout = go.Layout(title='Category Trend',
xaxis = dict(title = 'Time Frame' , tickformat = '%d-%b'),
yaxis = dict(tickprefix= '₹', tickformat=',.2f',type='log',autorange = True),
hovermode = 'closest',
plot_bgcolor = colors['background'],
paper_bgcolor = colors['background'],
font = dict(color = colors['text'])
)
In the above 2 graphs , as the length of the tick value increases, it gets cut off . Is there a better way to handle this ?
Credit for #Flavia Giammarino in comments for the reference to the docs. I'm posting the answer for completeness.
https://plotly.com/python/setting-graph-size/
From that link the example below shows how to set margin:
fig.update_layout(
margin=dict(l=20, r=20, t=20, b=20),
)
Where l r t b correspond to left, right, top, bottom.
I had a similar problem with some Dash/Plotly charts and long y axis labels being truncated or hidden. There didn't seem to be much information or documentation on this issue, so it took a while to solve.
Solution: add this code to the layout settings to prevent truncation of the y axes labels:
fig.update_layout(
yaxis=dict(
automargin=True
)
)
or you can update the yaxes setting specifically:
fig.update_yaxes(automargin=True)
Update: I tried another version of Plotly (5.10 or above) which mentions setting the automargin setting to any combination of automargin=['left+top+right+bottom'] with similar results. This still seems a bit unstable and doesn't solve all possible scenarios or corner cases, but works fine in most cases, especially when the browser window is maximized.

Oxyplot showing HeatMapSeries behind ScatterSeries

I am trying to combine LineSeries, ScatterSeries and HeatmapSeries on a single OxyPlot instance. I am able to show the first two just fine on the same plot and it looks like the following:
The axes for this are generated by the following code:
var xAxis = new DateTimeAxis();
xAxis.Key = "X";
xAxis.Position = AxisPosition.Bottom;
xAxis.AbsoluteMinimum = DateTimeAxis.ToDouble(CurrentPass.AOS);
xAxis.AbsoluteMaximum = DateTimeAxis.ToDouble(CurrentPass.LOS);
xAxis.AxislineColor = xAxis.TextColor = xAxis.TicklineColor = xAxis.MajorGridlineColor = OxyColors.DarkGray;
var yAxis = new LinearAxis();
yAxis.Key = "Y";
yAxis.Position = AxisPosition.Left;
yAxis.AbsoluteMinimum = 0.0;
yAxis.AbsoluteMaximum = MaximumFrequency;
yAxis.Maximum = MaximumFrequency;
yAxis.AxislineColor = yAxis.TextColor = yAxis.TicklineColor = yAxis.MajorGridlineColor = OxyColors.DarkGray;
If I add in a third axes for the Heatmap (not even a HeatMapSeries yet), I get the following:
The extra code here for the axis for the HeatMap is:
var heatmapAxis = new LinearColorAxis();
heatmapAxis.AbsoluteMinimum = 0.0;
heatmapAxis.AbsoluteMaximum = MaximumFrequency;
heatmapAxis.Palette = OxyPalettes.Gray(1024);
heatmapAxis.Key = "HeatMap";
I am not sure what's going on here. The line series still shows. And all the ScatterPoints from the scatterseries I have are definitely there - the tracker shows up and I can interact with the points (hover, click etc.). But the points don't show. If I add a HeatMapSeries, the HeatMapSeries data does show up as expected, the LineSeries data still shows up but no ScatterSeries data.
Again, the HeatMap data and the Scatter Series data show up individually, but never together.
Has anyone encountered this before? Are there workarounds?
Thanks,
Aditya
Sorry this is a bit late but just stumbled upon this. I had something similar with a line not showing up on a Heatmap and after some experimenting i realized the order in which the series' are added to the plot model make a big difference. Make sure you add your ScatterSeries after you've added your Heatmap to the plot model.

Octave axes zoom redraw

I am facing an issue in Octave. When I set custom tick labels of y axis, labels are not updated correctly when zoomed. It is easy to solve in Matlab:
plot(1:10);
ax = gca;
ax.YAxis.TickLabelFormat = '%,.1f';
My code with faulty y labels when zoomed:
ax2 = gca;
ytick = get (ax2, "ytick");
yticklabel = strsplit (sprintf ("%9.0f\n", ytick), "\n", true);
set (ax2, "yticklabel", yticklabel);
The above code formats y tick labels properly, but labels does not match plot when zoomed. There is a screenshot of my issue: nonzoomed vs zoomed.
I am using W10 64bit, Octave version 4.0.3.. Octave was configured for "i686-w64-mingw32".
Any ideas?
I have decided to add minimal code example to be more clear about the issue:
x=1:length(inv);
figure
hax1 = subplot(2,1,1);
stairs(x,inv);
hax2 = subplot(2,1,2);
x=1:length(mon);
% big numbers here, need to format to get rid of scientific notation
stairs(x,mon);
ax2 = gca;
ytick = get (ax2, "ytick");
yticklabel = strsplit (sprintf ("%9.0f\n", ytick), "\n", true);
set (ax2, "yticklabel", yticklabel);
linkaxes([hax1 hax2],'x');

Additional legend or text box window in a plot in octave

I would like to add to my plot a text or a legend box with comments.
At the moment my legend is plot at northeastoutside and i would like to add the new legend (or textbox) to the position southeastoutside.
Thanks!
Lacking more information about your case:
To the best of my knowledge one axes object can only have a single legend object. You can create a second legend with a second axes object. Each legend will only list data elements associated with each axes. Adapted from Matlab Newsgroup thread
a = [1:0.01:2*pi]; %create sample data
b = sin(a);
linehandle1 = line(a,b); %creates a line plot with handle object
axeshandle1 = gca; % gets the handle for the axes object just created
legendhandle1 = legend('y = sin(x)', 'location', 'northeastoutside'); %makes first legend
axeshandle2 = axes('Position',get(axeshandle1,'Position'),'xlim',get(axeshandle1,'xlim'),'ylim',get(axeshandle1,'ylim'),'Visible','off','Color','none'); %makes invisible axes with same position and scaling
linehandle2 = line(pi/2,1,'Color','r','Marker','o','Parent',axeshandle2); %puts data set on 2nd axes
linehandle3 = line(pi,0,'Color','b','Marker','x','Parent',axeshandle2);
legend_handle2 = legend('peak','zero','location','southeastoutside'); %creates legend to go with 2nd axes
If you just want text in that 2nd box, not necessarily legend info or data labels, you can play around with annotation as described above. This has the advantage of being simpler to call, but maybe harder to get the exact position/result you want. There are a large number of property options that can be adjusted to get the desired appearance. A few are shown in the example. It may be there are easier ways to set the size/position based on the legendhandle.
a = [1:0.01:2*pi]; %create sample data
b = sin(a);
plot(a,b);
legendhandle = legend('y = sin(x)','location','northeastoutside');
annotation('textbox',[0.875 0.1 0.1 0.1],'string','my text','edgecolor','k','linewidth',1,'fitboxtotext','off');