Vega-Liteを使ってcsvファイルを可視化したい！

#きっかけ#
　研究室でVega-Liteを使うことになったのですが、チュートリアル終了後なにから手をつければいいのかわからず、かなり手こずったので備忘録+誰かの助けになれば幸いです。

#目的#
###手持ちのcsvファイルをVega-Liteを使って可視化したい###
　チュートリアルは公式で提供されているオンラインのエディタを使うことで問題なく進められるのですが、自分で持っているファイルをアップロードする方法が無いのか、自分が見つけられなかっただけなのかわかりませんが、できなかったためローカルでVega-Liteを使う方法を探しました

#手順#
色々調べた結果

• pyhtonでVega-Liteを使える
• JupyterLabを使うと色々便利そう

というわけでJupyterLabでVega-Liteを使おうとしたのですが、結論から言うと何故か自分の環境だとJupyterLabではエラーが出たためJupyter Notebookを使用しました。

###手順１　Anacondaのインストール###
　JupyterLabを使用する上で必須では無いのですが、データの可視化をするような方であればよく使うライブラリが揃っているのでAnacondaのインストールをおすすめします。
慣れている人であれば公式（https://www.anaconda.com/）のページを追っていけばできるかと思いますが、こちらがわかりやすいです。

• [Anacondaのダウンロード]
  (https://qiita.com/kanta13jp1/items/c6cc86dfd31a1c536aa9)

###手順２　IPython Vegaのインストール###
　私もちゃんと理解していませんが、jupyter notebookでVega-Liteを使うための物のようです。本来JupyterLabならいらないようなのですが、これをインストールする前にJupyterLabでvegaをimportしようとしたらバージョンの問題なのかmoduleが無いと言われたのでインストールしました。
　このページ（https://github.com/vega/ipyvega）の通りにやっていけば大丈夫ですが、英語なので一応コードも載せておきます。

Anacondaではpipを使わないとどこかで見たので飛ばしていいのかもしれませんがコマンドプロンプトで

pip install jupyter pandas vega
pip install --upgrade notebooksys-prefix below
jupyter nbextension install --sys-prefix --py vega

を実行します。

また、次に以下を実行します

conda install vega

これでVega-Liteを使えるようになりました。
###手順３　実際に使ってみる###
JupyterLabを起動してNotebookのpython3を選びエディタにコードを書きます。

from vega import VegaLite

VegaLite(
{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"a": "C", "b": 2},
      {"a": "C", "b": 7},
      {"a": "C", "b": 4},
      {"a": "D", "b": 1},
      {"a": "D", "b": 2},
      {"a": "D", "b": 6},
      {"a": "E", "b": 8},
      {"a": "E", "b": 4},
      {"a": "E", "b": 7}
    ]
  },
  "mark": "point",
  "encoding": {
    "x": {"field": "a", "type": "nominal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
)

一行目でVega-Liteを使えるようにし、以降、VegaLite()の中にチュートリアルでやったようなコードを書けば動きます。ちなみにここで書いたコードはチュートリアルのもので、実行すると以下の図が表示されます。
動かなかった場合、手順+αを見てください

###手順４　手持ちのcsvファイルを使う###
いよいよ自分が持っているファイルを使っていきます。最初のチュートリアルを終わらせると下の方にnext tutorialとあり、そちらに進むと外部からファイルを持ってきている以下のようなコードがあるのがわかります。

{
  "data": {"url": "data/seattle-weather.csv"},
  "mark": "tick",
  "encoding": {
    "x": {"field": "precipitation", "type": "quantitative"}
  }
}

しかしここで、URL?と思う人がいると思います。 ~~私は思いました。~~オンライン上にあるファイルしか使えなさそうな気がします。しかしそんなことはなく、data/seattle-weather.csvの部分を自分の使いたいファイルのパスにすれば動きました。
つまり、実際に書くpyhtonのコードとしてはこのようになります。

from vega import VegaLite

VegaLite(
{
  "data": {"url": "Downloads/hoge.csv"}, #使いたいファイルのパス

#以下使うデータのSpecification
  "mark": "tick",
  "encoding": {
    "x": {"field": "precipitation", "type": "quantitative"}
  }
}
)

###手順+α　うまく動かなかった場合###
原因はわからないのですが、私はこの手順でやると以下のエラーが表示されてできませんでした。

Javascript Error: require is not defined

Javascriptのエラーということはわかったのですが、調べてもそもそも言語使用上無理みたいな情報しか得られず、解決方法はわかりませんでした。
もしも同じエラーが出た人はJupyterLabではなく、Jupyter Notebookを使ってみてください。理由がわからないのは非常に心苦しいのですが、非常に私はこれで動きました。
AnacondaかJupyterLabをインストールし直したら治ったりするのか……

#まとめ#
初めて記事を投稿するため、作法としてまずい部分、また記事の中身そのものについてご指摘いただけると幸いです。自分自身わかっていない部分がとても多いですが、Vega-Liteについてはほぼ英語の資料しかなく、また、ある言語内で他の言語？ツール？を利用するのが初めてで何日も調べまくることになったので、少しでも誰かの助けになればと思います。