经过仔细考虑，我们决定停用适用于 SQL 应用程序的 Amazon Kinesis Data Analytics：
1. 从 **2025年9月1日起，**我们将不再为适用于SQL应用程序的Amazon Kinesis Data Analytics Data Analytics提供任何错误修复，因为鉴于即将停产，我们对其的支持将有限。
2. 从 **2025 年 10 月 15 日**起，您将无法为 SQL 应用程序创建新的 Kinesis Data Analytics。
3. 从 **2026 年 1 月 27 日**起，我们将删除您的应用程序。您将无法启动或操作 Amazon Kinesis Data Analytics for SQL 应用程序。从那时起，将不再提供对 Amazon Kinesis Data Analytics for SQL 的支持。有关更多信息，请参阅 [Amazon Kinesis Data Analytics for SQL 应用程序停用](discontinuation.md)。
本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。
# 步骤 4：验证应用程序输出
在[热点示例](app-hotspots-detection.md)的此部分中，您将设置一个 Web 应用程序，该应用程序在可扩展矢量图形 (SVG) 控件中显示热点信息。
1. 使用以下内容创建名为 `index.html` 的文件：
```
hotspots viewer
```
1. 在同一目录中创建一个名为 `hotspots_viewer.js` 的文件，该文件包含以下内容。在提供的变量中包含您的 、凭证和输出流名称。
```
// Visualize example output from the Kinesis Analytics hotspot detection algorithm.
// This script assumes that the output stream has a single shard.
// Modify this section to reflect your AWS configuration
var awsRegion = "", // The where your Kinesis Analytics application is configured.
accessKeyId = "", // Your Access Key ID
secretAccessKey = "", // Your Secret Access Key
outputStream = ""; // The name of the Kinesis Stream where the output from the HOTSPOTS function is being written
// The variables in this section should reflect way input data was generated and the parameters that the HOTSPOTS
// function was called with.
var windowSize = 1000, // The window size used for hotspot detection
minimumDensity = 40, // A filter applied to returned hotspots before visualization
xRange = [0, 10], // The range of values to display on the x-axis
yRange = [0, 10]; // The range of values to display on the y-axis
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// D3 setup
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var svg = d3.select("svg"),
margin = {"top": 20, "right": 20, "bottom": 20, "left": 20},
graphWidth = +svg.attr("width") - margin.left - margin.right,
graphHeight = +svg.attr("height") - margin.top - margin.bottom;
// Return the linear function that maps the segment [a, b] to the segment [c, d].
function linearScale(a, b, c, d) {
var m = (d - c) / (b - a);
return function(x) {
return c + m * (x - a);
};
}
// helper functions to extract the x-value from a stream record and scale it for output
var xValue = function(r) { return r.x; },
xScale = linearScale(xRange[0], xRange[1], 0, graphWidth),
xMap = function(r) { return xScale(xValue(r)); };
// helper functions to extract the y-value from a stream record and scale it for output
var yValue = function(r) { return r.y; },
yScale = linearScale(yRange[0], yRange[1], 0, graphHeight),
yMap = function(r) { return yScale(yValue(r)); };
// a helper function that assigns a CSS class to a point based on whether it was generated as part of a hotspot
var classMap = function(r) { return r.is_hot == "Y" ? "point hot" : "point cold"; };
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function update(records, hotspots) {
var points = g.selectAll("circle")
.data(records, function(r) { return r.dataIndex; });
points.enter().append("circle")
.attr("class", classMap)
.attr("r", 3)
.attr("cx", xMap)
.attr("cy", yMap);
points.exit().remove();
if (hotspots) {
var boxes = g.selectAll("rect").data(hotspots);
boxes.enter().append("rect")
.merge(boxes)
.attr("class", "hotspot")
.attr("x", function(h) { return xScale(h.minValues[0]); })
.attr("y", function(h) { return yScale(h.minValues[1]); })
.attr("width", function(h) { return xScale(h.maxValues[0]) - xScale(h.minValues[0]); })
.attr("height", function(h) { return yScale(h.maxValues[1]) - yScale(h.minValues[1]); });
boxes.exit().remove();
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Use the AWS SDK to pull output records from Kinesis and update the visualization
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var kinesis = new AWS.Kinesis({
"region": awsRegion,
"accessKeyId": accessKeyId,
"secretAccessKey": secretAccessKey
});
var textDecoder = new TextDecoder("utf-8");
// Decode an output record into an object and assign it an index value
function decodeRecord(record, recordIndex) {
var record = JSON.parse(textDecoder.decode(record.Data));
var hotspots_result = JSON.parse(record.HOTSPOTS_RESULT);
record.hotspots = hotspots_result.hotspots
.filter(function(hotspot) { return hotspot.density >= minimumDensity});
record.index = recordIndex
return record;
}
// Fetch a new records from the shard iterator, append them to records, and update the visualization
function getRecordsAndUpdateVisualization(shardIterator, records, lastRecordIndex) {
kinesis.getRecords({
"ShardIterator": shardIterator
}, function(err, data) {
if (err) {
console.log(err, err.stack);
return;
}
var newRecords = data.Records.map(function(raw) { return decodeRecord(raw, ++lastRecordIndex); });
newRecords.forEach(function(record) { records.push(record); });
var hotspots = null;
if (newRecords.length > 0) {
hotspots = newRecords[newRecords.length - 1].hotspots;
}
while (records.length > windowSize) {
records.shift();
}
update(records, hotspots);
getRecordsAndUpdateVisualization(data.NextShardIterator, records, lastRecordIndex);
});
}
// Get a shard iterator for the output stream and begin updating the visualization. Note that this script will only
// read records from the first shard in the stream.
function init() {
kinesis.describeStream({
"StreamName": outputStream
}, function(err, data) {
if (err) {
console.log(err, err.stack);
return;
}
var shardId = data.StreamDescription.Shards[0].ShardId;
kinesis.getShardIterator({
"StreamName": outputStream,
"ShardId": shardId,
"ShardIteratorType": "LATEST"
}, function(err, data) {
if (err) {
console.log(err, err.stack);
return;
}
getRecordsAndUpdateVisualization(data.ShardIterator, [], 0);
})
});
}
// Start the visualization
init();
```
1. 在第一个部分中 Python 代码运行时，在 Web 浏览器中打开 `index.html`。热点信息显示在页面上，如下所示。
![\[显示热点信息的可扩展矢量图形图表。\]](http://docs.aws.amazon.com/zh_cn/kinesisanalytics/latest/dev/images/hotspots_visualizer.png)