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 = 200;

// 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")

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

const text = svg.selectAll('text')
	.data(pieDataParsed)
	.enter().append('text')
	.attr('transform', d => 'translate(' + arcPie.centroid(d) + ')')
	.text(d => d.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 = 200;

	// 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")

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

	const text = svg.selectAll('text')
	.data(pieDataParsed)
	.enter().append('text')
	.attr('transform', d => 'translate(' + arcPie.centroid(d) + ')')
	.text(d => d.value)


	</script>
	</body>