Pentecost.AI - Blog

Embracing Flexibility: How D3 Empowers Lean Startups in Data Visualization

Fri, 26 Jul 2024 04:49:11 +0000

Building Interactive Visuals with HTML, CSS, and JavaScript

Freedom and Flexibility to Build What You Want

In the ever-evolving world of data visualization, most people have heard of the more established names like Tableau, and Power BI, and anything Python related, but D3.js often goes under the radar. It’s easy to see why. JavaScript was built as a web language to add interactivity to static web pages. Interestingly enough, the same utility it has there, comes into play when using the D3.js library. It allows developers to create fully interactive visuals, inside of just an HTML page. While larger companies are sending dashboards (and charging a lot for them), D3 provides a different way of working with data.

D3.js is a game-changer, especially for lean startups that can't afford to spend resources or man hours on creating structured data just yet. Established companies have their processes and data schemas meticulously organized, down to every column of every spreadsheet. Newer companies, however, need to hit the ground running and figure out the details as they go.

Enter D3.js, the superhero of flexibility. Using just HTML, CSS, SVG (Scalable Vector Graphics), and JavaScript, a small team can build interactive data visuals that are not only flexible but also responsive and easy to maintain. And guess what? It's free! No need to fork out for expensive licenses or deal with rigid controls. Plus, it's open-source. Just drop the CDN link into your script tag in an HTML file, and you're good to go.

How it Works

D3.js is a bit like jQuery's cooler, more data-savvy cousin. It allows developers to control the DOM (Document Object Model) by first connecting to a data object—whether that's a file or data fetched from an external API using fetch or AJAX. Once you have that data, you can create divs that represent plots, squares, or whatever your heart desires. You calculate the scales for data analysis and then add CSS and HTML attributes to those divs based on the relationships within your data. With a sprinkle of CSS magic, you can make these visuals interactive, adding neat features that would be a pain to implement with other tools.

JSON (JavaScript Object Notation)

When working with external APIs, you'll typically be dealing with JSON data (JavaScript Object Notation), seen above. which is essentially key-value pairs that allow for nested data structures. This format is particularly handy if you're using a MERN stack (MongoDB, Express, React, Node.js), one of the most popular tech stacks around. The beauty of MERN is that it allows you to build your entire application using JavaScript, keeping things streamlined and efficient.

Example Dashboard in One HTML File

mport sdk from '@stackblitz/sdk' sdk.embedProjectId( 'elementOrId', 'chroropleth-map', { forceEmbedLayout: true, openFile: 'index.html', } )

Cool Scatter Plot

Let’s get in Touch!

Unlocking the Power of Data: Best Practices for Effective Visualization

Fri, 07 Jun 2024 15:17:28 +0000

Unlocking the Power of Data: Best Practices for Effective Visualization

As the world becomes increasingly digital, data plays a crucial role in the success of businesses. From identifying customer preferences to predicting market trends, data is a powerful tool that organizations can use to gain a competitive edge. However, the sheer volume of data can be overwhelming, and businesses need to know how to manage it effectively.

One approach that companies often turn to is data visualization. Data visualization involves presenting data in a graphical format that is easy to understand and interpret. By creating charts, graphs, tables, plots and other visual representations of data, businesses can quickly identify patterns and trends that might not be apparent from raw data alone. These visualizations help them see their data from different perspectives, assess company performance, and generate actionable insight.

However, creating effective data visualizations is not as simple as it often appears. To truly make an impact, businesses need to follow a set of best practices that will ensure their visualizations are accurate, informative, visually appealing, and consider the viewers’ comfort level with viewing data.

The first crucial step in creating effective data visualizations is to carefully select the right type of visualization for the data being presented. With various types of visualizations such as bar charts, line graphs, scatter plots, and more, it’s important to choose the one that best suits the data that needs to be analyzed. Choosing the wrong type of visualization can result in a misleading or confusing representation of the data.

To make the right choice, it’s important to have conversations with key stakeholders and project champions who have a vested interest in the outcome of the data visualization. These discussions can help you understand their needs and preferences, and guide you in creating the most effective dashboard for their needs. It’s essential to listen carefully to stakeholder feedback and incorporate it into your design, but it’s equally important to use your expertise to build several versions of the dashboard before presenting it to them.

Depending on the users’ familiarity with visualizations, they may have a clear idea of what they want, or they may need guidance in choosing the right visuals. By providing different options, you can help stakeholders make informed decisions and ultimately create a data visualization that accurately represents the data and meets their needs. This decision can be reassessed over the course of the build.

Once you’ve selected the appropriate visualization, it’s crucial to verify that the data is both accurate and current. Flawed data can result in misguided conclusions, while outdated information can render the visualization useless. This process will necessitate conversations with key stakeholders and data entry personnel. You’ll need to scrutinize the data to ensure its accuracy and correctness, as well as examine the possibility of making data integrity-related changes.

For example, you may have an open-entry field that makes it difficult to quantify the data when pulling it, owing to the vast range of possible responses. Collaboratively, you may be able to determine if the field can be altered to a fixed format, allowing only certain options to be entered, making it easier to collect and analyze the data.

One of the most important practices when creating visualizations is to keep them simple and easy to understand. While it might be tempting to include every bit of data available, it’s important to consider the audience and their needs. Overloading viewers with too much information can make it difficult to identify patterns and trends, and ultimately defeat the purpose of the visualization.

However, it’s important to note that the level of simplicity in the visualization can vary depending on the intended user of the dashboard. There are typically two different types of views: exploratory and explanatory views. Exploratory views are designed for users who are familiar with data analysis and want to dig deeper into the data to uncover insights and patterns. Explanatory views, on the other hand, are designed for users who are less familiar with data analysis and need a clear and concise explanation of the data.

When creating a dashboard, it’s important to classify the key users based on certain levels such as their role within the organization, their familiarity with data analysis, and their intended purposes for the dashboard. This will help to determine which type of view is most appropriate for each user group and ensure that the visualization is tailored to their needs.

Regardless of the intended users, it’s always important to keep the visualization clean and uncluttered. Focusing on the most important data points and minimizing unnecessary visual elements will help to ensure that the message is clear and impactful. It’s also important to ensure that the visualization is visually appealing and follows best design practices to maximize engagement and comprehension.

Finally, it’s crucial to keep in mind that data visualizations serve as a tool for businesses to gain insights and make informed decisions, rather than an end in themselves. To maximize the potential of data visualizations, businesses must be able to interpret the data and utilize it to inform their actions. However, this interpretation process can vary significantly based on the intended use of the dashboard.

For instance, if the dashboard is designed to be an explanatory tool for a broad audience with varying backgrounds, it needs to quickly lead them to the intended conclusion through well-crafted visuals. Conversely, if the dashboard is targeted towards high-level users looking for maximum customization and filtering options to build and present different visual reports to various stakeholders, then the focus may be more on providing greater column customization and filtering options.

In both cases, the key is to ensure that the dashboard’s design and functionality align with the intended audience’s needs and goals, facilitating effective decision-making.

In conclusion, data visualization is a powerful tool that can help businesses make sense of the vast amounts of data that they generate. By following best practices and creating accurate, informative, and visually appealing visualizations, businesses can gain insights that can help them make better decisions and gain a competitive edge in their industry.

Get Started Now

Top 3 Data Visualization Tools

Fri, 07 Jun 2024 15:17:28 +0000

Top 3 Data Visualization Tools

Data visualization is a crucial aspect of business intelligence, allowing companies to gain valuable insights from complex data sets. By visualizing data, companies can easily identify patterns, trends, and outliers, which can help them make informed business decisions. I have compiled a list of the top three data visualization tools to help you choose the best solution for your business needs.

Tableau

Tableau is a popular data visualization tool that is primarily built for this purpose. It offers drag-and-drop functionality and easy-to-use data blending, allowing users to combine different data sets for analysis. With Tableau, you can easily identify errors in your data and fix them quickly. It also provides a range of interactive user and server interfaces, making it easy to collaborate with other team members. Additionally, Tableau’s data preparation software is excellent, allowing users to handle large amounts of data and prepare it for visualization effectively.

While Tableau is an excellent data visualization tool, it is relatively expensive. The desktop and prep versions require a subscription, and you must pay per client user to access the server. Additionally, some functions, such as formatting options, can be challenging to locate. Tableau also lacks custom visual imports and only allows single-value parameters.

Power BI

Power BI is a popular data visualization tool from Microsoft that offers a wide range of custom visualizations. It can input data from several different types of sources and integrates well with Excel Power Query and Power Pivot. Power BI requires minimal coding and is easy to use for simple visualizations. However, it can be challenging to locate errors that are further back in your sequence, and fixing them can be difficult due to closely tied steps. Power BI is slower than Tableau and struggles to handle complex table relationships. Its user interface can also be crowded and rigid, and its DAX formulas can be challenging to use.

Despite these drawbacks, Power BI is very affordable, and a free version is available. Its range of custom visualizations is extensive, making it an excellent choice for businesses that require a specific type of visualization.

Zoho Analytics

Zoho Analytics is a cloud-based data visualization tool that offers a free version and is affordable compared to other options. It is easy to set up and input data to build reports, and it offers more integration options than Tableau or Power BI. Zoho Analytics also allows users to create custom reporting and dashboard options, and it integrates with other Zoho applications. It offers simi-private client links and affordable private client viewership.

However, Zoho Analytics can be challenging to configure initially, and editing graphs and charts can be difficult. Its A.I is lackluster, and it does not offer automation for running reports. Zoho Analytics can also be slow at times.

In addition to these three tools, other data visualization tools worth considering include JuiceBox, Qlik, Adaptive Insights, Dundas BI, Domo, Cluvio, Data Wrapper, and FusionCharts Suit XT. A

Get Started Now

Data Visualization Integrity

Fri, 07 Jun 2024 15:17:28 +0000

Data Visualization Integrity

In today’s age of big data, raw data can be overwhelming and unmanageable for companies. With thousands, if not millions, of rows of data spread across multiple tables, manually combining multiple data sources can be a daunting task that is both time-consuming and prone to human error. This is where data preparation and visualization tools come into play. Analysts can easily merge, clean, and condense data into visually appealing graphs and charts, making it easier to derive actionable insights.

However, the popularity of these tools does not guarantee accurate and reliable results. Data scientists must ensure that they follow a detailed design procedure to maintain data and visual integrity. Visual integrity ensures that the visuals being shown accurately represent the raw data sources they originate from. In this article, we will outline some of the best practices that should be followed to ensure visual integrity.

Cite Data Sources

Proper citation of data sources, whether internal or external, is critical. By citing data sources, developers can locate raw data sources quickly in case of errors. Leaving this step out can create credibility difficulties when it comes to stakeholder buy-in, and leadership may raise questions as to how the data was gathered. Hence, data sources must be cited appropriately.

Ensure Data Prep is Accurate

It is important to go through all of your data with a fine-tooth comb before beginning any visual aspect of the development. With automation behind many data cleaning tools, it can be easy to overlook critical steps in the initial data preparation. Therefore, it is essential to double-check your cleaning steps to ensure that there are no incorrectly placed filters or calculations that may hide vital elements of data. Failure to do so can lead to important data being left out, resulting in incorrect results and false insights for decision makers.

Make Sure Data is Not Misleading

Developers must ensure that they are not excluding information from visuals due to personal bias or the desire to influence the organization in a particular direction. This could include removing an outlier value or scaling the visual to manipulate perception. Consistency in presentation is also key to ensure that visuals are accurately interpreted by viewers. By avoiding these biases, data analysts and scientists can present credible, accurate, and reliable data to decision-makers.

In conclusion, it is essential to maintain visual integrity while presenting data to stakeholders. Following the above practices can help ensure that the data presented is accurate and credible, providing valuable insights to decision-makers. By being diligent in maintaining data and visual integrity, data analysts and scientists can gain the trust and confidence of their stakeholders, which will lead to more informed and confident decision-making.

5 Web Accessibility Tips to Improve Your Website

Fri, 07 Jun 2024 15:17:28 +0000

5 Web Accessibility Tips to Improve Your Website

In today's digital age, ensuring your website is accessible to all users, including those with disabilities, is not just a best practice—it's a necessity. Web accessibility makes your site usable for everyone, regardless of their abilities or disabilities. This inclusiveness can significantly enhance user experience, broaden your audience, and comply with legal requirements. Below are five crucial web accessibility tips to help you improve your website, with a focus on ARIA (Accessible Rich Internet Applications) and other essential practices.

1. Use Semantic HTML

Semantic HTML refers to using HTML tags that convey the meaning of the content within them. This practice helps screen readers and other assistive technologies understand and navigate your site more effectively.

Example:

Using tags like

, and

instead of generic

tags provides context and structure to your content, making it more accessible.

Delicious Recipes

Homemade Pizza Recipe

Learn how to make a delicious homemade pizza from scratch!

Ingredients

2 cups all-purpose flour
1 teaspoon salt
1 tablespoon olive oil
1 cup warm water
1 cup tomato sauce
2 cups mozzarella cheese
Your favorite toppings

Instructions

Mix flour and salt in a bowl.
Add olive oil and warm water, then knead into a dough.
Let the dough rest for 30 minutes.
Roll out the dough and place on a baking sheet.
Spread tomato sauce and add cheese and toppings.
Bake at 450°F (230°C) for 15-20 minutes.

Did you know?

Pizza originated in Naples, Italy, in the late 18th century.

2. Implement ARIA Roles and Attributes

ARIA roles and attributes enhance the accessibility of web content by providing additional information to assistive technologies. They are particularly useful for dynamic content and complex UI components that standard HTML might not fully describe.

My Accessible Website

Welcome to our site

This is an example of using ARIA attributes for improved accessibility.

Your message has been sent successfully!

Content for Tab 1

Content for Tab 2

// This would be expanded in a real application document.querySelector("form").addEventListener("submit", function (e) { e.preventDefault(); document.getElementById("form-status").classList.remove("hidden"); });

3. Ensure Keyboard Navigation

Many users rely on keyboard navigation due to mobility impairments or preference. Ensuring that all interactive elements can be accessed and operated via the keyboard is crucial.

Example:

Keyboard Navigation Demo

Home

Welcome to our website. Use tab to navigate and enter to select.

About Us

We are committed to creating accessible web experiences.

Our Services

Web Design
Accessibility Consulting
User Experience Design

Contact Us

// Enhance keyboard navigation document.addEventListener("keydown", function (e) { // Press 'h' to go home if (e.key === "h") { document.querySelector("#home").focus(); } // Press 'n' to cycle through nav items if (e.key === "n") { const navItems = document.querySelectorAll("nav a"); const currentIndex = Array.from(navItems).findIndex( (item) => item === document.activeElement ); const nextIndex = (currentIndex + 1) % navItems.length; navItems[nextIndex].focus(); } }); // Make sections focusable for keyboard navigation document.querySelectorAll(".section").forEach((section) => { section.addEventListener("focus", function () { this.setAttribute("tabindex", "0"); }); section.addEventListener("blur", function () { this.setAttribute("tabindex", "-1"); }); });

4. Color Contrast and Readability

5. Provide Text Alternatives for Non-Text Content

Images, videos, and other non-text content should have text alternatives that convey the same information. This can be achieved using alt attributes for images and captions or transcripts for videos.

Example:

Here, the alt attribute provides a description of the image, which screen readers will read aloud, ensuring that visually impaired users understand the content.

5. Use High Contrast and Legible Fonts

Visual accessibility is essential for users with low vision or color blindness. Ensure that your website has sufficient color contrast between text and background and uses legible fonts.

Example:

body {

font-family: Arial, sans-serif;

color: #333;

background-color: #fff;

}

a {

color: #1a73e8;

}

a:focus,

a:hover {

outline: 2px solid #1a73e8;

}

In this CSS example, the text color contrasts well with the background color, and links are styled with a focus outline to make them more noticeable when navigated via keyboard.

Why Web Accessibility is Important

Web accessibility ensures that everyone, regardless of their abilities, can access and use your website effectively. It's not only about compliance with legal standards like the Americans with Disabilities Act (ADA) or the Web Content Accessibility Guidelines (WCAG); it's about creating an inclusive digital environment. By implementing these tips, you contribute to a more accessible web, improve user experience, and potentially reach a broader audience.

In conclusion, making your website accessible is a win-win situation. It improves usability for all users, ensures compliance with legal requirements, and demonstrates social responsibility. Start incorporating these tips today to make your website more accessible and inclusive for everyone.

Why you shouldn't use IF/THEN statements in your dashboard

Fri, 07 Jun 2024 15:12:28 +0000

Why you shouldn’t use IF/THEN statements in your dashboard

As a data analyst, one of the most satisfying things is creating successful calculations. However, getting it right the first time can be challenging, and I’ve spent countless hours trying to properly frame code only to find out a comma was in the wrong place or a parenthesis was missing. It takes a deep understanding of data analytics tools and experience to ensure that the calculations are accurate.

When creating dashboards, many calculations require the use of IF/THEN statements. While this has been my go-to calculation for many years, I suggest avoiding it unless you know your data analytics tools like the back of your hand. The IF/THEN statement is often used to set up a certain number of rules that the user requires for their dashboard. For example, IF Column A = “Rice” THEN (new column) = “1” ELSEIF Column A = “Wheat” THEN (new column) = “2”. This calculation creates a new column that has a “1” if Column A is “Rice” and “2” if it’s “Wheat”. However, when there are 50+ variations of this, they can become far more complicated, such as referencing other columns or referencing them based on certain parameters.

As analysts, our primary focus is automating steps and doing all the manual steps ourselves so that the user never has to do them again. However, we need to consider if the parameters will ever change, how often they will change, and if the changes will be more complicated than the original format. We also need to consider if the list of items will keep growing over time and how much time we have for maintenance on the dashboard. These considerations are essential in ensuring that the calculations are reliable and the dashboard runs efficiently.

In place of IF/THEN statements, I recommend creating a spreadsheet that feeds into the dashboard. While the primary goal of a dashboard should be automation, it’s also important to decrease the need for communication. Therefore, the user should be given a step to do if there are updates. As long as it doesn’t take too much of their time, this is a far better option.

The spreadsheet has all the items that need to be linked located within the same rows. Instead of saying If “Column A” = “Rice” Then “1”, the user simply adds a column with items and a column with numbers. For example, for Rice, they simply put 1. When the data is pulled into Tableau, everything is already linked together, and the auto refresh feature updates the visuals itself. This approach not only saves everyone time but also helps the system run faster.

While this solution doesn’t solve all calculations that require the IF/THEN statement, it will at least solve some. Therefore, it’s essential to understand when to use the IF/THEN statement and when to use other methods, such as a spreadsheet. This can save time, reduce the need for communication, and ensure the calculations are reliable, leading to better insights and more successful data analysis.

Get Started Now