Skip to content

Instantly share code, notes, and snippets.

@mell0kat
Last active September 14, 2018 18:52
Show Gist options
  • Save mell0kat/3420ca693511e795866c938c83b63d1c to your computer and use it in GitHub Desktop.
Save mell0kat/3420ca693511e795866c938c83b63d1c to your computer and use it in GitHub Desktop.
fresh block
license: mit
id size name category date
1 15 A1 A 1533757808
2 15 A2 A 1520279408
3 15 A3 A 1524513008
4 15 A4 A 1543953008
5 15 A5 A 1522513008
11 25 A1 B 1524513008
12 25 A2 B 1520279408
13 25 A3 B 1533757808
14 25 A4 B 1543953008
15 25 B5 B 1522513008
21 35 A1 C 1520279408
22 35 A2 C 1524513008
23 35 A3 C 1522513008
24 35 A4 C 1543953008
25 35 C5 C 1533757808
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<button id="A">Category A</button>
<button id="B">Category B</button>
<button id="C">Category C</button>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
const filterAndDisplay = (data, filterByKey, xScale, yScale, radiusScale) => {
const filteredData = data.filter(item => item.key === filterByKey)[0].values
const circlesToUpdate = svg.selectAll('.circle_group')
.data(filteredData, d => d.name)
circlesToUpdate
.exit()
.transition()
.duration(1000)
.attr('cx', d => 0)
.attr('cy', d => 0)
.attr('r', d => radiusScale(d.size))
.remove()
const enteredCircles = circlesToUpdate
.enter()
.append('circle')
.attr('class', 'circle_group')
.attr('r', 2)
.attr('cx', d => xScale.range()[1])
.attr('cy', 0)
.transition()
.duration(500)
.delay((d, i) => i * 10)
.attr('cx', d => xScale(d.date))
.attr('cy', d => yScale(d.size))
.attr('r', d => radiusScale(d.size))
const updatingCircles = circlesToUpdate
.transition()
.duration(500)
.delay((d, i) => (i * 10 * 2))
.attr('cy', d => yScale(d.size))
.attr('r', d => radiusScale(d.size))
}
d3.csv('data_points.csv', function(data){
console.log('data', data)
var myData = d3.nest()
.key(d => d.category)
.entries(data)
const xScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.date))
.range([100,960])
const yScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.size))
.range([400,100])
const radiusScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.size))
.range([10, 20])
filterAndDisplay(myData, "A", xScale, yScale, radiusScale)
d3.selectAll('button')
.on('click', function(){
const filter = d3.select(this).attr('id')
svg.append('text').text(filter)
filterAndDisplay(myData, filter, xScale, yScale, radiusScale)
})
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment