<commit_before><template>
  <div id="cover">
    <svg ref="svg"></svg>
  </div>
</template>
<script>
import * as d3 from 'd3'

export default {
  name: 'cover',
  mounted() {
    d3_init(this.$el)
  },
  data() {
    return {
      msg: 'Welcome!',
    }
  }
}


/*============================
=            Data            =
============================*/


const data = [{
  zh: '中心',
  en: '（Center）'
}, {
  zh: '資訊安全',
  en: '（Information Security）'
}, {
  zh: '公民參與',
  en: '（Citizen Participation）'
}, {
  zh: '開放資料',
  en: '（Open Data）'
}, {
  zh: '機器學習',
  en: '（Machine Learning）'
}, {
  zh: '社群',
  en: '（Community）'
}, {
  zh: '社會服務',
  en: '（Social Services）'
}, {
  zh: '物聯網',
  en: '（Internet of Things）'
}, {
  zh: '資料分析',
  en: '（Data Analysis）'
}, {
  zh: '消費者',
  en: '（Consumer）'
}, {
  zh: '資料視覺化',
  en: '（Data Visualization）'
}, {
  zh: '數位人文',
  en: '（Digital Humanities）'
}, {
  zh: '人工智慧',
  en: '（Artificial Intelligence）'
}, {
  zh: '虛擬實境',
  en: '（Virtual Reality）'
}, {
  zh: '教育',
  en: '（Education）'
}, {
  zh: '金融',
  en: '（Finance）'
}, ]

/*=====  End of Data  ======*/


function d3_init(el) {

  const svg = d3.select(el).select('svg')

  const color = d3.scaleOrdinal(d3.schemeCategory10)

  let width, height, centerX, centerY

  resetCenter()

  let center = svg
    .selectAll('g')
    .data(data)
    .enter()
    .filter((d, i) => i === 0)
    .append('g')
    .append('circle')
    .attr('r', 200)
    .attr('cx', centerX)
    .attr('cy', centerY)
    .attr('fill', 'white')
    // .attr('stroke', 'red')


  //draw circles for the nodes
  let nodes = svg
    .selectAll('g')
    .data(data)
    .enter()
    .append('g')
    .filter((d, i) => i !== 0)


  let nodeEvents = nodes
    .on('mouseover', function(d, i) {

      d3.select(this)
        .selectAll('circle')
        .transition()
        .attr('r', 100)
        .attr('stroke-dasharray', 18, 2)


      d3.select(this)
        .selectAll('text')
        .transition()
        .style('opacity', 1)

    })

  let circles = nodes
    .append('circle')
    .attr('r', 20)
    .attr('cx', centerX)
    .attr('cy', centerY)
    // .attr('fill', 'white')
    .attr('fill', (d, i) => color(i))
    .style('opacity', 0.03)
    .attr('stroke', 'gray')
    .attr('stroke-opacity', 0)
    // .attr('stroke-width', 2)



  let texts = nodes
    .append('text')
    .attr('dx', -20)
    .style('color', 'red')
    .text((d) => d.zh)
    .attr('dx', (d) => d.cx)
    .attr('dy', (d) => d.cy)
    .attr('text-anchor', 'middle')
    .attr('font-size', 14)
    .style('opacity', 0)



  let force = d3
    .forceSimulation()
    .nodes(data)
    .force('charge', d3.forceManyBody()
      .strength((d, i) => i === 0 ? (-3000) : (width * -2))
      // .strength(height * -1.5)
      // .strength(-2000)
      // .distanceMax(1000)
    )
    .force('center', d3.forceCenter(centerX, centerY))
    .force('x', d3.forceX())
    .force('y', d3.forceY())
    // .alphaTarget(1)
    // .alphaTarget(0.2)
    .alphaTarget(0.4)
    .on('tick', ticked)
    // .stop()

  function ticked() {

    resetCenter()

    circles
      .attr('cx', (d) => d.x)
      .attr('cy', (d) => d.y)

    texts
      .attr('dx', (d) => d.x)
      .attr('dy', (d) => d.y)

  }

  function resetCenter() {

    width = window.innerWidth
    height = window.innerHeight
    centerX = width / 2
    centerY = height / 2
      // centerY = height / 2 - 90


  }


  // setInterval(() => {

  //   force.restart()
  //   console.log('interval')

  // }, 1000)


  window.addEventListener('resize', function() {
    window.scrollTo(0, 1);
    resetCenter()
    force.force('center', d3.forceCenter(centerX, centerY))

  }, true);



}
</script>
<style lang="scss" scoped>
#cover {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0px;
  z-index: -1;
}

svg {
  width: 100%;
  height: 100%;
}

// @media style
$mobile: "(max-width: 767px)";
$tablet: "(min-width: 768px) and (max-width: 1023px)";
$desktop: "(min-width: 1024px)";
</style>
<commit_msg>update cover<commit_after><template>
  <div id="cover">
    <svg ref="svg"></svg>
  </div>
</template>
<script>
import * as d3 from 'd3'

export default {
  name: 'cover',
  mounted() {
    d3_init(this.$el)
  },
  data() {
    return {
      msg: 'Welcome!',
    }
  }
}


/*============================
=            Data            =
============================*/


const data = [{
  zh: '中心',
  en: '（Center）'
}, {
  zh: '資訊安全',
  en: '（Information Security）'
}, {
  zh: '公民參與',
  en: '（Citizen Participation）'
}, {
  zh: '開放資料',
  en: '（Open Data）'
}, {
  zh: '機器學習',
  en: '（Machine Learning）'
}, {
  zh: '社群',
  en: '（Community）'
}, {
  zh: '社會服務',
  en: '（Social Services）'
}, {
  zh: '物聯網',
  en: '（Internet of Things）'
}, {
  zh: '資料分析',
  en: '（Data Analysis）'
}, {
  zh: '消費者',
  en: '（Consumer）'
}, {
  zh: '資料視覺化',
  en: '（Data Visualization）'
}, {
  zh: '數位人文',
  en: '（Digital Humanities）'
}, {
  zh: '人工智慧',
  en: '（Artificial Intelligence）'
}, {
  zh: '虛擬實境',
  en: '（Virtual Reality）'
}, {
  zh: '教育',
  en: '（Education）'
}, {
  zh: '金融',
  en: '（Finance）'
}, ]

/*=====  End of Data  ======*/


function d3_init(el) {

  const svg = d3.select(el).select('svg')

  const color = d3.scaleOrdinal(d3.schemeCategory10)

  let width, height, centerX, centerY

  resetCenter()

  let center = svg
    .selectAll('g')
    .data(data)
    .enter()
    .filter((d, i) => i === 0)
    .append('g')
    .append('circle')
    .attr('r', 200)
    .attr('cx', centerX)
    .attr('cy', centerY)
    .attr('fill', 'white')
    // .attr('stroke', 'red')


  //draw circles for the nodes
  let nodes = svg
    .selectAll('g')
    .data(data)
    .enter()
    .append('g')
    .filter((d, i) => i !== 0)


  let nodeEvents = nodes
    .on('mouseover', function(d, i) {

      d3.select(this)
        .selectAll('circle')
        .transition()
        .attr('r', 100)
        .attr('stroke-dasharray', 18, 2)


      d3.select(this)
        .selectAll('text')
        .transition()
        .style('opacity', 0.6)

    })

  let circles = nodes
    .append('circle')
    .attr('r', 20)
    .attr('cx', centerX)
    .attr('cy', centerY)
    // .attr('fill', 'white')
    .attr('fill', (d, i) => color(i))
    .style('opacity', 0.08)
    .attr('stroke', 'gray')
    .attr('stroke-opacity', 0)
    // .attr('stroke-width', 2)


  function textAttr(t) {
    t.attr('fill', (d, i) => color(i))
      .attr('text-anchor', 'middle')
      .attr('font-size', 14)
      .style('opacity', 0)
  }

  let textsZh = nodes
    .append('text')
    .text((d) => d.zh)
    .call(textAttr)

  let textsEn = nodes
    .append('text')
    .text((d) => d.en)
    .call(textAttr)



  let force = d3
    .forceSimulation()
    .nodes(data)
    .force('charge', d3.forceManyBody()
      .strength((d, i) => i === 0 ? (-5.5 * height) : (width * -2))
      // .strength((d, i) => i === 0 ? (-3000) : (width * -2))
      // .strength(height * -1.5)
      // .strength(-2000)
      // .distanceMax(1000)
    )
    .force('center', d3.forceCenter(centerX, centerY))
    .force('x', d3.forceX())
    .force('y', d3.forceY())
    // .alphaTarget(1)
    // .alphaTarget(0.2)
    .alphaTarget(0.4)
    .on('tick', ticked)
    // .stop()

  function ticked() {

    resetCenter()

    // center
    //   .attr('x', centerX)
    //   .attr('y', centerY)

    circles
      .attr('cx', (d) => d.x)
      .attr('cy', (d) => d.y)

    textsZh
      .attr('dx', (d) => d.x)
      .attr('dy', (d) => d.y - 10)

    textsEn
      .attr('dx', (d) => d.x)
      .attr('dy', (d) => d.y + 10)

  }

  function resetCenter() {

    width = window.innerWidth
    height = window.innerHeight
    centerX = width / 2
    centerY = height / 2
      // centerY = height / 2 - 90


  }


  // setInterval(() => {

  //   force.restart()
  //   console.log('interval')

  // }, 1000)


  window.addEventListener('resize', function() {
    window.scrollTo(0, 1);
    resetCenter()
    force.force('center', d3.forceCenter(centerX, centerY))

  }, true);



}
</script>
<style lang="scss" scoped>
#cover {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0px;
  z-index: -1;
}

svg {
  width: 100%;
  height: 100%;
}

// @media style
$mobile: "(max-width: 767px)";
$tablet: "(min-width: 768px) and (max-width: 1023px)";
$desktop: "(min-width: 1024px)";
</style>

{'fraction_non_alphanumeric': 0.23650107991360692, 'fraction_numerical': 0.02507799376049916, 'mean_word_length': 2.319394663480685, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 50, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4520017', 'n_tokens_mistral': 3625, 'n_tokens_neox': 3377, 'n_words': 695}