jwilber/.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://cdn.rawgit.com/pshihn/rough/master/dist/rough.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {background-color: 'red';}
  </style>
</head>

<body>
  <script>
    let n = 10;
    let margin = {top: 25, bottom: 25, left:55, right:25}
    let width = 960 - margin.left - margin.right;
    let height = 500 - margin.top - margin.bottom;

    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
    	.append('g')
    	.attr('id', 'new')
    	.attr('transform', `translate(${margin.left}, ${margin.top})`)

    let xScale = d3.scaleLinear()
    	.domain([0, n-1])
    	.range([0, width]);

    let yScale = d3.scaleLinear()
    	.domain([0, 1])
    	.range([height, 0])

    var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

    svg.append('g')
    	.attr('class', 'x-axis')
    	.attr('transform', `translate(0, ${height})`)
    	.call(d3.axisBottom(xScale))

    svg.append('g')
    	.attr('class', 'y-axis')
    	.call(d3.axisLeft(yScale))

    let line = d3.line()
    	.x((d,i) => xScale(i))
    	.y(d => yScale(d.y))

    const roughSvg = document.getElementById('new');

    const rc = rough.svg(roughSvg)
//     , {
//       options: {
//       fill: color,
//       stroke: color,
//       strokeWidth: 1,
//       roughness: 1.4,
//       bowing: 1,
//       fillStyle: 'cross-hatch'
//       }
//     });

    console.log('dataset', dataset)
    var pix = 50;
   var max = d3.max(dataset, d => d.y);
    console.log('max', max)
   var scale = d3.scaleLinear().domain([0, max]).range([100,10])

    var points = dataset.map((d,i)=>{
    return [xScale(i), yScale(d.y)]
   })
    console.log('points', points)

    svg.append('path')
    	.datum(dataset)
    	.attr('class', 'line')
    	.attr('d', line)
    	.style('fill', 'none')
    	.style('stroke', 'coral')
    	.style('stroke-width', 0)

    let node = rc.curve(points,{
    stroke:'green',
    strokeWidth: 4,
      roughness: 4,
      bowing: 1
  })
    roughSvg.appendChild(node)


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdn.rawgit.com/pshihn/rough/master/dist/rough.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg {background-color: 'red';}
	</style>
	</head>

	<body>
	<script>
	let n = 10;
	let margin = {top: 25, bottom: 25, left:55, right:25}
	let width = 960 - margin.left - margin.right;
	let height = 500 - margin.top - margin.bottom;

	// Feel free to change or delete any of the code you see in this editor!
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.right + margin.left)
	.attr("height", height + margin.top + margin.bottom)
	.append('g')
	.attr('id', 'new')
	.attr('transform', `translate(${margin.left}, ${margin.top})`)

	let xScale = d3.scaleLinear()
	.domain([0, n-1])
	.range([0, width]);

	let yScale = d3.scaleLinear()
	.domain([0, 1])
	.range([height, 0])

	var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })

	svg.append('g')
	.attr('class', 'x-axis')
	.attr('transform', `translate(0, ${height})`)
	.call(d3.axisBottom(xScale))

	svg.append('g')
	.attr('class', 'y-axis')
	.call(d3.axisLeft(yScale))

	let line = d3.line()
	.x((d,i) => xScale(i))
	.y(d => yScale(d.y))

	const roughSvg = document.getElementById('new');

	const rc = rough.svg(roughSvg)
	// , {
	// options: {
	// fill: color,
	// stroke: color,
	// strokeWidth: 1,
	// roughness: 1.4,
	// bowing: 1,
	// fillStyle: 'cross-hatch'
	// }
	// });

	console.log('dataset', dataset)
	var pix = 50;
	var max = d3.max(dataset, d => d.y);
	console.log('max', max)
	var scale = d3.scaleLinear().domain([0, max]).range([100,10])

	var points = dataset.map((d,i)=>{
	return [xScale(i), yScale(d.y)]
	})
	console.log('points', points)

	svg.append('path')
	.datum(dataset)
	.attr('class', 'line')
	.attr('d', line)
	.style('fill', 'none')
	.style('stroke', 'coral')
	.style('stroke-width', 0)

	let node = rc.curve(points,{
	stroke:'green',
	strokeWidth: 4,
	roughness: 4,
	bowing: 1
	})
	roughSvg.appendChild(node)





	</script>
	</body>