Data Visualization on Data Toolbox

3D Surface Chart

Mon, 01 Jan 0001 00:00:00 +0000

Visualize 3D data of row × column × value as a color-mapped surface resembling a topographic map

3d-surface-chart.dataviz.jp

What is this tool?

A visualization tool that generates interactive 3D surface charts simply by loading CSV data. It lets you view data with a “row × column × value” structure — such as interest rate yield curves and regional statistics — as a three-dimensional landscape. Rotate and zoom freely with your mouse to intuitively grasp overall trends and local variations in your data.

Features

3D surface rendering — Automatically generates a color-mapped 3D surface from CSV data
Camera presets — Switch between four viewpoints (overview, front, top, side) with one click
Color schemes — Choose from 21 palettes (sequential and diverging). Diverging schemes support a zero-baseline mode
Axis labels — Toggle between horizontal and vertical text. Supports many categories such as Japanese prefecture names
CSV import — Load any CSV via file picker or drag-and-drop
Sample data — Preloaded datasets including Japan Ministry of Finance interest rates (from 1974), U.S. Treasury bonds, and births by prefecture
PNG export — Download high-resolution images with axis labels
Share — Share the current view (data, color scheme, camera position) via URL. OGP images for social media are generated automatically
Project save/load — Save your work to the cloud and restore it anytime

How to use

Open the page to see Japan Ministry of Finance interest rate data (last 5 years) displayed by default
Switch sample datasets from the dropdown, or load your own CSV
Drag to rotate, scroll to zoom, and right-drag to pan
Adjust the color scheme and camera position to create the best view
Click “Export” to download a PNG image, or “Share” to generate a shareable URL
Shared URLs are viewable by anyone

Data format

Use a pivot table (cross-tabulation) CSV file. Values are placed at the intersection of rows and columns — the same structure as an Excel pivot table.

        col1   col2   col3   ...
row1    5.53   5.47   5.36   ...
row2    5.42   5.38   5.25   ...

In CSV format:

label,col1,col2,col3,...
row1,5.53,5.47,5.36,...
row2,5.42,5.38,5.25,...

First column: Row labels (dates in YYYY-MM-DD format, fiscal years, category names, etc.) — mapped to the depth axis
Remaining columns: Numeric data columns — mapped to the horizontal axis. If column names use duration formats like 1Y or 10M, axis spacing is calculated automatically; otherwise, columns are evenly spaced
Cell values: Numbers — mapped to the height (vertical axis) and color map

Example: Births by prefecture

Year,Hokkaido,Aomori,Iwate,...,Okinawa
2011,39292,9532,9310,...,16918
2012,38686,9168,9277,...,17074

If your data is in long format, convert it to a pivot table using Excel or Python’s pivot() before loading.

References

The idea of using a 3D surface chart for time-series yield curves originated from The New York Times.

A 3-D View of a Chart That Predicts The Economic Future: The Yield Curve - The New York Times https://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html

Draw-to-Answer Line Chart

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Draw-to-Answer Line Chart

drawing-line-chart.dataviz.jp

What is this tool?

“Draw-to-Answer Line Chart” is an interactive quiz builder based on time-series data. Quiz creators upload their data, and respondents predict upcoming trends by drawing directly on the chart. After submitting, the prediction is compared against the actual data and a score is displayed.

Features

CSV upload: Create quizzes from your own time-series data
Sample data: Try it instantly with built-in datasets — U.S. unemployment rate, Japan’s population, inbound tourists to Japan, and USD/JPY exchange rate
Date range selection: Select a portion of the data to define the quiz scope
Period annotations: Overlay contextual labels on the chart, such as political transitions or economic events
Hand-drawn style: Choose between a standard style and a hand-drawn sketch style
Publish & share: Share your quiz via URL or on social media
Project save & load: Save work-in-progress quizzes and resume editing later

How to use

Upload data — Drag & drop a CSV file or select a sample dataset
Set the date range — Specify the start and end of the data range
Configure the quiz — Enter a title (question), the prediction start point, units, and style
Add annotations (optional) — Set period labels to display as background context
Preview — Check the chart in real time on the right panel
Publish — Generate a URL and share it with respondents

Data format

CSV files with a header row are supported.

Column	Content	Example
X-axis (time series)	Year or year-month	`2000`, `2020/04`
Y-axis (numeric)	Any numeric value	`4.9`, `12615`, `105.21`

date,value
2000,4.0
2001,4.7
2002,5.8

X-axis supports YYYY (year) or YYYY/MM (year-month) formats
For multi-column CSVs, you can select the X-axis and Y-axis columns after uploading
JSON format is also supported ([{“x”: 2000, “y”: 4.0}, …])

RAWGraphs2

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

RAWGraphs2

rawgraphs.dataviz.jp

What is this tool?

A tool that lets you create a wide variety of charts with an intuitive interface. While it is not designed for fine-tuning charts on its own, it excels as a drafting tool for exporting in SVG format and refining in graphic tools (such as Figma or Adobe Illustrator) or PowerPoint.

A missing link tool that bridges the gap between Excel and graphic applications like Adobe Illustrator.

Features

32 diverse chart templates across 8 categories
Export as PNG, JPEG, or SVG images
Style adjustments
No interactive content creation capabilities
Save and load created projects

How to use

1. Load your data
1. Choose a chart
1. Map the data
1. Customize

Data formats

Tabular data (CSV, TSV, DSV)
JSON

Note

Drag operations may not work properly when using Microsoft Edge. In that case, please use another browser such as Chrome.

Sankeymatic

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Sankeymatic

sankeymatic.dataviz.jp

What is this tool?

A tool specialized for creating Sankey diagrams. Because the data format is simple, anyone can easily create Sankey diagrams using data prepared in spreadsheet tools.

Features

Create beautiful Sankey diagrams
Export as PNG or SVG images

How to use

Load data from the “Input” section
Adjust styles
Export the result

Data formats

Proprietary notation for this tool
source [value] target

Cytoscape

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Cytoscape

cytoscape.dataviz.jp

What is this tool?

A browser-based implementation of Cytoscape, which is popular as a desktop application.

It is a tool for interactively visualizing network (graph) data in your browser. You can load relationship data composed of nodes (points) and edges (lines), and intuitively change layouts, apply styling based on attributes, and more.

Cytoscape is an open-source platform for visualizing and analyzing network (graph) data. Originally developed for visualizing and analyzing biological networks (molecular interaction networks), it is also widely used for social network analysis and general complex network visualization.

Features

Data Import — Upload and visualize files in GEXF, GraphML, and CSV formats
Sample Datasets — Load one of 9 sample datasets with a single click, including Les Misérables, Game of Thrones, and Marvel Universe
Layout Switching — 6 layout types: Grid, Circle, Concentric, Breadthfirst, Cose (physics simulation), and Random
Node Styling — Dynamically change colors (qualitative color scheme), sizes, and labels based on attributes
Edge Styling — Dynamically change colors (quantitative color scheme), thickness, and labels based on attributes
SVG Export — Download the current graph in SVG format
Project Save/Load — Save projects to the server and restore them later

How to use

Select a file from the “Load Data File” button, or choose from “Load Sample Data”
Adjust the graph arrangement by changing the layout and easing in the control panel
Select the attribute to use for node color, size, and label from the dropdowns in the “Node” row
Select the attribute to use for edge color, thickness, and label from the dropdowns in the “Edge” row
If needed, save as an SVG image using “Export”

Data formats

GEXF / GraphML

XML formats designed for graphs. They can richly describe node and edge attributes (categories, weights, coordinates, etc.). They can be exported from many tools such as Gephi and NetworkX.

CSV (Edge List Format)

A format that can be easily created from spreadsheets or Excel.

A header row is required
Specify the endpoints of edges using source and target columns (or from and to) — case-insensitive
All other columns are imported as edge attributes
Nodes are automatically generated from the edge information

source,target,weight,type
Alice,Bob,1.0,friends
Bob,Carol,2.5,colleagues
Alice,Dave,0.8,family

Data Illustrator

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Data Illustrator

data-illustrator.dataviz.jp

What is this tool?

Data Illustrator is a web application that lets you create data visualizations visually without programming. It aims to generate charts with the feel of drawing graphics using vector design operations, similar to Figma or Adobe Illustrator.

Features

An intuitive, vector-design-like interface for drawing, selecting, and manipulating.
Supports data binding (linking data to graphics).
Automatic visual encoding: Assign data columns to visual attributes such as color, shape, and position for instant rendering.
UI components including Canvas, Data Panel, Layers Panel, and Property Inspector enable editing and structuring.

How to use

1. Import data and display the data table.
1. Draw, select, and edit shapes.
1. Bind data columns to shape attributes such as position, color, and size. Updates are reflected immediately.
1. Export or save the created visualization.

Data formats

Tabular data (CSV)

Gephi Lite

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Gephi Lite

gephi-lite.dataviz.jp

What is this tool?

Gephi Lite is a web application that allows you to easily create network graphs (relationship visualizations) in your browser. You can load data composed of nodes (points) and edges (lines), and intuitively perform layout calculations, color coding, filtering, and more.

Features

Graph Visualization: Interactively display relationships between nodes and edges. Zoom, pan, and node selection are supported
Layout Calculation: Multiple layout algorithms including ForceAtlas2, Force Directed, Circular, and CirclePack
Appearance Settings: Automatically assign colors, sizes, and labels to nodes and edges based on attribute values
Filtering: Narrow down the display of nodes and edges by attribute values or range specifications
Metrics Calculation: Compute network analysis metrics such as degree, PageRank, betweenness centrality, and Louvain community detection
Data Table: View and edit node and edge attributes in a list format
Export: Export as graph images (PNG) or graph data (GEXF)
Japanese/English Auto-Switch: The UI automatically switches based on your browser’s language settings

How to use

When you access the page, a sample graph or an empty workspace will be displayed
Load data using the “Open Data File” button at the top of the screen, or by dragging and dropping a file
Select “Layout” from the left side menu and run an algorithm to automatically arrange the nodes
In the “Appearance” menu, set colors and sizes based on attributes to make the graph easier to read
Deepen your analysis using “Filters” and “Metrics”
The completed graph can be exported as an image (PNG) or data file (GEXF)

Data formats

The following file formats are supported.

Format	Extension	Description
CSV	`.csv`	Edge list format. The first row contains headers (Source, Target, etc.), and subsequent rows contain the data for each edge. The simplest format
GEXF	`.gexf`	Gephi’s standard XML format. Retains rich node/edge attributes and visual information
GraphML	`.graphml`	A standard XML-based graph description format
Graphology JSON	`.json`	JSON format for the Graphology library

CSV file format example:

Source,Target,Weight
Alice,Bob,1.0
Bob,Charlie,2.0
Alice,Charlie,1.5

The first row is the header (required)
The Source (or From, Src) and Target (or To, Dst) columns are automatically detected
Other columns (such as Weight) are imported as edge attributes
Nodes are automatically generated from the Source / Target values
Character encoding supports both UTF-8 and Shift_JIS

Parallel Coordinates

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Parallel Coordinates

parallel-coordinates.dataviz.jp

What is this tool?

An interactive chart specialized for comparing and exploring multidimensional data. Simply upload a CSV file, and numeric columns are displayed as parallel axes with each row drawn as a polyline crossing them. Brushing on each axis lets you filter data matching specific conditions, making it easy to discover patterns and outliers intuitively.

Features

Brushing: Drag vertically on each axis to specify a range and filter data matching the conditions
Axis reordering: Drag column names horizontally to rearrange axis order. Place related metrics side by side for comparison
Scale switching: Toggle between three modes — Original (raw values), Min-Max (0–1 normalization), and Z-Score (standardization)
Table synchronization: The data table below syncs with brushing results. Hovering over a row highlights the corresponding line on the chart
Export: Export filtered results as CSV and chart images as SVG/PNG
Share — Share the current view via URL. OGP images for social media are generated automatically
Project saving: Save and restore data and settings (scale, axis order, brush ranges) to the cloud with thumbnails

How to use

Click “CSV Upload” to load your data (or try “Sample” to use yogurt nutrition data)
Drag vertically on an axis to narrow down a range of interest
Switch the Scale to Min-Max or Z-Score as needed to compare metrics with different units
Drag axis names horizontally to place items you want to compare next to each other
Hover over a table row to highlight the corresponding line on the chart
Export results as CSV/SVG/PNG, or save as a project to the cloud

Data format

File format: CSV (comma-separated, UTF-8)
Structure: First row as header (column names), subsequent rows as data
Numeric columns: Automatically detected and displayed as chart axes
String columns: Shown in the table but not included as chart axes
Missing values: Empty cells are treated as missing

Vega Editor

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Vega Editor

JSON 形式で可視化仕様を書くことで、インタラクティブなグラフやチャートをリアルタイムにレンダリング

vega-editor.dataviz.jp

What is this tool?

Vega Editor is a web-based IDE (editor) for writing, editing, and previewing Vega and Vega-Lite visualization specifications. By writing visualization specifications in JSON format, you can render interactive graphs and charts in real time. Vega and Vega-Lite are declarative visualization grammars that generate charts by defining data and display rules in JSON.

Features

Text editor / code view…Provides an editor for entering and editing Vega/Vega-Lite JSON.
Real-time preview…Instantly displays the edited specification as a visualization in the browser.
Samples and templates…Load example specs for learning and experimentation (a feature of the official version).
Vega / Vega-Lite mode switching…Edit and preview in both specification formats (a standard feature of the official tool).
Sharing / Export…Save and share specifications via GitHub Gist and other backend integrations (an official version feature).

How to use

1. Write specifications in JSON format…Enter Vega or Vega-Lite specifications into the editor.
1. View the preview…The specification is rendered in real time so you can review the results.
1. Save and share as needed…Save specifications to Gist or similar services for sharing with others (when backend integration is available).

Data formats

JSON (Vega / Vega-Lite specification)…Describes the visualization definition (data references, transforms, encodings, marks, etc.) in JSON.
Tabular data as data sources…Vega/Vega-Lite can load external data either by embedding it directly within the JSON or by referencing CSV/TSV file URLs (as part of the specification standard).

Voyager2

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Voyager2

データ探索（Exploratory Data Analysis, EDA）を支援するビジュアライゼーションツール

voyager2.dataviz.jp

What is this tool?

Voyager 2 is a visualization tool that supports Exploratory Data Analysis (EDA). It lets you load data in the browser and interactively explore and generate visualizations. The original project is a fork/derivative of Voyager developed on the Vega ecosystem, characterized by its combination of manual chart specification and automatic recommendations for exploration support.

Features

Data exploration interface…Load data and interact through panels for field lists, chart encodings, filtering, and more.
Visualization recommendation…Automatically generate related charts (related views) and multiple chart candidates using wildcards, displaying them alongside the current visualization (focus view).
Partial specification with multiple chart generation…Use wildcards to simultaneously generate and compare multiple visualization specifications.
Interactive operations…Drag and drop fields onto encoding channels and update visualizations in real time.

How to use

1. Load data…Load tabular data such as CSV and review the field list.
1. Specify the visualization…Drag fields to encoding channels (e.g., x-axis, y-axis, color) to create a visualization.
1. Use exploration support…Simultaneously generate multiple views using wildcards, or use recommended views to broadly explore data.
1. Adjust and compare results…Compare recommended visualizations and generated charts while deepening your analysis.

Data formats

Tabular data (CSV, TSV)
JSON

Word Cloud

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

Word Cloud

日本語に特化したWord Cloud

word-cloud.dataviz.jp

What is this tool?

Word Cloud is a web tool that visualizes word frequency in text data by displaying more frequent words in larger sizes, creating a “word cloud” directly in the browser.

Word clouds are a visualization technique used to intuitively grasp key words in text data at a glance. Word size and color represent frequency trends.

Features

Text input / upload…Enter text files or text data to generate a word cloud.
Frequency analysis…Counts word occurrences and adjusts word sizes according to their frequency.
Word cloud display…Renders the word cloud with sizes and arrangements corresponding to word frequency.
Customization…Adjust maximum/minimum font sizes, colors, layout, and more.
Export / save…Provides an interface to save generated results as images or SVG.

How to use

1. Input / upload text data…Load text data using the text area or file upload.
1. Generate the word cloud…Click the “Generate” button, and a word cloud based on word frequency within the text is displayed.
1. Customize…Adjust parameters for font size, color, layout settings, etc.
1. Save results…Download the generated word cloud as PNG / SVG or CSV.

Data formats

Input formats
- Text (TXT) or copy-and-paste strings: Input directly into the tool.
- CSV / TXT files: Upload files containing word lists or text data.
Output formats
- Images (PNG / SVG): Save the visualized word cloud as an image.
- CSV: Save the morphologically analyzed tokens (words) and their frequency data.

QuickChart UI

Mon, 01 Jan 0001 00:00:00 +0000

dataviz.jp

QuickChart UI

URLだけでチャート画像生成

quickchart.dataviz.jp

What is this tool?

QuickChart is a tool that instantly generates static chart images (PNG, etc.) from specified data and chart definitions (Chart.js format) using only a URL.

Its distinctive feature is the ability to create embeddable chart images for server-side applications, emails, reports, documents, and other environments where JavaScript cannot be executed.

This tool provides a GUI for conveniently configuring those URL parameters.

Features

Chart image generation…Generate static chart images such as bar charts, line charts, and pie charts from settings specified via URL parameters or query strings.
URL-only workflow…Create charts using just the URL query, with no need to install complex libraries.
Usable as images…Generated charts are output as PNG or other image formats, making them easy to embed in web pages, reports, and emails.

How to use

1. Specify the chart configuration in JSON format via URL query parameters.
1. Use the generated image URL directly or download it.

Data formats

Tabular data (CSV)