heatmap in d3js has weird x axis - d3.js

I have changed this code https://bl.ocks.org/nanu146/df39c69d1d0cb1b71429b2cd47e2a189
according to my need. But the x-axis has on first and last position empty line. How can I get rid of it?
I tried to play with xScale but no success. my heatmap result
Thanks for help!

To remove those ticks just do:
axis.tickSizeOuter(0);
According to the API, tickSizeOuter():
...controls the length of the square ends of the domain path, offset from the native position of the axis. Thus, the “outer ticks” are not actually ticks but part of the domain path, and their position is determined by the associated scale’s domain extent [...] An outer tick size of 0 suppresses the square ends of the domain path, instead producing a straight line.
Here is the bl.ocks you linked with that change: https://bl.ocks.org/GerardoFurtado/a5153b4a293d72325c1aaee0b9aaac0c/52d701ca5d5a79809316eef39eafa2ccfc70879b

Related

CanvasJS - Dynamic chart without setInteval()

Here is the original example code :
http://canvasjs.com/html5-javascript-dynamic-chart/
I need to update the value without setInterval(), I mean whenever the yAxis got a value somewhere, then it will plot automatically without time delay. One more thing, I dont’t want to shift the graph while the value reach datalength, when it reach the maximum datalength, clear all the old plotted data, go back to 0 point and plot again.
Thank you for your support !
canvasjs
Gia Huy,
You can remove dps.shift from the example to avoid shifting. Check this example.
And you can remove setInterval to avoid update of charge based on time-basis and you can manually push y-value to dataPoints and render chart whenever you get y-value.
setInterval(function(){updateChart()}, updateInterval);
Remove setInterval and push y-Value to dataPoints when you encounter it.
dps.push({y: yValue});
chart.render();
and render the chart.

Arrows on Line Segments

I'm using Segment Plot to show multiple lines on the chart. How can I make these lines have arrows on their ends?
You can do this with some SVG + DOM hacking. You can define a "marker element" that can be placed at the beginning, middle or end of a line (see http://tutorials.jenkov.com/svg/marker-element.html for details on markers).
This means manipulating the SVG generated by Plottable. To get the underlying DOM elements, you need to get hold of the d3 "selection" representing each line.
Add a marker definition to the <svg> element where you are rendering the plot. I am pretty sure plottable won't overwrite entities already inside, but if it does you can always add it after rendering the plot.
Use Segment#entities to get all "PlotEntity" objects from the plot (http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities).
Use the PlotEntity#selection property (http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection) to get the set of DOM elements representing each segment.
The "Selection" interface is just a d3 selection (https://github.com/mbostock/d3/wiki/Selections). You can then add the appropriate "marker-end" attribute to each element, which should give you the arrow heads you want.
On the off-chance these lines are vertical, I have a super easy hack. Use .symbol() to create a scatter plot where the points are either up or down arrows, and place them at the ends of the segments.
Otherwise, you may have to draw the arrows yourself. You can get the pixel locations of the ends of the segments like this:
locX = xScale.invert(endpointXValue)
locY = yScale.invert(endpointYValue)
And then you could append an arrow shape to the foreground (see the crosshair container in this example)

D3.js: Mouse over between grid lines

I am creating a line chart with grid lines. Here's the similar example: http://bl.ocks.org/hunzy/11110940
I need to change the background of vertical space between X(2) to X(4), X(8) to X(10) and X(12) to X(14) on mouse hover. But I am not able to understand how to use D3 to reference those spaces between the grid lines.
There is nothing there to click on/hover over. The normal axis/grid creates lines, not rectangles. You would need to change the default behave of the axis objects to create "invisible, but clickable" rectangles in order to be able to attach a mouse event to those spaces.
I don't know if this is the recommended approach but it seems like it could work. After the axis has been created:
something
.attr('class','xaxis')
.call(xAxis)
You could select the ticks with something like this:
d3.select(svg).select('.xaxis g.tick').each(function(){
// this.transform will be "translate(X,Y)"
})
In the function you can query the existing properties of the g elements and extract the transform attribute which will contain the X and Y offset for the "tick". This can be used to determine one dimension of your rectangle objects. The other dimension is determined by the size of the other axis or something like that.

Removing the raised corners from d3.js axes to create flat axis

D3.js axes typically have "handlebars" on the end of each axis, like this:
Those look nice. But.
How can these be removed to make an axis look flat, like this:
The square ends of the path are sized using either the .tickSize method, in which case the second argument gives the outer tick size and the first the main tick size, or else using the .outerTickSize method. In either case, supply a value of 0 to suppress the ticks.
ticks.tickSize(innerTickHeight, 0);
or
ticks.outerTickSize(0);
Source: page on d3 axes.

Can't get marker to display in nvd3 bullet chart when marker value is zero

I would like to display a marker on a bullet chart even when the number is zero; however, I can't find the area in either bullet.js or bulletChart.js where I can keep it from removing the marker. This is the example that I'm implementing in my project: http://nvd3.org/examples/bullet.html
The charts work otherwise, but I just can't get that to work.
Set it to the text "0", rather than the number.
Since you're using dynamic data, you'll need to do a special case check.

Resources