Plot Configurator User Manual

日付:

Plot Configurator User Manual

Welcome to Plot Configurator!
This application(https://plot-app-seven.vercel.app/) is a tool that allows you to easily create high-quality charts (Line Charts, Bar Charts, Scatter Plots) suitable for papers and presentations simply by inputting data.

Table of Contents

  1. Introduction
  2. Quick Start
  3. Detailed Usage
  4. Tips

Introduction

In this app, you can instantly render charts just by copying and pasting data from Excel or spreadsheets. You can finley tune colors, fonts, layouts, and save the result as an image.

Quick Start

  1. Enter Data: Paste your data into the "Data Input" area on the left.
  2. Select Chart: Choose from "Line", or "Bar", "Scatter".
  3. Adjust: Use the panels below to adjust colors and axis ranges.
  4. Save: Click the "Download" button below the chart to save the image.

Detailed Usage

1. Data Entry

Paste your input data into the text box on the left. It supports copy & paste from Excel or Google Spreadsheets.
The data format differs slightly depending on the type of chart you want to create.

Common Rules:

  • The first line is recognized as the "Header (Item Names)" (e.g., x, y, group).
  • Data supports tab-delimited (copy-paste from Excel) or comma-delimited (CSV) formats.

A. For Line / Bar Chart

Columns are required in the following order:
X Value | Y Value | Error (Optional) | Group (Optional)

Input Example:

x	y	error	group
1	10	0.5	Control
2	20	1.0	Control
1	15	0.8	Treatment

B. For Scatter Plot

Columns are required in the following order:
X Value | Y Value | X Error (Optional) | Y Error (Optional) | Group (Optional)

Input Example:

x	y	x_error	y_error	group
1	10	0.5	0.2	A
2	15	0.8	0.3	A
1	14	0.5	0.2	B

Note: If the data format is incorrect, the chart may not appear. In that case, please refer to the format of the sample data.

2. Selecting Chart Type

You can change the chart type using the selector at the top left of the screen.

  • Line: Suitable for viewing time-series data or trends.
  • Bar: Suitable for comparing categories.
  • Scatter: Suitable for visualizing the relationship between two variables. You can set both X and Y errors.

3. Customizing Appearance

You can adjust the design of the chart in the "Appearance" section.

  • Aspect Ratio: Choose the aspect ratio from 16:9, 4:3, or Custom (fit to browser width).
  • Layout: Choose whether to orient the chart Horizontally or Vertically.
  • Margins: Adjust the top, bottom, left, and right margins in pixels.
  • Color Palette: Batch change the chart colors from presets (Default, Nature, Vibrant, etc.).
  • Font: Select Japanese fonts (Hiragino/Meiryo, etc.) or Serif English fonts. Font size can also be changed.
  • Grid and Legend: Toggle the display of grid lines and the legend. The legend can be dragged and dropped to your preferred position.

4. Axis Configuration

In the "Axes Config" section, you can configure detailed settings for the X and Y axes.

  • Show: Whether to display the axis itself.
  • Title: The name of the axis (e.g., "Time (s)", "Concentration (%)") and its position (Center, Left/Top, Right/Bottom).
  • Min / Max: Manually fix the axis range. Leave blank to automatically adjust based on the data (Auto).
  • Tick Step: Specify the interval of the tick marks.

5. Saving Images

You can download the created chart from the bar below the preview screen.

  1. File Name: Enter a file name for the image to be saved.
  2. Save: Click the button to download the image in PNG format, etc.

Tips

  • Reordering Groups: If your data has multiple groups (e.g., Control, Treatment), you can change the display order or customize individual colors and names in the "Series Settings" at the bottom of the settings panel.
  • Jitter: If data points overlap in a Line chart making it hard to see, turning on "Jitter" will shift the points slightly to prevent overlap.
  • Language Switching: You can switch between English and Japanese using the button at the top left of the screen.

Created by: SK

コメント

コメントを投稿