Copy Complete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Advanced Keyword Visualization Map - Professional keyword analysis and visualization tool compatible with Blogger websites.">
<title>Keyword Visualization Tool</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #eef2f3;
margin: 0;
padding: 20px;
text-align: center;
}
h1 {
color: #333;
}
#keywordInput {
padding: 10px;
font-size: 16px;
width: 70%;
max-width: 400px;
}
#searchButton {
padding: 10px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#searchButton:hover {
background-color: #0056b3;
}
#keywordMap {
margin: 20px auto 0;
border: 1px solid #ccc;
background: #fff;
width: 100%;
max-width: 800px;
height: 500px;
}
.tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px;
border-radius: 4px;
pointer-events: none;
font-size: 12px;
z-index: 10;
}
</style>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<h1>Advanced Keyword Visualization Tool</h1>
<input type="text" id="keywordInput" placeholder="Enter a keyword..." />
<button id="searchButton">Search</button>
<svg id="keywordMap"></svg>
<div id="tooltip" class="tooltip" style="display: none;"></div>
<script>
const apiKey = 'sk-YOUR_OPENAI_API_KEY'; // Replace with your OpenAI API key.
document.getElementById('searchButton').addEventListener('click', async () => {
const keyword = document.getElementById('keywordInput').value.trim();
if (!keyword) {
alert("Please enter a keyword.");
return;
}
const keywords = await fetchKeywords(keyword);
if (keywords.length > 0) {
visualizeKeywords(keywords);
} else {
alert("No related keywords found. Displaying default data.");
visualizeKeywords(generateDummyData());
}
});
async function fetchKeywords(keyword) {
try {
const response = await fetch("https://api.openai.com/v1/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${apiKey}`
},
body: JSON.stringify({
model: "text-davinci-003",
prompt: `Generate related keywords for: ${keyword}`,
max_tokens: 50
})
});
const data = await response.json();
if (data.choices && data.choices[0].text) {
const keywords = data.choices[0].text.trim().split(", ");
return keywords.map((item, index) => ({
id: item,
volume: Math.floor(Math.random() * 100) + 10,
difficulty: Math.floor(Math.random() * 100) + 10
}));
}
return [];
} catch (error) {
console.error("Error fetching keywords:", error);
return [];
}
}
function generateDummyData() {
return [
{ id: "Dummy Keyword 1", volume: 40, difficulty: 30 },
{ id: "Dummy Keyword 2", volume: 60, difficulty: 50 },
{ id: "Dummy Keyword 3", volume: 80, difficulty: 70 },
];
}
function visualizeKeywords(keywords) {
const svg = d3.select("#keywordMap")
.attr("width", "100%")
.attr("height", 500);
svg.selectAll("*").remove();
const width = svg.node().getBoundingClientRect().width;
const height = +svg.attr("height");
const colorScale = d3.scaleSequential(d3.interpolateBlues)
.domain([0, d3.max(keywords, d => d.volume)]);
const simulation = d3.forceSimulation(keywords)
.force("charge", d3.forceManyBody().strength(-100))
.force("center", d3.forceCenter(width / 2, height / 2))
.force("collision", d3.forceCollide().radius(d => Math.sqrt(d.volume) * 2))
.on("tick", ticked);
const node = svg.selectAll("circle")
.data(keywords)
.enter()
.append("circle")
.attr("r", d => Math.sqrt(d.volume) + 5)
.attr("fill", d => colorScale(d.volume))
.attr("stroke", "#333")
.on("mouseover", (event, d) => showTooltip(event, d))
.on("mouseout", hideTooltip);
function ticked() {
node.attr("cx", d => d.x)
.attr("cy", d => d.y);
}
function showTooltip(event, d) {
const tooltip = d3.select("#tooltip");
tooltip.style("display", "block")
.style("left", `${event.pageX + 10}px`)
.style("top", `${event.pageY - 30}px`)
.html(`<strong>${d.id}</strong><br>Volume: ${d.volume}<br>Difficulty: ${d.difficulty}`);
}
function hideTooltip() {
d3.select("#tooltip").style("display", "none");
}
}
</script>
</body>
</html>
*****
Post a Comment
0Comments