JoseJuan81/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## alphabet.csv

          
            letter
            frequency

            
              A
              0.08167

            
              B
              0.01492

            
              C
              0.02782

            
              D
              0.04253

            
              E
              0.12702

            
              F
              0.02288

            
              G
              0.02015

            
              H
              0.06094

            
              I
              0.06966

            
              J
              0.00153

            
              K
              0.00772

            
              L
              0.04025

            
              M
              0.02406

            
              N
              0.06749

            
              O
              0.07507

            
              P
              0.01929

            
              Q
              0.00095

            
              R
              0.05987

            
              S
              0.06327

            
              T
              0.09056

            
              U
              0.02758

            
              V
              0.00978

            
              W
              0.0236

            
              X
              0.0015

            
              Y
              0.01974

            
              Z
              0.00074

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-color.v1.min.js"></script>
  <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <svg></svg>
  <script>
const width = 768;
const height = 300;
const barHeight = 40;
const margin = { top: 30, right: 20, bottom: 20, left: 20 };

const data = [
  { area: 'Sistema de control', percentage: 4, average: 15 },
  { area: 'Control de Calidad', percentage: 24 },
  { area: 'Control de la Información', percentage: 50 },
  { area: 'Sistema de Gestión', percentage: 11 },
  { area: 'Mantenimiento', percentage: 63 },
];
const axisTopValues = [0, 25, 50, 75, 100]

const xScale = d3.scaleBand()
	.domain(axisTopValues)
	.range([margin.left, width - margin.right]);
xScale.paddingInner(1);
const dx = xScale.step() * xScale.paddingInner();

const yScale = d3.scaleBand()
	.domain(data.map((d, i) => i).reverse())
	.range([height - margin.bottom, margin.top])
	.paddingInner(0);

const svg = d3.select('svg')
	.attr('width', width)
	.attr('height', height);

const bar = svg.append('g')
	.selectAll('rect')
	.data(data)
	.enter().append('rect')
	.attr('width', function (d) {
    const parsePercentage = d.percentage / 100;
    const avaliableWidth = width - margin.left - margin.right;
    return parsePercentage * avaliableWidth;
  })
	.attr('height', yScale.step())
	.attr('fill', (d, i) => d3.schemeDark2[i])
	.attr('stroke', 'white')
	.attr('stroke-width', 2)
	.attr('opacity', 1)
	.attr('x', margin.left)
	.attr('y', (d, i) => (i * yScale.step()) + margin.top + 2);

const xAxisTop = d3.axisTop()
      	.scale(xScale);
svg.append('g')
	.attr('transform', 'translate(' + [0, margin.top] + ')')
	.call(xAxisTop);

const verticalTick = svg.append('g')
	.selectAll('line')
	.data(Array(axisTopValues.length))
	.enter().append('line')
	.attr('x1', (d, i) => xScale(axisTopValues[i]))
	.attr('x2', (d, i) => xScale(axisTopValues[i]))
	.attr('y1', margin.top)
	.attr('y2', height - margin.bottom)
	.attr('stroke', 'white')
	.attr('stroke-width', 2);

let label = svg.append("g")
	.style("font", "bold 12px var(--sans-serif)")
	.style("font-variant-numeric", "tabular-nums")
// 	.attr("text-anchor", "end")
	.selectAll("text")
	.data(data, d => d.area)
	.enter().append('text')
	.attr('x', margin.left + 10)
	.attr('y', (d, i) => (i * (yScale.step())) + margin.top + yScale.step() / 2)
	.text(d => d.area + ':' + d.percentage + '%');

  </script>
</body>
	letter	frequency
	A	0.08167
	B	0.01492
	C	0.02782
	D	0.04253
	E	0.12702
	F	0.02288
	G	0.02015
	H	0.06094
	I	0.06966
	J	0.00153
	K	0.00772
	L	0.04025
	M	0.02406
	N	0.06749
	O	0.07507
	P	0.01929
	Q	0.00095
	R	0.05987
	S	0.06327
	T	0.09056
	U	0.02758
	V	0.00978
	W	0.0236
	X	0.0015
	Y	0.01974
	Z	0.00074
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-color.v1.min.js"></script>
	<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<svg></svg>
	<script>
	const width = 768;
	const height = 300;
	const barHeight = 40;
	const margin = { top: 30, right: 20, bottom: 20, left: 20 };

	const data = [
	{ area: 'Sistema de control', percentage: 4, average: 15 },
	{ area: 'Control de Calidad', percentage: 24 },
	{ area: 'Control de la Información', percentage: 50 },
	{ area: 'Sistema de Gestión', percentage: 11 },
	{ area: 'Mantenimiento', percentage: 63 },
	];
	const axisTopValues = [0, 25, 50, 75, 100]

	const xScale = d3.scaleBand()
	.domain(axisTopValues)
	.range([margin.left, width - margin.right]);
	xScale.paddingInner(1);
	const dx = xScale.step() * xScale.paddingInner();

	const yScale = d3.scaleBand()
	.domain(data.map((d, i) => i).reverse())
	.range([height - margin.bottom, margin.top])
	.paddingInner(0);

	const svg = d3.select('svg')
	.attr('width', width)
	.attr('height', height);

	const bar = svg.append('g')
	.selectAll('rect')
	.data(data)
	.enter().append('rect')
	.attr('width', function (d) {
	const parsePercentage = d.percentage / 100;
	const avaliableWidth = width - margin.left - margin.right;
	return parsePercentage * avaliableWidth;
	})
	.attr('height', yScale.step())
	.attr('fill', (d, i) => d3.schemeDark2[i])
	.attr('stroke', 'white')
	.attr('stroke-width', 2)
	.attr('opacity', 1)
	.attr('x', margin.left)
	.attr('y', (d, i) => (i * yScale.step()) + margin.top + 2);

	const xAxisTop = d3.axisTop()
	.scale(xScale);
	svg.append('g')
	.attr('transform', 'translate(' + [0, margin.top] + ')')
	.call(xAxisTop);

	const verticalTick = svg.append('g')
	.selectAll('line')
	.data(Array(axisTopValues.length))
	.enter().append('line')
	.attr('x1', (d, i) => xScale(axisTopValues[i]))
	.attr('x2', (d, i) => xScale(axisTopValues[i]))
	.attr('y1', margin.top)
	.attr('y2', height - margin.bottom)
	.attr('stroke', 'white')
	.attr('stroke-width', 2);

	let label = svg.append("g")
	.style("font", "bold 12px var(--sans-serif)")
	.style("font-variant-numeric", "tabular-nums")
	// .attr("text-anchor", "end")
	.selectAll("text")
	.data(data, d => d.area)
	.enter().append('text')
	.attr('x', margin.left + 10)
	.attr('y', (d, i) => (i * (yScale.step())) + margin.top + yScale.step() / 2)
	.text(d => d.area + ':' + d.percentage + '%');

	</script>
	</body>