xxxxxxxxxx
<meta charset="utf-8">
<head>
<title>Chandrakant Bharatkumar Thakkar</title>
<style>
.circle {
fill: orange;
stroke: #ccc;
stroke-width: 2px;
}
.line {
fill: none;
stroke: orange;
stroke-width: 2px;
}
</style>
</head>
<body>
<div id="charts">
<svg width="800" height="500">
</svg>
<input type="button" style="display:none;" value='Reset' onclick="resetCircle()" />
</div>
<a href="https://stackoverflow.com/users/7430694/chandrakant-thakkar" style="position: absolute;top: 87%;left: 77%;" target="_blank">
<img src="https://stackoverflow.com/users/flair/7430694.png" width="208" height="58" alt="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers" title="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers">
</a>
<script src="./jquery-latest.min.js"></script>
<script src="./d3.v4.min.js"></script>
<script src="./data.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
const lineData = ["jan", "feb", "mar", "apr", "may", "jun"];
const margin = { top: 10, left: 50, bottom: 20, right: 10 };
width = width - (margin.left + margin.right);
height = height - (margin.top + margin.bottom);
const xScale = d3.scalePoint().domain(lineData).range([0, width]);
const yScale = d3.scaleLinear().domain([0, 100]).range([height, 0]);
const mainG = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + (yScale(0) + margin.top) + ")")
.call(d3.axisBottom(xScale));
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(d3.axisLeft(yScale));
const linePoints = [];
let countLine = Math.floor(Math.random() * 7);
countLine = countLine < 2 ? 2 : countLine;
for (var i = 0; i < countLine; i++) {
const preparedDataOfLine = lineData.map(point => {
let y = Math.round(Math.random() * 100);
y = y > 100 ? 100 : y;
return {
x: point,
y: y
}
});
linePoints.push(preparedDataOfLine);
}
console.log("preparedDataOfLine:", linePoints);
const curveType = "curveMonotoneX";
const curve = curveType && typeof d3[curveType] === "function" ? d3[curveType] : d3["curveLinear"];
const line = d3.line()
.curve(curve)
.x(d => xScale(d.x))
.y(d => yScale(d.y));
const lines = mainG.selectAll(".line")
.data(linePoints);
lines.enter()
.append("path")
.attr("class", "line")
.datum(d => d)
.attr("d", line);
const count = Math.round(Math.random() * 20);
const bubblePosition = [];
for (i = 0; i < count; i++) {
let x = Math.round(Math.random() * width);
x = x > width - 10 ? width - 10 : x;
let y = Math.round(Math.random() * height);
y = y > (height - margin.bottom - 10) - 10 ? (height - margin.bottom - 10) - 10 : y;
bubblePosition.push({
x: x,
y: y
})
}
const circles = mainG
.selectAll(".circle")
.data(bubblePosition);
circles.enter()
.append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("class", "circle")
.attr("r", 10);
function resetCircle() {
d3.selectAll(".circle").nodes().forEach(d => {
let x = Math.round(Math.random() * width);
x = x > width - 10 ? width - 10 : x;
let y = Math.round(Math.random() * height);
y = y > (height - margin.bottom - 10) - 10 ? (height - margin.bottom - 10) - 10 : y;
d3.select(d).transition()
.duration(1000)
.attr("cx", x)
.attr("cy", y);
});
const count = Math.round(Math.random() * 20);
const bubblePosition = [];
for (i = 0; i < count; i++) {
let x = Math.round(Math.random() * width);
x = x > width - 10 ? width - 10 : x;
let y = Math.round(Math.random() * height);
y = y > (height - margin.bottom - 10) - 10 ? (height - margin.bottom - 10) - 10 : y;
bubblePosition.push({
x: x,
y: y
});
}
const circles = mainG
.selectAll(".circle")
.data(bubblePosition);
circles.exit().remove();
const newCircles = circles.enter()
.append("circle")
.attr("class", "circle")
.attr("r", 10)
.attr("cx", d => Math.random() * 700)
.attr("cy", d => Math.random() * 400)
.merge(circles)
.transition()
.duration(1000)
.attr("cx", d => d.x)
.attr("cy", d => d.y);
const linePoints = [];
let countLine = Math.floor(Math.random() * 7);
countLine = countLine < 2 ? 2 : countLine;
for (var i = 0; i < countLine; i++) {
const preparedDataOfLine = lineData.map(point => {
let y = Math.round(Math.random() * 100);
y = y > 100 ? 100 : y;
return {
x: point,
y: y
}
});
linePoints.push(preparedDataOfLine);
}
console.log("preparedDataOfLine:", linePoints);
const lines = mainG.selectAll(".line")
.data(linePoints);
lines.exit().remove();
const newLines = lines.enter().append("path")
.attr("class", "line")
.merge(lines)
.datum(d => d)
.transition()
.duration(1000)
.attr("d", line);
}
setInterval(function () {
resetCircle();
}, 1000)
</script>