Skip to content

Instantly share code, notes, and snippets.

@waseemnawaz

waseemnawaz/app1.js

Created October 7, 2020 19:37
Show Gist options
  • Save waseemnawaz/848713756dc796003b66ca709a35f028 to your computer and use it in GitHub Desktop.
Save waseemnawaz/848713756dc796003b66ca709a35f028 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app1.js
var data = [
[ 400, 200 ],
[ 210, 140 ],
[ 722, 300 ],
[ 70, 160 ],
[ 250, 50 ],
[ 110, 280 ],
[ 699, 225 ],
[ 90, 220 ]
];
var chart_width = 800;
var chart_height = 400;
var padding = 50;
//create svg
var svg = d3.select('#chart')
.append('svg')
.attr('width', chart_width)
.attr('height', chart_height)
//create the scales
var x_scale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){
return d[0]
})])
.range([padding, chart_width - padding])
var y_scale = d3.scaleLinear()
.domain([0, d3.max(data, function(d){
return d[1]
})])
.range([chart_height - padding, padding])
//.range([chart_height, padding + 50])
//create the axis
var x_axis = d3.axisBottom(x_scale)
svg.append('g')
.attr('class', 'x-axis')
.attr('transform', 'translate(0,' + (chart_height - padding ) + ')')
.call(x_axis)
var y_axis = d3.axisLeft(y_scale)
svg.append('g')
.attr('class', 'y-axis')
.attr('transform', 'translate( ' + padding + ', 0 )')
.call(y_axis)
//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', 15)
.attr('fill', 'magenta')
//a button event here
d3.select('button').on('click', function(){
//new data
var data = [];
for(var i = 0; i < 100; i++){
var randomN = Math.round(Math.random()*1000)
var xx = Math.round(Math.random()*randomN)
var yy = Math.round(Math.random()*randomN)
data.push([xx,yy])
}
//the scales
x_scale.domain([0, d3.max(data, function(d){
return d[0]
})])
y_scale.domain([0, d3.max(data, function(d){
return d[1]
})])
//the circles
svg.selectAll('circle')
.data(data)
.transition()
.duration(500)
.on('start', function(){
d3.select(this)
.attr('r', 15)
})
.attr('cx', function(d){
return x_scale(d[0])
})
.attr('cy', function(d){
return y_scale(d[1])
})
.on('end', function(){
d3.select(this)
.attr('r', 10)
})
//the axis
svg.select('.x-axis')
.transition()
.duration(1000)
.call(x_axis)
svg.select('.y-axis')
.transition()
.duration(1000)
.call(y_axis)
})
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">Press here</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;
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{
font-weight: bold;
font-size: 50px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment