alteist/.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 { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    var radius = 120
    var circleRadius = 2
    var circleCount = 100

    function toRadians (angle) {
  		return angle * (Math.PI / 180);
		}
    var data = [["Мужчины",101231140],["Женщины",73243240]]

    var svg = d3.select("body").append("svg")
      .attr("width", 350)
      .attr("height", 500)
    var center = [205,205]

    var sum = data.reduce((acc,cur)=>(acc+cur[1]),0)
//     data = data.map((d)=>((d.concat(Math.round(d[1]/sum*100)))))
    data = data.map((d)=>((d.concat(d[1]/sum))))
    console.log(data)

    var angleStep = 360/circleCount
    var circles = []
    var color = d3.scaleThreshold()
    	.domain(data
              .map((d)=>(Math.round(d[2]*100)))
 							.reduce((acc, cur, i, arr) => {
								arr[i]=Math.round(arr[i]+arr[i-1])
 								return arr })
             )
    	.range(["blue","red","green"])
//     console.log(color.domain())
    d3.range(0,circleCount).forEach((d,i)=>{
      var angleRad = toRadians(i*angleStep-90)
      svg.append("circle")
    		.attr("cx",radius*Math.cos(angleRad)+center[0])
    		.attr("cy",radius*Math.sin(angleRad)+center[1])
   			.attr("r",()=>(color.domain().includes(i+1) ? circleRadius*2:circleRadius))
        .style("fill", color(i));
    })
    svg.append("circle")
    		.attr("cx",center[0])
    		.attr("cy",center[1])
   			.attr("r",radius*.85)
    		.attr("fill","transparent")
    		.attr("stroke","grey")

    svg.append("text")
      .text("ДЕМОГРАФИЯ")
      .attr("x", 0)
      .attr("y", 24)
      .attr("font-size", 24/1.25)
      .attr("font-family", "monospace")

    data.forEach((d,i)=>{
      const legendColor = color(d[2]*100)
      svg.append("text")
      .text(d3.format(",.2%")(d[2]))
      .attr("x", center[0]*i*1.1)
      .attr("y", center[1]+radius*1.5)
      .attr("font-size", 24)
      .attr("font-family", "monospace")

      svg.append("text")
      .text(d[0])
      .attr("x", 24+center[0]*i*1.1)
      .attr("y", center[1]+radius*1.5+24*1.33)
      .attr("font-size", 24/1.25)
      .attr("font-family", "monospace")
      .style("fill", legendColor)
      .style("text-transform", "uppercase")

      svg.append("circle")
    		.attr("cx", 24/2+center[0]*i*1.1)
    		.attr("cy", center[1]+radius*1.5+24*1.05)
   			.attr("r", circleRadius*2)
    		.attr("fill",legendColor)
    })

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

	<body>
	<script>
	var radius = 120
	var circleRadius = 2
	var circleCount = 100

	function toRadians (angle) {
	return angle * (Math.PI / 180);
	}
	var data = [["Мужчины",101231140],["Женщины",73243240]]

	var svg = d3.select("body").append("svg")
	.attr("width", 350)
	.attr("height", 500)
	var center = [205,205]

	var sum = data.reduce((acc,cur)=>(acc+cur[1]),0)
	// data = data.map((d)=>((d.concat(Math.round(d[1]/sum*100)))))
	data = data.map((d)=>((d.concat(d[1]/sum))))
	console.log(data)

	var angleStep = 360/circleCount
	var circles = []
	var color = d3.scaleThreshold()
	.domain(data
	.map((d)=>(Math.round(d[2]*100)))
	.reduce((acc, cur, i, arr) => {
	arr[i]=Math.round(arr[i]+arr[i-1])
	return arr })
	)
	.range(["blue","red","green"])
	// console.log(color.domain())
	d3.range(0,circleCount).forEach((d,i)=>{
	var angleRad = toRadians(i*angleStep-90)
	svg.append("circle")
	.attr("cx",radius*Math.cos(angleRad)+center[0])
	.attr("cy",radius*Math.sin(angleRad)+center[1])
	.attr("r",()=>(color.domain().includes(i+1) ? circleRadius*2:circleRadius))
	.style("fill", color(i));
	})
	svg.append("circle")
	.attr("cx",center[0])
	.attr("cy",center[1])
	.attr("r",radius*.85)
	.attr("fill","transparent")
	.attr("stroke","grey")

	svg.append("text")
	.text("ДЕМОГРАФИЯ")
	.attr("x", 0)
	.attr("y", 24)
	.attr("font-size", 24/1.25)
	.attr("font-family", "monospace")

	data.forEach((d,i)=>{
	const legendColor = color(d[2]*100)
	svg.append("text")
	.text(d3.format(",.2%")(d[2]))
	.attr("x", center[0]i1.1)
	.attr("y", center[1]+radius*1.5)
	.attr("font-size", 24)
	.attr("font-family", "monospace")

	svg.append("text")
	.text(d[0])
	.attr("x", 24+center[0]i1.1)
	.attr("y", center[1]+radius1.5+241.33)
	.attr("font-size", 24/1.25)
	.attr("font-family", "monospace")
	.style("fill", legendColor)
	.style("text-transform", "uppercase")

	svg.append("circle")
	.attr("cx", 24/2+center[0]i1.1)
	.attr("cy", center[1]+radius1.5+241.05)
	.attr("r", circleRadius*2)
	.attr("fill",legendColor)
	})

	</script>
	</body>