mell0kat/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## data_points.csv

          
            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

## index.html
<!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>
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>