Login

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
More details

DEIOS Visly Demos

DEISO Visly & Storytelling Interactive Demos

DEISO Visly is a unified platform for data visualization, interactive dashboards, and storytelling. It supports over 25 graph types and is designed to simplify complex information through clear, engaging visuals. Whether used for technical reports, business insights, or project summaries, Visly adapts to any industry and project type, offering a flexible and powerful way to communicate data-driven stories.

This page showcases the capabilities of DEISO Visly through a collection of around 20 live, interactive demo charts. Visitors can explore each visualization in real time to experience how data can be transformed into compelling insights.

DEMO 1

Interactive Chart: Browser Market Share Over Time

This interactive chart showcases the evolution of major web browser usage—Chrome, Safari, Internet Explorer (IE), Edge, Firefox, and Opera—measured by service requests from 2007 through 2019. The visualization is delivered as a responsive stacked area chart embedded using an iframe. It allows users to explore browser trends across time interactively.

The x-axis represents the timeline, starting from May 2007 and ending in late 2019, marked in a rotating MM/DD/YY format for improved legibility. The y-axis displays normalized service usage values from 0.00 to 0.70, indicating the proportional dominance of each browser in relation to others.

Each browser is visualized with a unique color and semi-transparent fill for distinction and overlap clarity. Chrome shows a significant upward trend beginning around 2009, overtaking IE by 2012, and reaching a peak of 60% by 2019. IE, once dominant in 2007 with over 60% share, declines sharply after 2010. Edge emerges later with a small but growing presence, while Firefox, Safari, and Opera remain relatively consistent with minor fluctuations.

Two key annotations highlight the market transitions: In 2012, Chrome reached 28% while IE dropped to 32%. By 2019, Chrome expanded to 60%, with IE and Edge together representing just 7%. These annotations are marked with callout lines and text for emphasis.

User interface features include language selection, a dark/light mode toggle, and zoom interaction tools. The chart is embedded using a 16:9 aspect ratio to maintain responsiveness across devices. The embed style is minimal, removing fullscreen and scroll permissions for seamless integration into websites or dashboards.

This demo chart is part of an advanced interactive visualization suite used to present browser usage trends and platform dominance over time.


 

DEMO 2

Interactive Map: Population Distribution by Prefecture in Japan

This interactive choropleth map visualizes the population distribution across all 47 prefectures of Japan. The chart uses a color gradient to reflect the population size in each prefecture, allowing quick identification of densely and sparsely populated regions. The darker the red, the higher the population.

The background is rendered in dark navy blue for visual contrast, while the population gradient bar on the right ranges from light pink (low population, approx. 878,000) to dark red (high population, over 9 million). This color scale supports easy scanning of demographic patterns across the country.

Each region is clearly segmented and interactive. When a user hovers or clicks on a prefecture, a tooltip is displayed showing the following:

  • The prefecture name in Japanese (e.g., 北海道)

  • Its name in English (e.g., Hokkaido)

  • The total population in rounded millions (e.g., 5M)

The map shows Tokyo as the most densely populated area (deep red), followed by prefectures like Osaka and Kanagawa. Less populated regions like Tottori and Shimane appear in lighter tones.

Key user interface features include a language toggle in the top-right corner (defaulting to English), zoom functionality on the left side, and light/dark mode toggles in the lower-left corner for accessibility. The map is fully responsive and embedded with a 16:9 aspect ratio for optimal presentation across devices.

This interactive map is ideal for geographic demographic analysis and regional planning applications. It provides an intuitive interface for users to explore population distributions and is embedded seamlessly into any website or data dashboard.


 

DEMO 3

Interactive Bar Chart: Average Auto Insurance Expense by State

This interactive bar chart visualizes the average auto insurance expense across selected U.S. states using color-coded vertical bars. Each bar corresponds to one state and reflects the average dollar value spent on auto insurance.

The Y-axis is labeled in dollar increments, ranging from $0 to $500. A red reference line is marked at the $300 level to indicate the average threshold. Bars above this line indicate higher-than-average insurance expenses; those below it indicate lower costs.

States are listed on the X-axis using two-letter abbreviations, e.g., AL (Alabama), CA (California), NY (New York), etc.

Each bar is interactive:

  • When the user clicks or hovers on a bar, a tooltip appears displaying:

    • The state name

    • The exact insurance cost (e.g., “$452” for California)

  • The bars are color-coded individually for visual distinction, aiding in side-by-side comparison.

Example values from the chart:

  • CA (California): $452 (highest in chart)

  • NY (New York): $447

  • MT (Montana): $45 (lowest in chart)

  • GA (Georgia): $405

  • AZ (Arizona): $220

Visual effects:

  • The chart has a black background for contrast.

  • Grid lines enhance readability.

  • A light/dark mode toggle is available for accessibility.

  • On hover, the bars may animate or brighten slightly to indicate selection.

This bar chart is ideal for quick comparative analysis of auto insurance costs across states and supports decision-making in cost benchmarking or policy studies.

DEMO 4

  • This matrix illustrates the predictive power between different columns in a dataset, using a Predictive Power Index (PPI) that ranges from 0 to 100. A score of 0 indicates no predictive ability, while a score of 100 indicates perfect prediction. The matrix shows how well one column can predict another, with the strength of the prediction indicated by the darkness of the square.
  • For example, the Product column can perfectly predict the Topics classification for Product with a score of 100. However, the reverse is less strong, with the Topics classification for Product predicting Product with a score of 70. Similarly, Quantity Ordered can predict Order Date with a score of 16, but Order Date cannot predict Quantity Ordered at all, scoring 0.
  • The darker the square, the stronger the predictive relationship. Darker squares are more meaningful for creating informative charts. The legend indicates both positive and negative correlations, with  shaded squares representing undetermined correlations due to unordered categories. These undetermined correlations typically occur when one of the columns has categories without a logical order, such as Country, Gender, or Eye color.
  • Hovering over the squares provides more details about each feature pair. This matrix helps in understanding the predictive relationships between different columns in the dataset, aiding in more effective data analysis and visualization.

DEMO 5

  • This bar chart displays the average price for each product, ranked from highest to lowest. The chart includes ten products, with the average price calculated by aggregating the price of each product group. The product with the highest average price is the Printer, at $134.22. Following the Printer, the Mouse has an average price of $114.88, and the Tablet has an average price of $111.73. Other products included in the chart are Desk, Monitor, Chair, Keyboard, External Hard Drive, Laptop, and Headphones, with average prices ranging from $109.60 to $72.68. The bars visually represent these average prices, making it easy to compare the cost of each product.

DEMO 6

  • This bar chart illustrates the average price for each product category, ranked from highest to lowest. The categories include Office Equipment, Computing Devices, Office Furniture, Computer Accessories, Storage Devices, and Other. Office Equipment has the highest average price at $134.22, followed by Computing Devices at $111.73, and Office Furniture at $106.64. Computer Accessories and Storage Devices have average prices of $95.77 and $95.06, respectively. The category labeled Other has the lowest average price at $81.60. The chart effectively highlights the variation in average prices across different product categories.

DEMO 7

  • This bar chart illustrates the average quantity ordered for six product categories, aggregated by their respective group classifications. The categories are ranked from highest to lowest based on the average quantity ordered.
  • Computer Accessories lead with an average quantity ordered of 204, followed by Office Furniture with an average of 109. Computing Devices come next with an average of 74, while Storage Devices have an average of 59. The ‘Other’ category shows an average quantity ordered of 45, and Office Equipment has the lowest average at 32.
  • The chart provides a clear visual representation of the average quantities ordered across these product categories, highlighting the relative demand for each group.

DEMO 8

  • A stacked bar chart visualizes the composition of one categorical variable across the different categories of another categorical variable. In this chart, the categorical variables are “Quantity Ordered” and “Product.” “Product” includes ten categories: Monitor, Tablet, Desk, Keyboard, Headphones, External Hard Drive, Laptop, Chair, Mouse, and Printer. “Quantity Ordered” also has ten categories, ranging from 1 to 10.
  • Each column in the chart represents a different quantity ordered, and within each column, the percentages for the ten product categories are stacked to sum up to 100%. For instance, the segment representing Monitors in the “Quantity Ordered 1” column shows a percentage of 57.14%, indicating that out of all orders with a quantity of 1, 57.14% were for Monitors. Similarly, other product categories are represented by different segments within each column, showing their respective percentages for each quantity ordered.
  • This chart effectively illustrates the distribution of different products across various quantities ordered, providing a clear visual representation of how product orders are composed in terms of quantity.

DEMO 9

  • This bar chart illustrates the average quantity ordered for ten different products, aggregated by product type. The products are ranked from the highest to the lowest average quantity ordered. The Keyboard has the highest average quantity ordered at 75, followed closely by the Tablet with an average of 74. The Monitor and Desk follow with averages of 65 and 62, respectively. The External Hard Drive has an average quantity ordered of 59, while the Chair and Laptop have averages of 47 and 45. Headphones, Printer, and Mouse have the lowest averages, with 38, 32, and 26, respectively. The sample count for each product varies, indicating the number of orders considered for each product’s average. For instance, the Keyboard’s average is based on 13 samples, while the Mouse’s average is based on 5 samples. This chart provides a clear comparison of the average quantities ordered for each product, highlighting the relative popularity or demand for each item.

DEMO 10

  • A stacked bar chart visualizes the composition of one categorical variable across different categories of another categorical variable. In this chart, “Quantity Ordered” and “Topics Classification for Product” are the categorical variables. “Quantity Ordered” has ten categories, ranging from 1 to 10, while “Topics Classification for Product” includes six categories: Computer Accessories, Office Furniture, Computing Devices, Storage Devices, Other, and Office Equipment.
  • Each bar in the chart represents a different quantity ordered, and within each bar, the percentages for the six product categories are stacked to sum up to 100%. For instance, the segment representing Computer Accessories shows the percentage of this category for each quantity ordered. For Quantity Ordered 1, Computer Accessories make up 71.43% of the total, indicating that out of all orders with a quantity of 1, 71.43% are for Computer Accessories.
  • Similarly, the other segments within each bar represent the percentages of Office Furniture, Computing Devices, Storage Devices, Other, and Office Equipment for each quantity ordered. For example, for Quantity Ordered 2, Office Furniture accounts for 18.75%, Computing Devices for 18.75%, Storage Devices for 12.50%, Other for 18.75%, and Office Equipment for 6.25%.
  • This chart effectively illustrates how the distribution of product categories varies across different quantities ordered, providing a clear visual representation of the data.

DEMO 11

  • A time-series plot is a type of graph that illustrates how the values of a variable change over time. In this case, the plot shows the average price of a product (“Price Each”) from December 30, 2022, to December 24, 2023. The graph features a line that represents the average price for each date within this period.
  • The maximum price recorded is 195.82, which occurs on October 31, 2023. The plot provides a visual representation of the fluctuations in the product’s price over the specified timeframe, allowing for an easy understanding of trends and patterns in the data.

DEMO 12

  • The time-series plot illustrates the changes in the quantity of products ordered over time, spanning from December 30, 2022, to December 24, 2023. The plot highlights the average quantity ordered for each group within this period. The data points on the graph represent the quantity ordered on specific dates, showing fluctuations and trends over the year.
  • The maximum quantity ordered, which is 15, occurred on July 24, 2023. This peak is a significant point in the dataset, indicating a high demand on that particular day. The plot provides a clear visual representation of how the quantity ordered varies over time, allowing for easy identification of patterns, trends, and anomalies in the ordering behavior.
  • Overall, the time-series plot serves as an informative tool to understand the temporal dynamics of product orders, showcasing both the average quantities and specific high and low points within the given timeframe.

DEMO 13

  • The chart reveals that the Tablet category holds the largest share, accounting for 16% of the total. This is followed by the Keyboard category, which makes up 13%. The Monitor category represents 12%, while the Laptop, Headphones, External Hard Drive, and Desk categories each contribute 10%. The Chair category accounts for 8%, the Printer category for 6%, and the Mouse category for 5%.
  • This visual tool effectively highlights the relative proportions of each product category, making it easy to identify which products are most and least prevalent in the dataset. For instance, it is clear that Tablets are the most common product, while Mice are the least common.

DEMO 14

  • A stacked bar chart visualizes the overall composition of one categorical variable across different categories of another categorical variable. In this case, the chart illustrates the distribution of various products across six categories of “Topics classification for Product.” Both “Product” and “Topics classification for Product” are categorical variables, meaning they consist of text labels that can be grouped or categorized.
  • The “Product” variable includes ten categories: External Hard Drive, Laptop, Printer, Tablet, Desk, Chair, Keyboard, Monitor, Headphones, and Mouse. The “Topics classification for Product” variable includes six categories: Other, Office Furniture, Office Equipment, Computing Devices, Computer Accessories, and Storage Devices.
  • Each bar in the chart represents a product, and the segments within each bar show the percentage distribution of that product across the six categories of “Topics classification for Product.” The percentages for each product category are stacked within the bar and sum up to 100%. For instance, the segment representing External Hard Drive is entirely within the Storage Devices category, indicating that 100% of External Hard Drives fall under this classification. Similarly, the Laptop category is entirely within the Computing Devices classification.
  • The chart provides a clear visual representation of how each product is classified across different categories, making it easy to understand the distribution and classification of products at a glance.

DEMO 15

  • A count plot is a bar chart that helps us see which categories occur more often and allows for easy comparison between them. This particular count plot displays the distribution of ten different product categories based on their percentage of occurrence.
  • In this chart, the Tablet category has the highest percentage, accounting for 16% of the total. Following Tablets, Keyboards make up 13%, and Monitors represent 12%. Headphones, External Hard Drives, Laptops, and Desks each contribute 10% to the total. Chairs account for 8%, Printers for 6%, and Mice for 5%.
  • This visualization effectively highlights the relative frequency of each product category, making it clear which products are more commonly ordered.

DEMO 16

  • This donut chart illustrates the distribution of six categories within the topic classification for products. The chart visually represents the percentage each category contributes to the total. Computer Accessories dominate the chart, comprising 40% of the total. Office Furniture follows with 18%, while Computing Devices account for 16%. Both Storage Devices and the category labeled as Other each represent 10% of the total. Office Equipment makes up the smallest portion, at 6%. This visual representation allows for an immediate understanding of the relative proportions of each category.

DEMO 17

  • A kernel density plot illustrates the distribution of a single numerical variable, effectively showing the concentration of data within certain ranges. The x-axis represents the range of all possible values for the variable, such as “Price Each.” A taller graph indicates a higher probability of the values occurring. For example, the “Price Each” values are most concentrated around 35.65.
  • The area under the graph between two values corresponds to the percentage of “Price Each” values present in that interval. For instance, shading the area under the graph between 40.97 and 161.23 would reveal that approximately 52% of all “Price Each” values fall within this range.
  • It is not essential to know the exact height of the graph. Instead, it is more useful to identify anomalies or variations in the shape of the graph. For example, if the x-axis represented customer spending, an extended long tail to the right would indicate that a few customers are spending significantly more than the rest.

DEMO 18

  • The chart is a time-series plot that illustrates the average counts of a variable over time, spanning from December 30, 2022, to December 24, 2023. Each data point on the graph represents the average count for a specific date. The values fluctuate between 1.0 and 2.0, with the maximum count of 2.0 occurring on several dates, including January 3, 2023. The plot provides a clear visual representation of how the average counts change over the specified period, allowing for easy identification of trends and patterns in the data.

DEMO 19

Subscribe

You can refer to the Newsletter Subscription Policy.


Start Typing

Contact Info.

English Address:
Level 21 Shiodome Shibarikyu Building
1-2-3 Kaigan, Minato-ku
105-0022 Tokyo, Japan.

Japanese Address:
〒105-0022 東京都港区海岸1-2-3
汐留芝離宮ビルディング21階, 合同会社DEISO.

Phone (JP): 03-5403-6479 / 0488-72-6373
Phone (EN): 070-6969-7700
Fax: 03-5403-6475 / 0488-72-6373
Email: info@dei.so

Latest News

🆘 DEISO Quick Help & Support Center

🛠️ How to Seek Help from the DEISO Website

🔍 Search Assistance
  • Use Ctrl+Shift+D on any Windows or Mac device to launch our global site search with autocomplete.
  • On both desktop and mobile, click the search icon at the left center edge of the screen to open the same powerful search tool.
  • For detailed exploration, visit our Advanced Search page:
    👉 https://dei.so/advanced-search

🤖 Ask AI for Instant Support

💬 Connect with the DEISO Team

📧 Email Us

🧾 Submit a Support Ticket

📶 Check Platform & Website Status

📚 Need More Help?
  • Visit our Frequently Asked Questions (FAQ):
    👉 https://dei.so/faq
  • Explore our full Help Center:
Toggle Dark Mode