molliemarie/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from molliemarie's block: FirstScatterPlot_UFOSightings_Starter

  
## index.html
<!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 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 d.month; })
  .attr("cy", function(d) { return d.count; });


</script>
	<!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 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 d.month; })
	.attr("cy", function(d) { return d.count; });


	</script>