123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              #app
  tool-chip(
    :info="info"
    :position-top="positionTop"
    :position-left="positionLeft"
  )
  ul.circle-container
    list-item(
      v-for="station in stations"
      :name="station.name"
      :detail="station.detail"
      :url="station.url"
      :id="station.id"
      @make-tool-chip="makeToolChip"
      @destroy-tool-chip="destroyToolChip"
    )
            
          
!
            
              .tool-chip {
  padding: 10px;
  background-color: #fff;
  position: absolute;
  width: 300px;
  border: 2px solid tomato;
  border-radius: 3px;
  z-index: 2;
  p, a {
    font-size: 13px;
  }
  p {
    margin: 0;
  }
  a {
    display: block;
    margin-top: 5px;
  }
}

@mixin on-circle($item-count, $circle-size, $item-size) {
  position: relative;
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%; 
  list-style: none;       
  
  > * {
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -($item-size / 2);
  
    $angle: (360 / $item-count);
    $rot: 0;

    @for $i from 1 through $item-count {
      &:nth-of-type(#{$i}) {
        transform: 
          rotate($rot * 1deg) 
          translate($circle-size / 2) 
          rotate($rot * -1deg);
      }

      $rot: $rot + $angle;
    }
  }
}

.circle-container {
  @include on-circle($item-count: 29, $circle-size: 70em, $item-size: 4em); 
  margin: 5em auto 0;
  border: solid 5px #99cc00;
  .list-item {
    text-align: center;
    padding: 5px;
    background: #fff;
    border-radius: 50%;
    border: 2px solid tomato;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    &-name {
      
    }
    &-detail-area {
      position: absolute;
      top: 0;
      left: 5em;
      width: 500px;
      height: 100px;
      display: none;
    }
  }
}
            
          
!
            
              const yamanote_data = {
  "stations": [
    {
      "id": 1,
      "name": "東京",
      "detail": "東京駅(とうきょうえき)は、東京都千代田区丸の内一丁目にある、東日本旅客鉄道(JR東日本)・東海旅客鉄道(JR東海)・東京地下鉄(東京メトロ)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC%E9%A7%85"
    },
    {
      "id": 2,
      "name": "有楽町",
      "detail": "有楽町駅(ゆうらくちょうえき)は、東京都千代田区有楽町にある、東日本旅客鉄道(JR東日本)・東京地下鉄(東京メトロ)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E6%9C%89%E6%A5%BD%E7%94%BA%E9%A7%85"
    },
    {
      "id": 3,
      "name": "新橋",
      "detail": "新橋駅(しんばしえき)は、東京都港区にある、東日本旅客鉄道(JR東日本)・東京地下鉄(東京メトロ)・東京都交通局(都営地下鉄)・ゆりかもめの駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E6%96%B0%E6%A9%8B%E9%A7%85"
    },
    {
      "id": 4,
      "name": "浜松町",
      "detail": "浜松町駅(はままつちょうえき)は、東京都港区にある、東日本旅客鉄道(JR東日本)・東京モノレールの駅である。ただし、東京モノレールでは、モノレール浜松町駅(モノレールはままつちょうえき)が正式な駅名である。",
      "url": "https://ja.wikipedia.org/wiki/%E6%B5%9C%E6%9D%BE%E7%94%BA%E9%A7%85"
    },
    {
      "id": 5,
      "name": "田町",
      "detail": "田町駅(たまちえき)は、東京都港区芝五丁目にある、東日本旅客鉄道(JR東日本)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E7%94%B0%E7%94%BA%E9%A7%85"
    },
    {
      "id": 6,
      "name": "品川",
      "detail": "品川駅(しながわえき)は、東京都港区高輪三丁目および港南二丁目にある、東日本旅客鉄道(JR東日本)・東海旅客鉄道(JR東海)・日本貨物鉄道(JR貨物)・京浜急行電鉄(京急)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E5%93%81%E5%B7%9D%E9%A7%85"
    },
    {
      "id": 7,
      "name": "大崎",
      "detail": "大崎駅(おおさきえき)は、東京都品川区大崎一丁目にある、東日本旅客鉄道(JR東日本)・東京臨海高速鉄道(TWR)の駅である。JR東日本とりんかい線が構内を共用する共同使用駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E5%A4%A7%E5%B4%8E%E9%A7%85"
    },
    {
      "id": 8,
      "name": "五反田",
      "detail": "五反田駅(ごたんだえき)は、東京都品川区東五反田一丁目および同二丁目にある、東日本旅客鉄道(JR東日本)・東京急行電鉄(東急)・東京都交通局(都営地下鉄)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E4%BA%94%E5%8F%8D%E7%94%B0%E9%A7%85"
    },
    {
      "id": 9,
      "name": "目黒",
      "detail": "目黒駅(めぐろえき)は、東京都品川区上大崎にある、東日本旅客鉄道(JR東日本)・東京急行電鉄(東急)・東京地下鉄(東京メトロ)・東京都交通局(都営地下鉄)の駅である。品川区最北端の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E7%9B%AE%E9%BB%92%E9%A7%85"
    },
    {
      "id": 10,
      "name": "恵比寿",
      "detail": "恵比寿駅(えびすえき)は、東京都渋谷区恵比寿南一丁目にある、東日本旅客鉄道(JR東日本)と東京地下鉄(東京メトロ)の駅である。渋谷区内の鉄道駅では最も南にある。",
      "url": "https://ja.wikipedia.org/wiki/%E6%81%B5%E6%AF%94%E5%AF%BF%E9%A7%85"
    },
    {
      "id": 11,
      "name": "渋谷",
      "detail": "渋谷駅(しぶやえき)は、東京都渋谷区道玄坂一丁目および同二丁目にある、東日本旅客鉄道(JR東日本)・京王電鉄・東京急行電鉄(東急)・東京地下鉄(東京メトロ)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E6%B8%8B%E8%B0%B7%E9%A7%85"
    },
    {
      "id": 12,
      "name": "原宿",
      "detail": "原宿駅(はらじゅくえき)は、東京都渋谷区神宮前一丁目にある、東日本旅客鉄道(JR東日本)山手線の鉄道駅である。駅番号はJY 19。",
      "url": "https://ja.wikipedia.org/wiki/%E5%8E%9F%E5%AE%BF%E9%A7%85"
    },
    {
      "id": 13,
      "name": "代々木",
      "detail": "代々木駅(よよぎえき)は、東京都渋谷区代々木一丁目にある、東日本旅客鉄道(JR東日本)・東京都交通局(都営地下鉄)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E4%BB%A3%E3%80%85%E6%9C%A8%E9%A7%85"
    },
    {
      "id": 14,
      "name": "新宿",
      "detail": "新宿駅(しんじゅくえき)は、東京都新宿区・渋谷区にある、東日本旅客鉄道(JR東日本)・京王電鉄・小田急電鉄・東京地下鉄(東京メトロ)・東京都交通局(都営地下鉄)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E6%96%B0%E5%AE%BF%E9%A7%85"
    },
    {
      "id": 15,
      "name": "新大久保",
      "detail": "新大久保駅(しんおおくぼえき)は、東京都新宿区百人町一丁目にある、東日本旅客鉄道(JR東日本)山手線の駅である。駅番号はJY 16。",
      "url": "https://ja.wikipedia.org/wiki/%E6%96%B0%E5%A4%A7%E4%B9%85%E4%BF%9D%E9%A7%85"
    },
    {
      "id": 16,
      "name": "高田馬場",
      "detail": "高田馬場駅(たかだのばばえき)は、東京都新宿区高田馬場一丁目にある、東日本旅客鉄道(JR東日本)・西武鉄道・東京地下鉄(東京メトロ)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E9%AB%98%E7%94%B0%E9%A6%AC%E5%A0%B4%E9%A7%85"
    },
    {
      "id": 17,
      "name": "目白",
      "detail": "目白駅(めじろえき)は、東京都豊島区目白三丁目にある、東日本旅客鉄道(JR東日本)山手線の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E7%9B%AE%E7%99%BD%E9%A7%85"
    },
    {
      "id": 18,
      "name": "池袋",
      "detail": "池袋駅(いけぶくろえき)は、東京都豊島区[1]にある、東日本旅客鉄道[1](JR東日本)・東武鉄道[2](東武)・西武鉄道[3](西武)・東京地下鉄[4](東京メトロ)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E6%B1%A0%E8%A2%8B%E9%A7%85"
    },
    {
      "id": 19,
      "name": "大塚",
      "detail": "大塚駅(おおつかえき)は、東京都豊島区南大塚三丁目にある、東日本旅客鉄道(JR東日本)山手線の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E5%A4%A7%E5%A1%9A%E9%A7%85_(%E6%9D%B1%E4%BA%AC%E9%83%BD)"
    },
    {
      "id": 20,
      "name": "巣鴨",
      "detail": "巣鴨駅(すがもえき)は、東京都豊島区巣鴨にある、東日本旅客鉄道(JR東日本)・東京都交通局(都営地下鉄)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E5%B7%A3%E9%B4%A8%E9%A7%85"
    },
    {
      "id": 21,
      "name": "駒込",
      "detail": "駒込駅(こまごめえき)は、東京都豊島区駒込二丁目にある、東日本旅客鉄道(JR東日本)・東京地下鉄(東京メトロ)の駅である。豊島区最東端の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E9%A7%92%E8%BE%BC%E9%A7%85"
    },
    {
      "id": 22,
      "name": "田端",
      "detail": "田端駅(たばたえき)は、東京都北区東田端一丁目にある、東日本旅客鉄道(JR東日本)の駅である。特定都区市内制度における「東京都区内」および「東京山手線内」に属する。駅番号は京浜東北線がJK 34、山手線がJY 09。北区最南端の駅及び最東端の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E7%94%B0%E7%AB%AF%E9%A7%85"
    },
    {
      "id": 23,
      "name": "西日暮里",
      "detail": "西日暮里駅(にしにっぽりえき)は、東京都荒川区西日暮里五丁目にある、東京地下鉄(東京メトロ)・東日本旅客鉄道(JR東日本)・東京都交通局の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E8%A5%BF%E6%97%A5%E6%9A%AE%E9%87%8C%E9%A7%85"
    },
    {
      "id": 24,
      "name": "日暮里",
      "detail": "日暮里駅(にっぽりえき)は、東京都荒川区西日暮里二丁目にある、東日本旅客鉄道(JR東日本)・京成電鉄・東京都交通局の駅である。荒川区最南端の駅で、一部は台東区にまたがる。なお、ホーム内に区境がある。",
      "url": "https://ja.wikipedia.org/wiki/%E6%97%A5%E6%9A%AE%E9%87%8C%E9%A7%85"
    },
    {
      "id": 25,
      "name": "鶯谷",
      "detail": "鶯谷駅(うぐいすだにえき)は、東京都台東区根岸一丁目にある、東日本旅客鉄道(JR東日本)の駅である[1]。駅番号は京浜東北線がJK 31、山手線がJY 06。",
      "url": "https://ja.wikipedia.org/wiki/%E9%B6%AF%E8%B0%B7%E9%A7%85"
    },
    {
      "id": 26,
      "name": "上野",
      "detail": "上野駅(うえのえき)は、東京都台東区上野七丁目および東上野三丁目にある、東日本旅客鉄道(JR東日本)・東京地下鉄(東京メトロ)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E4%B8%8A%E9%87%8E%E9%A7%85"
    },
    {
      "id": 27,
      "name": "御徒町",
      "detail": "御徒町駅(おかちまちえき)は、東京都台東区上野五丁目にある、東日本旅客鉄道(JR東日本)の駅である。駅番号は京浜東北線がJK 29、山手線がJY 04。",
      "url": "https://ja.wikipedia.org/wiki/%E5%BE%A1%E5%BE%92%E7%94%BA%E9%A7%85"
    },
    {
      "id": 28,
      "name": "秋葉原",
      "detail": "秋葉原駅(あきはばらえき)は、東京都千代田区にある、東日本旅客鉄道(JR東日本)・東京地下鉄(東京メトロ)・首都圏新都市鉄道の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E7%A7%8B%E8%91%89%E5%8E%9F%E9%A7%85"
    },
    {
      "id": 29,
      "name": "神田",
      "detail": "神田駅(かんだえき)は、東京都千代田区にある、東日本旅客鉄道(JR東日本)・東京地下鉄(東京メトロ)の駅である。",
      "url": "https://ja.wikipedia.org/wiki/%E7%A5%9E%E7%94%B0%E9%A7%85_(%E6%9D%B1%E4%BA%AC%E9%83%BD)"
    }
  ]
};

const toolChip = Vue.extend({
  props: {
    info: Object,
    positionTop: Number,
    positionLeft: Number
  },
  template: `
    <div class="tool-chip" v-if="info"
      :style="{top: positionTop + 10 + 'px',
               left: positionLeft + 10 + 'px'
      }">
      <p>{{ info.detail }}</p>
    </div>
  `
});

const listItem = Vue.extend({
  props: {
    id: Number,
    name: String,
    detail: String,
    url: String
  },
  methods: {
    onMouseEnter() {
      this.$emit('make-tool-chip', this.id, event);
    },
    onMouseLeave() {
      this.$emit('destroy-tool-chip');
    }
  },
  template: `
    <li class="list-item" @mouseenter="onMouseEnter($event)" @mouseleave="onMouseLeave">
      <div class="list-item-name">{{ name }}</div>
      <div class="list-item-detail-area">
        <div class="list-item-detail">{{ detail }}</div>
        <a :href="url" class="list-item-link">Wikipedia</a>
      </div>
    </li>
  `
});

const app = new Vue({
  el: '#app',
  data: {
    stations: yamanote_data.stations,
    info: null,
    positionTop: null,
    positionLeft: null
  },
  methods: {
    makeToolChip(id, event) {
      this.info = this.stations[id - 1];
      this.positionTop = event.pageY;
      this.positionLeft = event.pageX;
    },
    destroyToolChip() {
      this.info = null;
    }
  },
  components: {
    'tool-chip': toolChip,
    'list-item': listItem
  }
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console