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
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
<!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> |