Skip to content

Instantly share code, notes, and snippets.

@jwilber

jwilber/.block

Created January 13, 2019 22:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jwilber/d25290ce31d5a2190d5537957a50939f to your computer and use it in GitHub Desktop.
Save jwilber/d25290ce31d5a2190d5537957a50939f to your computer and use it in GitHub Desktop.
Download ZIP
simple scatter plot d3v4
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
const margin = {top: 50, right: 25, bottom: 25, left: 25};
const width = 700 - margin.right - margin.left;
const height = 500 - margin.top - margin.bottom;
const svg = d3.select('body').append('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
// define scales
const xScale = d3.scaleLinear().domain([1, 10]).range([20, width]);
const yScale = d3.scaleLinear().domain([0, 35]).range([height, 20]);
// define axes
const xAxis = d3.axisBottom()
.scale(xScale)
.tickValues([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
const yAxis = d3.axisLeft()
.scale(yScale)
.ticks(10);
// draw axies
svg.append('g').attr('id', 'xAxisG')
.attr('transofrm', 'translate(500, 500)')
.call(xAxis);
svg.append('g').attr('id', 'yAxisG').call(yAxis);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment