Skip to content

Instantly share code, notes, and snippets.

@waseemnawaz

waseemnawaz/app1.js

Created October 6, 2020 19:16
Show Gist options
  • Save waseemnawaz/3fadd8b1dd355c9d2db59b92e0df3b8d to your computer and use it in GitHub Desktop.
Save waseemnawaz/3fadd8b1dd355c9d2db59b92e0df3b8d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app1.js
//the data
var data = [
[ 400, 200 ],
[ 210, 140 ],
[ 722, 300 ],
[ 70, 160 ],
[ 250, 50 ],
[ 110, 280 ],
[ 699, 225 ],
[ 90, 220 ]
];
//random data
var data = [];
for(var i = 0; i < 200; i++){
var random = Math.floor(Math.random() * 1000)
var xxx = Math.floor(Math.random()* random)
var yyy = Math.floor(Math.random()* random)
data.push([xxx,yyy])
}
console.log(data)
//the typical variables...
var chart_height = 400
var chart_width = 800
var margin = 50
//create the svg
var svg = d3.select('#chart')
.append('svg')
.attr('width', chart_width)
.attr('height', chart_height)
//the scales
var x_scale = d3.scaleLinear()
.domain([d3.min(data, function(d){
return d[0]
}), d3.max(data, function(d){
return d[0]
})])
.range([margin, chart_width - margin])
var new_x_scale = d3.scaleLinear()
.domain([d3.min(data, function(d){
return d[0]
}), d3.max(data, function(d){
return d[0]
})])
.range([chart_width - margin, margin])
var y_scale = d3.scaleLinear()
.domain([d3.min(data, function(d){
return d[1]
}), d3.max(data, function(d){
return d[1]
})])
.range([margin, chart_height - margin])
var color = d3.scaleSequential()
.domain([d3.min(data, function(d){
return d[0]
}), d3.max(data, function(d){
return d[0]
})])
.interpolator(d3.interpolateBlues)
//create the circles
svg.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', function(d){
return x_scale(d[0])
})
.attr('cy', function(d){
return y_scale(d[1])
})
.attr('r', 7)
.attr('fill', 'magenta')
.attr('fill', function(d){
return color(d[0])
})
//mouse event on button
d3.select('button').on('click', function(){
var data = [];
for(var i = 0; i < 200; i++){
var random = Math.floor(Math.random() * 1000)
var xxx = Math.floor(Math.random()* random)
var yyy = Math.floor(Math.random()* random)
data.push([xxx,yyy])
}
x_scale.domain([d3.min(data, function(d){
return d[0]
}), d3.max(data, function(d){
return d[0]
})])
//x_scale.range([chart_width - margin, margin])
y_scale.domain([d3.min(data, function(d){
return d[1]
}), d3.max(data, function(d){
return d[1]
})])
svg.selectAll('circle')
.data(data)
.transition()
.duration(1000)
.delay(function(d, i){
return i/data.length * 1000
})
.attr('cx', function(d){
return x_scale(d[0])
})
.attr('cy', function(d){
return y_scale(d[1])
})
.attr('r', 7)
.attr('fill', 'magenta')
.attr('fill', function(d){
return color(d[0])
})
})
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Scatter Plot</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="chart"></div>
<hr>
<button type="button">Button</button>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="app1.js"></script>
</body>
</html>
Raw
style.css
#chart{
width: 800px;
height: 400px;
/*background-color: #f7f7f7;*/
/*background-color: #FFF8F9;*/
margin: 25px auto;
}
.x-axis path, .x-axis line, .y-axis path, .y-axis line {
shape-rendering: crispEdges;
}
.x-axis text, .y-axis text {
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
}
button{
display: block;
margin: 0 auto;
background-color: blue;
color: white;
}
.someColor{
background-color: 'white';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment