tomshanley/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from tomshanley's block: fresh block

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    line {
      stroke: black;
      shape-rendering: crispEdges;
    }

    text {
      text-anchor: middle;
    }
  </style>
</head>
<div id='chart'></div>
	<form-group>
      <label for="from">From:</label>
      <input type="number" min="0" max="360" step="1" value="40" id="from">
      <label for="to">To:</label>
      <input type="number" min="0" max="360" step="1" value="50" id="to">
    	<button id="change-button" onclick="updateAxis()">Update</button>
  </form-group>
<body>
  <script>

    console.clear()

    let ticks1 = [ 1,  2,  3,  4,  5,  6,  7]

    let width = 500
    let margin = 50

    let fromInput = d3.select("#from");
    let toInput = d3.select("#to");

    let format = d3.format(",.0f")

    let xScale = d3.scaleLinear()
    	.domain(d3.extent(ticks1))
    	.range([0, width])

    let xAxis = d3.axisBottom(xScale)
    	.tickValues(ticks1)
    	.tickFormat(format)

    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin + margin)
      .attr("height", margin + margin)

    let axes = svg.append("g")
    	.attr("transform", "translate(" + margin + ", " + margin + ")")

    let domain = axes.append("line")
    	.attr("x1", 0)
    	.attr("x2", width)
    	.attr("y1", 0)
    	.attr("y2", 0)

    let xAxisG = axes.append("g")
    	.attr("transform", axisTranslate(ticks1))

    let ticks = xAxisG.selectAll(".tick")
    	.data(ticks1, d => d)
    	.enter()
    	.append("g")
    	.attr("class", "tick")
    	.attr("transform", tickTranslate)

    ticks.append("line")
    	.attr("x1", 0)
    	.attr("x2", 0)
    	.attr("y1", -15)
    	.attr("y2", -19)

    ticks.append("text")
    	.text(d => d)

    function updateAxis(){

      let currentTicks = ticks1

      let fromNumber = fromInput.property("value")
      let toNumber = toInput.property("value")

      if (fromNumber > toNumber) {
        let holder = toNumber
        toNumber = fromNumber
        fromNumber = holder
      }

      let newTicks = [fromNumber, toNumber]

      // increase the number of ticks
      let extentAllTicks = d3.extent(currentTicks.concat(newTicks))
      let intermediateTicks = d3.range(extentAllTicks[0], extentAllTicks[1] + 1)

      ticks = xAxisG.selectAll(".tick")
        .data(intermediateTicks, d => d)
      	.join("g")
        .attr("class", "tick")
        .attr("transform", tickTranslate)

      ticks.append("text")
    		.text(d => d)

      ticks.append("line")
        .attr("x1", 0)
        .attr("x2", 0)
        .attr("y1", -15)
        .attr("y2", -19)

     	xScale
        .domain(newTicks)
    		.range([0, width])

      ticks.transition()
      	.duration(5000)
      	.attr("transform", tickTranslate)

      ticks.selectAll('text, line')
        .transition()
      	.duration(7000)
      	.style("opacity", function(d){
					return (d >= newTicks[0] && d <= newTicks[1]) ? 1 : 0
        })

    }


    function tickTranslate(d){
      return "translate(" + xScale(d) + ", 15)"
    }

    function axisTranslate(data){
      return "translate(" + xScale(data[0]) + ",0)"
    }


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<style>
	line {
	stroke: black;
	shape-rendering: crispEdges;
	}

	text {
	text-anchor: middle;
	}
	</style>
	</head>
	<div id='chart'></div>
	<form-group>
	<label for="from">From:</label>
	<input type="number" min="0" max="360" step="1" value="40" id="from">
	<label for="to">To:</label>
	<input type="number" min="0" max="360" step="1" value="50" id="to">
	<button id="change-button" onclick="updateAxis()">Update</button>
	</form-group>
	<body>
	<script>

	console.clear()

	let ticks1 = [ 1, 2, 3, 4, 5, 6, 7]

	let width = 500
	let margin = 50

	let fromInput = d3.select("#from");
	let toInput = d3.select("#to");

	let format = d3.format(",.0f")

	let xScale = d3.scaleLinear()
	.domain(d3.extent(ticks1))
	.range([0, width])

	let xAxis = d3.axisBottom(xScale)
	.tickValues(ticks1)
	.tickFormat(format)

	var svg = d3.select("#chart").append("svg")
	.attr("width", width + margin + margin)
	.attr("height", margin + margin)

	let axes = svg.append("g")
	.attr("transform", "translate(" + margin + ", " + margin + ")")

	let domain = axes.append("line")
	.attr("x1", 0)
	.attr("x2", width)
	.attr("y1", 0)
	.attr("y2", 0)

	let xAxisG = axes.append("g")
	.attr("transform", axisTranslate(ticks1))

	let ticks = xAxisG.selectAll(".tick")
	.data(ticks1, d => d)
	.enter()
	.append("g")
	.attr("class", "tick")
	.attr("transform", tickTranslate)

	ticks.append("line")
	.attr("x1", 0)
	.attr("x2", 0)
	.attr("y1", -15)
	.attr("y2", -19)

	ticks.append("text")
	.text(d => d)

	function updateAxis(){

	let currentTicks = ticks1

	let fromNumber = fromInput.property("value")
	let toNumber = toInput.property("value")

	if (fromNumber > toNumber) {
	let holder = toNumber
	toNumber = fromNumber
	fromNumber = holder
	}

	let newTicks = [fromNumber, toNumber]

	// increase the number of ticks
	let extentAllTicks = d3.extent(currentTicks.concat(newTicks))
	let intermediateTicks = d3.range(extentAllTicks[0], extentAllTicks[1] + 1)

	ticks = xAxisG.selectAll(".tick")
	.data(intermediateTicks, d => d)
	.join("g")
	.attr("class", "tick")
	.attr("transform", tickTranslate)

	ticks.append("text")
	.text(d => d)

	ticks.append("line")
	.attr("x1", 0)
	.attr("x2", 0)
	.attr("y1", -15)
	.attr("y2", -19)

	xScale
	.domain(newTicks)
	.range([0, width])

	ticks.transition()
	.duration(5000)
	.attr("transform", tickTranslate)

	ticks.selectAll('text, line')
	.transition()
	.duration(7000)
	.style("opacity", function(d){
	return (d >= newTicks[0] && d <= newTicks[1]) ? 1 : 0
	})

	}


	function tickTranslate(d){
	return "translate(" + xScale(d) + ", 15)"
	}

	function axisTranslate(data){
	return "translate(" + xScale(data[0]) + ",0)"
	}



	</script>
	</body>