ProQuestionAsker/.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.v5.min.js"></script>
  <link rel="stylesheet" href="pocket.css">
</head>

<body>

  <figure class='pocket'>
    <svg class='pocket__svg'></svg>
	</figure>

  <script src="pocket.js"></script>
</body>

## pocket.css
.pocket__svg{
    width: 350px;
    height: 300px;
}

## pocket.js
// select your svg
const svg = d3.select('.pocket__svg');

const context = d3.path();


// define your data (alternatively, this could be
// imported from csv or json)
const data = {
  maxHeight: 14.5,
  minHeight: 14,
  rivetHeight: 6.5,
  maxWidth: 16.5,
  minWidth: 13,
};

// define any dimensions
const height = 300; // height of the svg

// define a scale to adjust our actual
// pocket measurements to pixels
const scale = d3
  .scaleLinear()
  .domain([0, 16.5])
  .range([0, height]);

// write a function that will EVENTUALLY
// create a pocket shape
function drawShape(d) {

  context.moveTo(0, 0);
  // straight line down to max height
  context.lineTo(0, scale(d.maxHeight));
  eventual curve
  context.lineTo(scale(d.maxWidth), scale(d.minHeight));
//   context.quadraticCurveTo(
//     scale(d.maxWidth / 2),
//     scale(d.maxHeight + 2),
//     scale(d.maxWidth),
//     scale(d.minHeight)
//   );
//   // straight line up
//   context.lineTo(scale(d.maxWidth), scale(d.minHeight - d.rivetHeight));
//   context.quadraticCurveTo(
//     scale((d.maxWidth - d.minWidth) * 1.5),
//     scale(d.rivetHeight),
//     scale(d.maxWidth - d.minWidth),
//     0
//   );
//   context.closePath();

  return context.toString();
}

// write a function that will run to create your shape
function setup() {

  svg
    // follow d3's enter/update/exit pattern
    .selectAll('.path__pocket')
    .data([data]) // use our data
    .join(enter =>
      // using d3.v5's .join
    		enter
        // append a path element to your SVG
        .append('path')
        // give that path element a class
        .attr('class', 'path__pocket')
        // generate 'd' (path shape) using drawShape()
        .attr('d', d => drawShape(d))
    );
}

// run the setup function
setup();
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<link rel="stylesheet" href="pocket.css">
	</head>

	<body>

	<figure class='pocket'>
	<svg class='pocket__svg'></svg>
	</figure>

	<script src="pocket.js"></script>
	</body>
	// select your svg
	const svg = d3.select('.pocket__svg');

	const context = d3.path();


	// define your data (alternatively, this could be
	// imported from csv or json)
	const data = {
	maxHeight: 14.5,
	minHeight: 14,
	rivetHeight: 6.5,
	maxWidth: 16.5,
	minWidth: 13,
	};

	// define any dimensions
	const height = 300; // height of the svg

	// define a scale to adjust our actual
	// pocket measurements to pixels
	const scale = d3
	.scaleLinear()
	.domain([0, 16.5])
	.range([0, height]);

	// write a function that will EVENTUALLY
	// create a pocket shape
	function drawShape(d) {

	context.moveTo(0, 0);
	// straight line down to max height
	context.lineTo(0, scale(d.maxHeight));
	eventual curve
	context.lineTo(scale(d.maxWidth), scale(d.minHeight));
	// context.quadraticCurveTo(
	// scale(d.maxWidth / 2),
	// scale(d.maxHeight + 2),
	// scale(d.maxWidth),
	// scale(d.minHeight)
	// );
	// // straight line up
	// context.lineTo(scale(d.maxWidth), scale(d.minHeight - d.rivetHeight));
	// context.quadraticCurveTo(
	// scale((d.maxWidth - d.minWidth) * 1.5),
	// scale(d.rivetHeight),
	// scale(d.maxWidth - d.minWidth),
	// 0
	// );
	// context.closePath();

	return context.toString();
	}

	// write a function that will run to create your shape
	function setup() {

	svg
	// follow d3's enter/update/exit pattern
	.selectAll('.path__pocket')
	.data([data]) // use our data
	.join(enter =>
	// using d3.v5's .join
	enter
	// append a path element to your SVG
	.append('path')
	// give that path element a class
	.attr('class', 'path__pocket')
	// generate 'd' (path shape) using drawShape()
	.attr('d', d => drawShape(d))
	);
	}

	// run the setup function
	setup();