This is the start of a new series we’re doing about MongoDB. We are going to take you through the ins and outs of using a NoSQl to store your data. MongoDB is one of the most popular DBMS out there and is the industry leading NoSQL database. MongoDB’s popularity stems from its speed, ease of development, and flexibility. Instead of normalizing your data into a series of related tables, Mongo allows you to store all the relevant information into a single schemaless document. This not only makes writing queries faster but depending on how you set up your database this makes your queries execute faster too.
- Are you connecting to data sources that update frequently?
- Would you like the DXP or web player file to reload data at a set interval?
- Would you like the DXP or web player to reload without hitting the reload button?
Welcome to part 4 of my HTML series! This week, we are going to build upon what we know by discussing HTML containers. I will also elaborate on the use of the style attribute inside HTML tags, which is where I left off last week. These two subjects go together nicely, as you’ll see how different containers apply formatting and style differently.
If you need a review, here are links to the other parts of the series — Part 1 Tags, Part 2 Attributes, Part 3 HTML & CSS. I’ll kick off this week by explaining the different types of HTML containers. It’s simple, there are only 2 types to worry about.
HTML Containers — Block versus inline
When building web pages, a developer will divide the page into sections using containers. The containers will then have content placed into them, and CSS is used to format and style the container. That’s the quick and dirty explanation anyway.
HTML uses two types of containers — block and inline. VSchool Web Development explains this really well by saying, “Block elements are those that take up the full width available on a web page, effectively blocking out any other elements from sitting next to it on the left or right. Inline elements are those who only take up as much width as is needed to display the contents of the element, thereby allowing other elements to be in line with the inline element.”
As a Spotfire developer, simply think of the Text Area as a web page. Thus, block elements will take up the full width of the Text Area. Inline elements only take up as much width as needed to display your text or other elements.
Examples of block elements you will use in Spotfire:
- Paragraphs <p>
- Headers <h1> thru <h6>
- Divisions <div>
- Lists and list items <ol>, <ul>, <li>
If you have been following the series, you should already have some experience working with <p> and <h1>-<h6>. Lists (<ol> and <ul>) will be covered next week. If you aren’t familiar with <div>, don’t worry, examples will be shown below.
Examples of inline elements you will use in Spotfire:
- Spans <span>
- Images <img>
Now that you understand the difference between block and inline, it would make sense to talk about when to use block versus inline, but that would make this post drag on a bit too long, so I’ll simply direct you to this link for more information on that subject.
Now, back to Spotfire. Here is an example of what these containers look like in Spotfire. Notice the use of background color and how far the color extends for each type of container.
As you can see, <span> and <img> do not take up the full width of the Text Area, but <p>, <h1>, and <div> do. This stands out after applying background color.
Now that you understand how different containers work, let’s go back to the style attribute. The style attribute can be used to format an individual tag OR all of the contents of a container. As a reminder, the syntax uses a property/ value pair separated by a colon. Multiple property/value pairs can be used inside a single tag. Simply separate them with a semicolon. Don’t forget to wrap the property/value pairs in quotes. Lastly, just a small warning, know that not everything you find on the internet will work in Spotfire.
Common properties to test
- height, width
To make this a little easier, I have created a free Spotfire template with examples of everything in the list above. Download it and review the examples provided. This is by no means an exhaustive list of everything you can do with style attributes, but it will certainly cover many of the common tasks performed in the Text Area. That wraps up this week’s post. Next week, I’ll explain how to create ordered and unordered (bulleted) lists in HTML.
For the DCA Wrangler, you’ll need to have your data organization into monthly values, which is tricky if you have daily production data that you’re working with. The conversion, however, is simple in Spotfire. Follow these steps to convert daily to monthly:
- Select File > Add Data Tables…
- Select Source and choose your existing Daily production data from the current analysis
Before you press OK, we need to add some transformations:
- First, we need to Calculate new column, we need something to aggregate by and in this case it’s ProductionMonth. Use the expression: Date(Year([Date]),Month([Date]),1)
Now add the Pivot:
- for your Row identifiers choose your newly created ProductionMonth.
- for your Value columns and aggregation methods select Sum(BOPD)
- set your Column naming pattern to %V
- if you have metadata to pass through such as well name or API add it to your Transfer columns and aggregation methods
- Review the data and press OK.
You’re all set! Repeat the process to include GAS or NGLs.
To set the stage for this post, here is a simple example clearly demonstrating where we are going. In the Text Area below, 2 lines are duplicated. As you can see, the lines look the same, but the code is different. One is using CSS, and one is not. That’s what this post is all about.
Now, let’s talk about what CSS is and why it’s important.
What is CSS?
CSS stands for Cascading Style Sheets, and it is used to specify the format or style of content provided by the HTML. This might be confusing because it is possible to specify formatting with HTML tags. After all, some of the tags I pointed out in the Intro were tags for formatting, like <b>, <i>, <em>, <strong>, and <font>. That’s what italics and bold are — Formatting!
Really, this was all just one giant mistake in coding history. HTML was not intended to be used for formatting. As W3School notes:
“HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS.”
Why use CSS?
The answer to that question is simple — EFFICIENCY. CSS is how Ruths.ai and Big Mountain Analytics are able to quickly produce beautiful templates. We definitely aren’t formatting each and every button or Text Area. That takes too long.
To demonstrate, download this free template from the Ruths.ai Exchange. In the DXP, right-click on the Text Area in the Terms page, select Edit HTML, and look at the code. It’s using the <style> tag, and CSS attributes control the appearance of the entire DXP.
Now, when building web pages, CSS can control the layout of multiple web pages all at once. When building DXP files, CSS can control the appearance of multiple text areas and other Spotfire elements (like the legend and your buttons) without having to format each and every one of them individually. It also opens up the ability to control formatting where there is no GUI, such as with the legend. Formatting the legend requires HTML/CSS.
How to Use CSS in Spotfire
The DXP example you downloaded uses CSS with the <style> tag, and that’s perfectly valid. For a complete understanding, know that there are three ways or places to write CSS.
- In a separate CSS file (.css extension) — This is only really applicable to building web pages, so don’t even worry about this.
- Inside a style tag — This is what you saw in the DXP download. This is referred to as “inline style” (knowing the right terms to Google is half the battle). In web design, this is not considered a best practice, but we aren’t building web pages.
- Inside an HTML tag using the style attribute.
Which Method to Use
As a Spotfire users, you should familiarize yourself with methods 2 and 3. The next logical question to ask would be — when do I use which method? Here is a quick summary of the pros and cons of each.
- Most efficient
- Reusable across DXP files
- Write a little or write a lot
- Able to access what the GUI cannot
- Need to know how to reference Spotfire elements
- May take longer to build
- Quick and easy to write
- Can be reused
- Must be written for individual tags
- Not as efficient
Style Attribute Syntax
The general rules for style attribute syntax are…
- The style attribute will use property/value pairs.
- The pair must be in quotes
- Separate Multiple pairs with a semicolon.
- Enclose the pair in double quotes.
Style Tag Syntax
Using the style tag, the syntax looks a little bit different. Note the use of brackets and the reference to specific pieces of Spotfire. This is where the waters start to get deep again, so I am going to wrap this post up with the example shown below. A future post will talk about this syntax in more detail.
In conclusion, if you new to HTML and CSS, consider these two suggestions.
- Start using the style attribute immediately in your own work. It’s super easy.
- Review the CSS in the template download. Alter and play with it to develop an understanding of what each element of the code controls in Spotfire.
These two suggestions will go a long way in terms of developing your skills and improving the appearance of your Spotfire projects. Now, this post is getting a bit long, but I wouldn’t be doing a good job if I didn’t talk about syntax.
As always, thanks for reading and feel free to leave comments! Lastly, since I haven’t said it since the intro, don’t forget that once you start editing HMTL, you shouldn’t use the Edit Text Area option. It will wipe out your code.
A key part of analytics in the oil and gas industry is evaluating opportunities at different locations. Space is always present when looking for profitable development projects. We usually look at the already in production wells and try to find some spatial trends. To stay competitive, we need to find better ways to access the data of different areas and its wells. For instance, we can transform the spatial information to compact objects that store the location and shape of each well and lease. These objects can be feed to different calculations and analyses as geometries. For Spotfire, it also has some advantages, you can use the feature layers of the map chart. In this case, we can visualize the leases as polygons and wells as lines.
With the Super Bowl just behind us, it’s time to predict wins for the 2018 NFL Season. At the start of the playoffs, we looked at a model which predicted how many games NFL teams should have won in 2017 and compared our results to Football Outsider’s Pythagorean Win Expectancy. We were able to improve on Pythagorean Win Expectancy for last year’s results, aka how many games a team should have won, but our backwards looking models were unable to beat Pythagorean Win Expectancy in predicting next year’s wins. Today, we will build some models trying specifically to predict how many games teams will win next year.
If you simply want to know how many games your team will win in 2018, strictly for recreational purposes of course, you can skim to the end or check out our Spotfire Template. But, for Football Outsiders fans, those interested in what makes up wins and losses, or those interested in the Data Science process, read on.
Last week, I kicked off a HTML series with the post — Intro to HTML. The Intro article discusses the languages users can employ in Text Areas and introduced the concept of HTML tags. It concluded by specifying a few tags to practice with in order to get comfortable with HTML. This week, I will talk HTML tag attributes because you won’t get very far in HTML without attributes. I started this post thinking I was also going to dive into what CSS is and how it fits in with HTML, but the post got long quickly. That will be the subject for next week. So, let’s look at attributes!
HTML Tag Attributes Examples
I’m going to explain what an attribute is, but before I do that, here are two examples in the code.
<img> — used for images, such as this easy button image
width and height are attributes of the <img> tag
<a> — used to create links
href is an attribute of the <a> tag
Characteristics of Attributes
Now that you know what you are looking at, here are the important things to know about attributes (sourced from W3Schools HTML Attributes).
- All HTML elements (tags) can have attributes.
- Attributes provide additional information about an element.
- They are always specified in the start tag.
- Attribute syntax is usually a name/value pair like: name=”value“. Separate the name from the value with an equals sign and put the value in double quotes.
- <h1 align=”center;”>Header</h1>
- <p align = “center;” </p>
- <a href=”hope.html”>Computer Hope</a>
- Add multiple attributes to a single tag. Separate them with a space as shown in Example 1.
- Some attributes can be used across multiple elements, such as the align attribute shown above. Other attributes may be unique to a tag.
- Not all tags and attributes are supported in Spotfire.
Googling attributes for individual tags is very easy, and W3Schools has a great attribute reference. To help you get started, here is a list of a few common attributes that users will employ in Spotfire.
- Attributes for <div>, <p> and <h1-h6>
- align — to specify text alignment
- Attributes for <img>
- height — to specify the height of images
- width — to specify the width of images
- border — to specify whether or not an image should have a border and how thick it should be
- Attributes for <hr>
- size — changes the size or width of the line
- color — changes the color of the line
- Attributes for <font>
- size — changes font size
- face — changes font style
- color — changes font color
Here is an example of each of these attributes.
Now, I am intentionally not diving very deep into attributes, and that is because next week, I will talk about CSS and formatting. You will do much more with CSS than with simple HTML tag attributes. Until then, take a look at the tags used in your existing DXPs. Google their associated attributes and see what you can add to the Text Area.