![]() With some creative thinking and clever design work floating panels, masks and images can be used to turn ordinary infographics into compelling visualizations. Using the infographic background color for the text box and image mask hides the complexity of its layered construction. If the site scores 4.5, it will appear as a partial star like in the “Access” rating in this example.īy carefully arranging floating panels and images that act as masks, I have created the illusion of a single chart component. The bars can be seen through the star-shaped holes. This gif has 5 star-shaped holes punched through it and a drop shadow to give the 3D effect when combined with the bar chart. I use a partially transparent custom gif (shown in red in the image below) that acts as a mask. ![]() The final layer contains custom images which mask the two visible bars. When the infographic is run on a location the attribute labels are replaced with the unique site address, (380 New York Street) and site score (5) in the text box. For the second line I combine the custom attribute Quality(SiteAttribute) with the rest of the sentence “out of 4 Stars Site”. The first line contains only the site address which is a standard BA Web attribute field called SiteAddr. The box contains 2 lines of text with different styling. You can put any information into the text box, but I like to use it to summarize the site address and star quality, as shown in the example below. Using a solid white fill background color (the same as my infographic background) means that any part of the chart below the box is hidden, so there only appears to be 2 variables in the chart (access and quality) not 3. This overlays the dummy attribute (DV) which is always the top bar in the chart. The next layer in construction is a customized text box that is added as a floating panel. This creates a minimalist fixed sized bar chart with only the attribute labels and bars shown on the left-hand side of the example image above. Finally, I remove the vertical chart axis and tick marks. Removing the title and horizontal axis increases the vertical size of each bar and I maximize the thickness to minimize the gaps between bars. I normally use gold and minimize chart decoration. The bar chart color will determine the color of the stars. Resizing the element will cause the chart and bars to be resized as a result. This means that the length and width of each bar in the chart is therefore defined by the size (width and height) of the element the chart is placed in. I ensure that no attribute in the chart exceeds a maximum value of 5. This guarantees the maximum bar length and ensures I can accurately place the other elements on top of the chart.Ģ) Access: A user entered assessment of the site’s road access with range 0 to 5, andģ) Quality: A score calculated using demographic attributes with range 0 to 5. The chart itself contains 3 variables which are arranged in a specific order.ġ) DV: A dummy variable, which is always at the top of the chart and is always set to 5. Once the chart is configured I add floating panels to the areas highlighted with red rectangles to create the final effect shown as a thumbnail in the image below. It sits behind the masking images and text box and contains the attributes which will be rated. The chart is the most important component. This blog explains how each of those parts can be combined to create the final 5-star rating system. ![]() Site attributes captured using the BA mobile app or added during a site inspectionĢ) Text elements in a floating panel overlaid on top of the chart, andģ) Custom images superimposed on each bar in the chart I built this interaction using 5 individual components:ġ) A Standard horizontal bar chart element containingĬustom chart attributes calculated by combining demographic variables, and Other attributes such as access and building quality are also rated using a star quality method. The site at 380 New York Street, Redlands has an overall rating of 5. The overall score is summarized using a 5-star rating. The scoring system combines different demographic and site attributes which are shown in the infographic using color coded symbols. A developer is assessing and scoring a property’s potential for a burger bar. Creating one in the Business Analyst Web App (BA Web) is much easier than many imagine. It’s common on product review sites and is a popular widget in executive dashboards. ![]() Many businesses grade their activities or an opportunity using a 5 Star rating.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |