JoseJuan81/.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 { align-items: center; display: flex; justify-content: flex-start; margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { height: 400px;width: 400px}
  </style>
</head>

<body>
  <svg></svg>
  <script>
    const height = 400;
    const width = 400;
    const innerRadius = 170;

// datos
const fruits = [
  {name: "🍊", count: 21},
  {name: "🍇", count: 13},
  {name: "🍏", count: 8},
  {name: "🍌", count: 5},
  {name: "🍐", count: 3},
  {name: "🍋", count: 12},
  {name: "🍎", count: 10},
  {name: "🍉", count: 7}
]

// formateo de datos para la dona
const pieDataParsed = d3.pie().value(d => d.count)(fruits);
console.log(pieDataParsed)
// estilos de la dona
const arcPie = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius(height / 3 * 2 )
    .padRadius(400)
    .padAngle(4 / 300)
    .cornerRadius(8);

const svg = d3.select('svg')
	.attr('viewBox', "-320 -320 640 640")

// Dona
const path = svg.selectAll('path')
	.data(pieDataParsed)
	.enter().append('path')
	.attr('d', d => arcPie(d))
	.attr('fill', "steelblue")

// texto dentro de Dona
pieDataParsed.map(p => {
	const text = svg.append('text')
  	.attr('transform', 'translate(' + arcPie.centroid(p) + ')');

  const img = text.append('tspan').text(p.data.name);
  const count = text.append('tspan')
  	.attr('font-size', '18')
  	.attr('font-family', 'verdana')
  	.attr('font-weight', '400')
  	.attr('dy', '1.2rem')
    .attr('dx', '-1.2rem')
  	.attr('fill', 'white')
  	.text(p.value);
})


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { align-items: center; display: flex; justify-content: flex-start; margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { height: 400px;width: 400px}
	</style>
	</head>

	<body>
	<svg></svg>
	<script>
	const height = 400;
	const width = 400;
	const innerRadius = 170;

	// datos
	const fruits = [
	{name: "🍊", count: 21},
	{name: "🍇", count: 13},
	{name: "🍏", count: 8},
	{name: "🍌", count: 5},
	{name: "🍐", count: 3},
	{name: "🍋", count: 12},
	{name: "🍎", count: 10},
	{name: "🍉", count: 7}
	]

	// formateo de datos para la dona
	const pieDataParsed = d3.pie().value(d => d.count)(fruits);
	console.log(pieDataParsed)
	// estilos de la dona
	const arcPie = d3.arc()
	.innerRadius(innerRadius)
	.outerRadius(height / 3 * 2 )
	.padRadius(400)
	.padAngle(4 / 300)
	.cornerRadius(8);

	const svg = d3.select('svg')
	.attr('viewBox', "-320 -320 640 640")

	// Dona
	const path = svg.selectAll('path')
	.data(pieDataParsed)
	.enter().append('path')
	.attr('d', d => arcPie(d))
	.attr('fill', "steelblue")

	// texto dentro de Dona
	pieDataParsed.map(p => {
	const text = svg.append('text')
	.attr('transform', 'translate(' + arcPie.centroid(p) + ')');

	const img = text.append('tspan').text(p.data.name);
	const count = text.append('tspan')
	.attr('font-size', '18')
	.attr('font-family', 'verdana')
	.attr('font-weight', '400')
	.attr('dy', '1.2rem')
	.attr('dx', '-1.2rem')
	.attr('fill', 'white')
	.text(p.value);
	})


	</script>
	</body>