noblemillie/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:1%;
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      left:0;
      font-family: monospace;
    }
    svg {
      border: 1px solid pink;
      margin: 0px;
      background: lightblue;
      border: 1px dashed cornflowerblue;
      height: 90%;
      width: 96%;
    }
    div {

    }

    #cardContainer {
      border: 1px solid blue;
      color: blue;
      display: flex;
      flex-direction: column;
      margin: 2%;
      font-size: 20px;
      padding: 2px;
      background: lightgray;
      max-width: 70%;
      max-height: 100%;
      width: 100%;
      padding-right: 55px;
      padding-left: 5px;
      margin-right: auto;
      margin-left: auto;
    }
    .sliderContainer {
      font-size: 10px;
      display: inline-flex;
      flex-direction: row;
    }
    .compType {
      border: 1px dotted red;
      margin-bottom: 1%;
      color: red;
      width: 100%;
      background: pink;
      padding: 2%;
    }
    .compSlider {
      border: 1px dotted purple;
      margin-bottom: 1%;
      color: red;
      width: 90%;
      background: lavender;
      padding: 4%;
    }
     .svgText {
      background: none;
      padding: 0px;
      font-size: 26px;
      font-family: monospace;
    }
    .axis {
     padding: 0px;
     font-size: 26px;
     font-family: monospace;
   }
  </style>
</head>

<body>
  <div class="control-group">
    <button onclick="renderLinear(d3.axisBottom, min, max)">
        render linear scale range
    </button>
    <button onclick="renderPow(d3.axisBottom, min, max)">
        render power scale range
    </button>
  </div>

  <div id="cardContainer">cardContainer</div>


<script>
let holder = d3.select("#cardContainer")
holder.append("div")
.attr("class", "compType")
.text("compTon")

holder.append("div")
      .attr("class", "compSlider")

let slider = holder.selectAll(".compSlider")


// ****** create range slider ******

let min = 0,
  max = 100;


let height = 200,
    width = 500,
    margin = 70,
    offset = 40,
    axisWidth = width - 2 * margin;

let svg = slider.append("svg")

    svg.append("g")
    	.attr("class", "svgText")
	    .append("text")
      .text("svg holder")
      .attr("y", 30)
      .attr("x", 150)

function createSvg(){
    // holder.append("div")
    //     .attr("class", "compSlider")

     svg = slider.append("svg")

     svg.append("g")
      .attr("class", "svgText")
      .append("text")
       .text("svg holder")
       .attr("y", 30)
       .attr("x", 20)
    .append("g")
        .attr("class", "axis")
        .attr("width", width)
        .attr("height", height);

}

    slider.append("input")
    .attr("id", "baseDriverMin")
    .attr("type", "number")

  slider.append("div")
    .attr("class", "sliderContainer")
    .text("svg slider container")

  slider.append("input")
    .attr("id", "baseDriverMax")
    .attr("type", "number")

function renderAxis(fn, scale, i){
    var axis = fn()
        .scale(scale)
        .ticks(5);

    svg.append("g")
        .attr("transform", function(){
                return "translate(" + offset + ", " +
                                          margin + ")";
        })
        .call(axis);
}


function renderLinear(fn, min, max){
    if(svg) svg.remove();

    createSvg();

    renderAxis(fn, d3.scaleLinear()
                .domain([min, max])
                .range([0, axisWidth]), 1);
}
function renderPow(fn, min, max){
    if(svg) svg.remove();

    createSvg();

    renderAxis(fn, d3.scalePow()
                .exponent(2)
                .domain([min, max])
                .range([0, axisWidth]), 2);
}


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body {
	margin:1%;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	font-family: monospace;
	}
	svg {
	border: 1px solid pink;
	margin: 0px;
	background: lightblue;
	border: 1px dashed cornflowerblue;
	height: 90%;
	width: 96%;
	}
	div {

	}

	#cardContainer {
	border: 1px solid blue;
	color: blue;
	display: flex;
	flex-direction: column;
	margin: 2%;
	font-size: 20px;
	padding: 2px;
	background: lightgray;
	max-width: 70%;
	max-height: 100%;
	width: 100%;
	padding-right: 55px;
	padding-left: 5px;
	margin-right: auto;
	margin-left: auto;
	}
	.sliderContainer {
	font-size: 10px;
	display: inline-flex;
	flex-direction: row;
	}
	.compType {
	border: 1px dotted red;
	margin-bottom: 1%;
	color: red;
	width: 100%;
	background: pink;
	padding: 2%;
	}
	.compSlider {
	border: 1px dotted purple;
	margin-bottom: 1%;
	color: red;
	width: 90%;
	background: lavender;
	padding: 4%;
	}
	.svgText {
	background: none;
	padding: 0px;
	font-size: 26px;
	font-family: monospace;
	}
	.axis {
	padding: 0px;
	font-size: 26px;
	font-family: monospace;
	}
	</style>
	</head>

	<body>
	<div class="control-group">
	<button onclick="renderLinear(d3.axisBottom, min, max)">
	render linear scale range
	</button>
	<button onclick="renderPow(d3.axisBottom, min, max)">
	render power scale range
	</button>
	</div>

	<div id="cardContainer">cardContainer</div>


	<script>
	let holder = d3.select("#cardContainer")
	holder.append("div")
	.attr("class", "compType")
	.text("compTon")

	holder.append("div")
	.attr("class", "compSlider")

	let slider = holder.selectAll(".compSlider")




	// **** create range slider ****

	let min = 0,
	max = 100;


	let height = 200,
	width = 500,
	margin = 70,
	offset = 40,
	axisWidth = width - 2 * margin;

	let svg = slider.append("svg")

	svg.append("g")
	.attr("class", "svgText")
	.append("text")
	.text("svg holder")
	.attr("y", 30)
	.attr("x", 150)

	function createSvg(){
	// holder.append("div")
	// .attr("class", "compSlider")

	svg = slider.append("svg")

	svg.append("g")
	.attr("class", "svgText")
	.append("text")
	.text("svg holder")
	.attr("y", 30)
	.attr("x", 20)
	.append("g")
	.attr("class", "axis")
	.attr("width", width)
	.attr("height", height);

	}

	slider.append("input")
	.attr("id", "baseDriverMin")
	.attr("type", "number")

	slider.append("div")
	.attr("class", "sliderContainer")
	.text("svg slider container")

	slider.append("input")
	.attr("id", "baseDriverMax")
	.attr("type", "number")

	function renderAxis(fn, scale, i){
	var axis = fn()
	.scale(scale)
	.ticks(5);

	svg.append("g")
	.attr("transform", function(){
	return "translate(" + offset + ", " +
	margin + ")";
	})
	.call(axis);
	}


	function renderLinear(fn, min, max){
	if(svg) svg.remove();

	createSvg();

	renderAxis(fn, d3.scaleLinear()
	.domain([min, max])
	.range([0, axisWidth]), 1);
	}
	function renderPow(fn, min, max){
	if(svg) svg.remove();

	createSvg();

	renderAxis(fn, d3.scalePow()
	.exponent(2)
	.domain([min, max])
	.range([0, axisWidth]), 2);
	}


	</script>
	</body>