アプリに１点の機能追加して頂くことが課題です。
現在のアプリケーションのスクリーンショット
Node.jsのLTSで実行確認します。
散布図の軸をユーザが任意に変更できるようにしたい。
改修前は散布図のx軸がcalories、y軸がcarboです。 これをcerealのデータのカラムで変更したい。
- セレクトボックスを追加してx軸とy軸のカラムを選択できるようにする。
- 選んだカラムを軸に散布図を再描画できる。
対象となるカラムのリスト。数値のカラムのみです。 calories,protein,fat,sodium,fiber,carbo,sugars,potass,vitamins,shelf,weight,cups,rating
セレクトボックスの位置はお任せします。
./dataに本課題のデータセットがあります。
./data/cereal.json:GET /api/cerealsで返るデータです。 ツールでcsvからjsonに変換しました。./data/cereal.csv: 変換元のデータセットです。
このデータセットはKaggleからダウンロードしました。 該当のページにデータの詳細が載っていますのでご参照ください。 https://www.kaggle.com/datasets/crawford/80-cereals
License: CC BY-SA 3.0
この先はオプションです。 もし追加できていたら加点されます。
このアプリは研究者がデータを眺めてratingが高くなる要因の気付きを得るためのものと仮定します。
その用途で改造していただいてよいです。
例）
- mfrが7種類あります。散布図をmfrで色分け（データセットを分ける）して表示したい。
- クリックしたポイントのシリアルの名前(name)または詳細を表示したい。
- データセットをテーブルで表示したい。
- データを編集したい。
window.onloadの関数が長いのでリファクタリングして処理を読みやすくしたい。- レスポンシブ対応
- Next.js/React.jsでの実装に変更したい。
このほか、改善提案もOKです。
アプリの実行方法です。 zipを解凍して、Nodeの環境で次のコマンドで実行できます。
# 解凍したディレクトリへ移動
# モジュールのインストール
npm i
# アプリを実行する(Hot Reloadあり)
npm startブラウザーで http://localhost:3000/をロードして、出力を確認します。
Node
CDN
この先はQunaSysの新規事業のチームで共有している開発環境についてのまとめです。 余裕があればDockerの環境構築にも挑戦してみてください。
オプションとしてDockerでの開発環境を用意してます。 こちらは利用しなくても構いません。
弊社では、アプリの開発環境は基本的にDockerで用意しています。 このアプリのImageはdockerhubからNodejsのLTSのalpineを利用しています。
好きなようにDocker環境を用意してください。 個人的にはDocker Desktopが好きです。
- Windows : Windows に Docker Desktop をインストール
- Mac : Mac に Docker Desktop をインストール
また、VSCodeでの開発では拡張機能のVisual Studio Code Remote - Containersもお勧めです。 Developing inside a Container
# Dockerを立ち上げる
docker-compose up -d
# コンテナでアプリの実行
docker-compose exec npm startブラウザーで http://localhost:3004/をロードして、出力を確認します。
docker-compose.ymlでポートフォワーディングの設定をしています。
# Dockerを停止する
docker-compose down