Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
d3-latency-heatmap
Advanced tools
Readme
This is a reusable D3 latency heatmap chart, which is a highly effective way to visualize latency data over time. The chart is fast, easy to use, and produces beautiful images such as the below:
For more on latency heatmaps, see:
D3 version 4.x is required (3.x is not supported).
If you use NPM, npm install d3-latency-heatmap
. Otherwise, download
the latest release binaries
or the latest release source code.
You can also load directly from
unpkg.com. AMD, CommonJS, and
vanilla environments are supported. In vanilla, a d3 global is exported:
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//sengelha.github.io/d3-latency-heatmap/d3-latencyHeatmap.v1.min.js"></script>
<div id="chart"></div>
<script>
(function() {
var parseTime = d3.timeParse("%Y-%m");
var chart = d3.latencyHeatmap()
.x(function (d) { return parseTime(d.date); })
.y(function (d) { return +d.bucket; })
.yFormat(function(d) { return d + " s"; })
.count(function(d) { return +d.count; })
.colorRange([d3.rgb('#FFFFFF'), d3.rgb('#5B82A1')])
.tooltipText(function (d) { return "YearMonth: " + d[0].toISOString().substring(0, 7) + "\nBucket: " + d[1] + "\nCount: " + d[2]; })
.rectSize([8, 8]);
d3.csv("//sengelha.github.io/d3-latency-heatmap/sample-data.csv", function (data) {
var svg = d3.select("#chart")
.datum(data)
.call(chart);
});
})();
</script>
Creates a new latency heatmap chart which may later be rendered into a container. Returns a latencyHeatmap object.
The typical pattern that the chart is rendered is by:
div
) into which the chart will be renderedcall()
method.Example:
var data = [...]; // May be sourced using d3.csv(), d3.json(), etc.
d3.select("#container")
.datum(data)
.call(chart);
Defines the color range to be used when filling cells. This color
range will be interpolated using d3.interpolateRgb()
. If not set,
defaults to [d3.rgb('#FFFFFF'), d3.rgb('#F03524')]
.
Example:
d3.latencyHeatmap()
.colorRange([d3.rgb('#FFFFFF'), d3.rgb('#5B82A1')]);
Defines an count accessor which is called for each row in data
.
Must return a number, which corresponds to the number of observations
within the bucket. If not set, defaults to function(d) { return d[2]; }
.
Example:
d3.latencyHeatmap()
.count(function(d) { return d.count; }); // d is { x: Date, y: number, count: number }
Sets the height of the rendered chart to h. Automatically scales the size of the drawn rectangles to fit the specified chart height. If not set, defaults to 400.
This value is ignored if the rectangle size is set using rectSize().
Example:
d3.latencyHeatmap()
.height(400);
Sets the size of the individual rectangles used to draw the chart to be width w and height w. When set, the chart automatically calculates the total width and height based on the number of elements to be drawn.
Example:
d3.latencyHeatmap()
.rectSize([6, 4]);
Defines an accessor which can be used to control how tooltips for
each drawn rectangle are formatted. formatter is called with an
array with three elements: the x-value for the tick (a Date
object),
the y-value for the tick (a number) and the count. If not set, no
tooltips are drawn.
Example:
d3.latencyHeatmap()
.tooltipText(function (d) { return "X: " + d[0] + " Y: " + d[1] + " Count: " + d[2]; });
Sets the width of the rendered chart to w. Automatically scales the size of the drawn rectangles to fit the specified chart width. If not set, defaults to 600.
This value is ignored if the rectangle size is set using rectSize().
Example:
d3.latencyHeatmap()
.width(600);
Defines an x accessor which is called for each row in data
. Must return
a Date
object, which must correspond to the timestmap of the bucket.
If not set, defaults to function(d) { return d[0]; }
.
Example:
d3.latencyHeatmap()
.x(function(d) { return d.x; }); // d is { x: Date, y: number, count: number }
Defines an accessor which can be used to control how tick labels on the
x-axis are formatted. formatter is called with the x-value for the tick,
which is a Date
object. If not set, defaults to the d3 default time
axis tick formatter.
Example:
d3.latencyHeatmap()
.xFormat(function(dt) { return dt.toLocaleString(); });
Defines an y accessor which is called for each row in data
. Must return
a number, which corresponds to the y-value of the bucket.
If not set, defaults to function(d) { return d[1]; }
.
Example:
d3.latencyHeatmap()
.y(function(d) { return d.y; }); // d is { x: Date, y: number, count: number }
Defines an accessor which can be used to control how tick labels on the y-axis are formatted. formatter is called with the y-value for the tick. If not set, defaults to the d3 default linear axis tick formatter.
Example:
d3.latencyHeatmap()
.yFormat(function(y) { return y + " ms"; }); // y values are denoted in ms
This project is licensed under the MIT License.
FAQs
A reusable D3 latency heatmap chart.
The npm package d3-latency-heatmap receives a total of 15 weekly downloads. As such, d3-latency-heatmap popularity was classified as not popular.
We found that d3-latency-heatmap demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.