Built with blockbuilder.org
Last active
January 27, 2020 22:11
-
-
Save molliemarie/707286c35b44a3896db349781664fb2a to your computer and use it in GitHub Desktop.
FirstScatterComplete
This file contains 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
license: mit |
This file contains 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> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v5.min.js"></script> | |
<style type="text/css"> | |
svg { | |
border:1px solid #f0f; | |
} | |
.axis line { | |
stroke-width:1px; | |
stroke: #ccc; | |
stroke-dasharray: 2px 2px; | |
} | |
.axis text { | |
font-size: 12px; | |
fill: #777; | |
} | |
.axis path { | |
display: none; | |
} | |
.ufoGroup text { | |
fill: #aaa; /*grey out text*/ | |
font-size: 11px; | |
} | |
.ufoCircle { | |
fill: limegreen; | |
} | |
</style> | |
<body> | |
<div id='titleDiv'> | |
<text>UFO Sightings in 2018</text> | |
</div> | |
</body> | |
<script> | |
//***** defining variables ***** | |
const parseTime = d3.timeParse("%m/%Y"); | |
const margin = {top: 20, right: 30, bottom: 20, left: 30}; | |
const outerWidth = 700; | |
const outerHeight = 300; | |
const innerWidth = outerWidth - margin.left - margin.right | |
const innerHeight = outerHeight - margin.top - margin.bottom | |
//***** Defining svgs ***** | |
const SVG = d3.select("body").append("svg") | |
.attr("width", outerWidth) | |
.attr("height", outerHeight); | |
const svg = SVG.append('g') | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
//***** Defining scales and axes ***** | |
const xScale = d3.scaleTime() | |
.range([0, innerWidth]); | |
const xAxis = d3.axisBottom(xScale) | |
.tickSize(-innerHeight); | |
const yScale = d3.scaleLinear() | |
.range([innerHeight, 0]) | |
const yAxis = d3.axisLeft(yScale) | |
.tickSize(-innerWidth); | |
//***** reading in data ***** | |
d3.csv("https://raw.githubusercontent.com/molliemarie/MSIA-D3Course-2019/master/Projects%26Exercises/FirstCompleteScatter/data/ufo.csv", function(d) { | |
return { | |
date: d.date, | |
count: +d.count, | |
month: +d.date.split('/')[0], | |
parsedDate: parseTime(d.date), | |
year: parseTime(d.date).getYear() + 1900 | |
}; | |
}).then(ready); | |
//***** once data is ready, pass into ready function ***** | |
function ready(fullData) { | |
//***** filtering to get startData ***** | |
const startData = fullData.filter(function(d) { return d.year == 2018; }) | |
console.log(startData) | |
//***** updating scales with data ***** | |
xScale.domain(d3.extent(startData, function(d) { return d.parsedDate; })) | |
yScale.domain([0, d3.max(startData, function(d) { return d.count})]) | |
//***** defining ufoGroup ***** | |
const ufoGroup = svg.selectAll('.ufoGroup') | |
.data(startData).enter().append('g') | |
.attr('class', 'ufoGroup') | |
.attr('transform', function(d) { return 'translate(' + xScale(d.parsedDate) + ',' + yScale(d.count) + ')'}) | |
//***** Create axis groups ***** | |
const xAxisGroup = svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + innerHeight + ")") | |
.call(xAxis); | |
const yAxisGroup = svg.append("g") | |
.attr("class", "y axis") //gives group the classes 'y' and 'axis' | |
.call(yAxis); | |
//***** appending circles ***** | |
ufoGroup.append('circle') | |
.attr('class', 'ufoCircle') | |
.attr('r', 10) | |
//***** appending text ***** | |
ufoGroup.append('text') | |
.attr('class', 'ufoText') | |
.attr('dx', 10) | |
.attr('dy', -10) | |
.text(function(d) { return d.count}) | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment