| license: mit |
Built with blockbuilder.org
forked from molliemarie's block: FirstScatterPlot_UFOSightings_Starter
forked from molliemarie's block: FirstScatterPlot_UFOSightings_steps1
forked from molliemarie's block: FirstScatterPlot_UFOSightings_steps2
forked from molliemarie's block: FirstScatterPlot_UFOSightings_steps2
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style type="text/css"> | |
| svg { | |
| border:1px solid #f0f; | |
| } | |
| /*NEW CSS GOES HERE*/ | |
| </style> | |
| <body> | |
| </body> | |
| <script> | |
| const data = [ | |
| {"date": "12/2018", "count": 233}, | |
| {"date": "11/2018", "count": 228}, | |
| {"date": "10/2018", "count": 262}, | |
| {"date": "09/2018", "count": 293}, | |
| {"date": "08/2018", "count": 350}, | |
| {"date": "07/2018", "count": 400}, | |
| {"date": "06/2018", "count": 225}, | |
| {"date": "05/2018", "count": 243}, | |
| {"date": "04/2018", "count": 221}, | |
| {"date": "03/2018", "count": 235}, | |
| {"date": "02/2018", "count": 235}, | |
| {"date": "01/2018", "count": 311} | |
| ]; | |
| console.log(data) | |
| // Look at the data in the console! | |
| data.forEach(function(d) { | |
| d.count = +d.count; | |
| d.month = d.date.split('/')[0]; | |
| }); | |
| const width = 720; | |
| const height = 400; | |
| const xScale = d3.scaleLinear() | |
| .domain([1,12]) | |
| .range([0 , width]) //scope of data going out / pixels | |
| const yScale = d3.scaleLinear() | |
| // .domain(d3.extent(startData, function(d) { return d.count })) | |
| .domain([200, 1100]) | |
| // .range([0, height]) | |
| .range([0, height]) | |
| const svg = d3.select("body").append("svg") //grabs body and appends an svg | |
| .attr("width", width) | |
| .attr("height", height); | |
| const circle = svg.selectAll('.ufoCircle') | |
| .data(data) | |
| .enter().append('circle') | |
| .attr('class', 'ufoCircle') | |
| .attr('r', 10) | |
| .attr("cx", function(d) { return xScale(d.month); }) | |
| .attr("cy", function(d) { return yScale(d.count); }); | |
| const text = svg.selectAll("text") | |
| .data(data) | |
| .enter().append("text") | |
| .attr("x", function(d) { return xScale(d.month); }) | |
| .attr("y", function(d) { return yScale(d.count); }) | |
| .text( function (d) { return d.count; }) | |
| .attr('dx', 10) //moves text 10px (right) on the x axis | |
| .attr('dy', -10); //moves text -10px (up) on the y axis. These help move the text so it's not overlapping with the circles | |
| </script> |