gerrymaekivi

Untitled

Dec 6th, 2021
751
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div id="arc"></div>
  3. </template>
  4.  
  5. <script>
  6. import * as d3 from 'd3'
  7.  
  8. export default {
  9.   props: ['data'],
  10.   mounted () {
  11.     this.generateArc()
  12.   },
  13.   methods: {
  14.     generateArc () {
  15.       const w = 500
  16.       const h = 500
  17.  
  18.       const svg = d3
  19.         .select('#gauge')
  20.         .append('svg')
  21.         .attr('width', w)
  22.         .attr('height', h)
  23.  
  24.       const sortedGDP = this.data.sort((a, b) => (a.value > b.value ? 1 : -1))
  25.       const color = d3.scaleOrdinal(d3.schemeDark2)
  26.  
  27.       const maxGdp = d3.max(sortedGDP, o => o.value)
  28.  
  29.       const angleScale = d3
  30.         .scaleLinear()
  31.         .domain([0, maxGdp])
  32.         .range([0, 1.5 * Math.PI])
  33.  
  34.       const arc = d3
  35.         .arc()
  36.         .innerRadius((d, i) => (i + 1) * 25)
  37.         .outerRadius((d, i) => (i + 2) * 25)
  38.         .startAngle(angleScale(0))
  39.         .endAngle(d => angleScale(d.value))
  40.  
  41.       const g = svg.append('g')
  42.  
  43.       g.selectAll('path')
  44.         .data(sortedGDP)
  45.         .enter()
  46.         .append('path')
  47.         .attr('d', arc)
  48.         .attr('fill', (d, i) => color(i))
  49.         .attr('stroke', '#FFF')
  50.         .attr('stroke-width', '1px')
  51.         .on('mouseenter', function () {
  52.           d3.select(this)
  53.             .transition()
  54.             .duration(200)
  55.             .attr('opacity', 0.5)
  56.         })
  57.         .on('mouseout', function () {
  58.           d3.select(this)
  59.             .transition()
  60.             .duration(200)
  61.             .attr('opacity', 1)
  62.         })
  63.  
  64.       g.selectAll('text')
  65.         .data(this.data)
  66.         .enter()
  67.         .append('text')
  68.         .text(d => `${d.country} -  ${d.value} Trillion`)
  69.         .attr('x', -150)
  70.         .attr('dy', -8)
  71.         .attr('y', (d, i) => -(i + 1) * 25)
  72.  
  73.       g.attr('transform', 'translate(200,300)')
  74.     }
  75.   }
  76. }
  77. </script>
  78.  
RAW Paste Data