Skip to content

Instantly share code, notes, and snippets.

@annabsmylie
Last active March 13, 2016 21:31
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save annabsmylie/a28851faa08bd932d7ef to your computer and use it in GitHub Desktop.
police violence example
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
// // Feel free to change or delete any of the code you see!
// var svg = d3. select("body").append("svg")
// svg.append("rect")
// .attr({x: 29, y:10, width: 700, height: 480})
// .style({fill: "#a72d1a"})
// svg.append("circle")
// .attr({cx: 145, cy: 136, r: 50})
// .transition().duration(3000).ease("bounce")
// .style({ fill: "#5db9e3"})
// console.log("you are now rocking with d3", d3);
var svg = d3. select("body").append("svg")
//load data
var url = "https://numeracy.co/projects/382368K6Bkx/data?format=csv";
d3.csv(url)
.getfunction(err, data)
{
console.log("data:", data)
//process the data to set domain
//passing in function, get callback
var counted = [];
data.forEach(function(d) {
if(d.age !== "Unknown") {
counted.push(d)
//convert strings into numbers to do math operations
}
})
var maxAge = d3.max(counted, function(d){
return d.age
})
console.log("max age:", maxAge)
var yscale = d3.scale.liner()
.domain([0, maxAge])
//flip values to correct direction of y axis
.range([400, 10])
var dateExtent = d3.extent(counted, function(d {
return d. date
}))
var xscale = d3.time.scale()
.domain(dateExtent)
.
//making elements
var circles = svg.selectAll("circle")
.data(counted)
circles.enter()
.append("circle")
.attr({
cx: function(d,i) {
// console.log("data:", data)
// console.log(i,d)
return xscale(d.date)
},
cy: function(d,i) {
return yscale(d.age)
},
r: 10
})
.on("click", function(d,i) {
console.log("clicked", d.age, yscale(d, ))
})
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment