Created
November 6, 2017 12:09
-
-
Save valex/6447f290bf17c7e6da42685888908e59 to your computer and use it in GitHub Desktop.
Scatter Plot using d3.js version 4
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| </head> | |
| <body> | |
| <script src="http://d3js.org/d3.v4.min.js"></script> | |
| <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script> | |
| <script> | |
| var url = "https://gist.githubusercontent.com/d3byex/520e6dcb30e673c149cc/raw/432623f00f6740021bdc13141612ac0b6196b022/corr_aapl_msft.csv"; | |
| d3.csv(url, function (error, rawData) { | |
| var data = rawData.map(function (d) { | |
| return { X: +d.AAPL, Y: +d.MSFT } | |
| }); | |
| var xExtents = d3.extent(data, function (d) { return d.X; }); | |
| var yExtents = d3.extent(data, function (d) { return d.Y; }); | |
| var maxExtent = d3.max( | |
| xExtents.concat(yExtents), function (d) { return Math.abs(d); }); | |
| var graphWidth = 400, graphHeight = 400; | |
| var radius = 5; | |
| var margins = { left: 50, top: 50, right: 50, bottom: 50 }; | |
| var axisPadding = 3; | |
| var totalHeight = graphHeight + margins.top + margins.bottom; | |
| var totalWidth = graphWidth + margins.left + margins.right; | |
| var scale = d3.scaleLinear() | |
| .domain([-maxExtent, maxExtent]) | |
| .range([0, graphWidth]); | |
| var svg = d3.select('body') | |
| .append('svg') | |
| .attr('width', totalWidth) | |
| .attr('height', totalHeight); | |
| var yGridlinesAxis = d3.axisLeft(scale); | |
| var yGridlineNodes = svg.append('g') | |
| .attr('transform', 'translate(' + (margins.left + graphWidth) + ',' + margins.top + ')') | |
| .call(yGridlinesAxis.tickSize(graphWidth + axisPadding, 0, 0).tickFormat("")); | |
| styleGridlineNodes(yGridlineNodes); | |
| var xGridlinesAxis = d3.axisBottom(scale); | |
| var xGridlineNodes = svg.append('g') | |
| .attr('transform', 'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')') | |
| .call(xGridlinesAxis.tickSize(-graphWidth - axisPadding, 0, 0).tickFormat("")); | |
| styleGridlineNodes(xGridlineNodes); | |
| var xAxis = d3.axisBottom(scale); | |
| var yAxis = d3.axisLeft(scale); | |
| var yAxisNodes = svg.append('g') | |
| .attr('transform', 'translate(' + (margins.left - axisPadding) + ',' + margins.top + ')') | |
| .call(yAxis);//.attr("class", "x axis"); | |
| styleAxisNodes(yAxisNodes); | |
| var xAxisNodes = svg.append('g') | |
| .attr('transform', 'translate(' + margins.left + ',' + (totalHeight - margins.bottom + axisPadding) + ')') | |
| .call(xAxis); | |
| styleAxisNodes(xAxisNodes); | |
| var graphGroup = svg.append('g') | |
| .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')'); | |
| graphGroup.selectAll('circle') | |
| .data(data) | |
| .enter() | |
| .append('circle') | |
| .attrs({ | |
| cx: function (d) { return scale(d.X); }, | |
| cy: function (d) { return scale(d.Y); }, | |
| r: radius, | |
| fill: 'none', | |
| stroke: 'steelblue' | |
| }); | |
| }); | |
| function styleGridlineNodes(axisNodes) { | |
| axisNodes.selectAll('.domain') | |
| .attrs({ | |
| fill: 'none', | |
| stroke: 'none' | |
| }); | |
| axisNodes.selectAll('.tick line') | |
| .attrs({ | |
| fill: 'none', | |
| 'stroke-width': 1, | |
| stroke: 'lightgray' | |
| }); | |
| } | |
| function styleAxisNodes(axisNodes) { | |
| axisNodes.selectAll('.domain') | |
| .attrs({ | |
| fill: 'none', | |
| 'stroke-width': 1, | |
| stroke: 'black' | |
| }); | |
| axisNodes.selectAll('.tick line') | |
| .attrs({ | |
| fill: 'none', | |
| 'stroke-width': 1, | |
| stroke: 'black' | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment