Advertisement
  1. Computer Skills
  2. App Training
Computers

How to Turn Your Data Into Interactive Tables with Silk

by
Difficulty:BeginnerLength:LongLanguages:

Raw numbers and information on their own aren't very informative. Put them into detailed charts and tables, and they get far more useful. Then, turn them into charts and make the tables interactive, and you've got the basics of a data mining setup that makes your information come alive.

Silk is a web app that makes it easy to turn your data into interactive tables and charts, and then share them with anybody via a mini webpage. You can use that to analyze information about anything from the data about the books you own to restaurants in your hometown to a comparison of the spending habits of the best and worst charities—and anything else you compare with sets of data.

In this tutorial, I will show you how to get data into Silk and automatically turn it into charts, tables and maps. I'll then show you how to share what you create, both by turning your data into a mini website, and by embedding it anywhere else on the web.

To make it easy to follow along, I'll be working with some data about made-up pizza restaurants in London. You can download the attached Fake-Pizza-Restaurants.csv spreadsheet to use the same data to follow along, or use your own data if you'd like.

Get Data Into Silk

First things first, you'll need to sign up for a Silk account. You'll be asked for the usual details such as email address and password, as well as a name for your Silk site. A URL will be generated for you based on the name you choose, but it can be changed to something else if you want by clicking change below the Site name text field.

Once you've signed up, you'll be presented with the Dashboard screen. This is where you can add and edit your data.

silk dashboard
Creating a collection in Silk

Silk structures data in an intuitive way, but uses its own names for things, which can be a little strange. If you imagine your data is in a spreadsheet, it's easy to translate the Silk terms into spreadsheet terms:

  • A collection is like a table; it's a collection of related "things", like the pizza restaurants in my example.
  • A page is a row in the table; it's a single entry in the data set. A page in the pizza restaurant example is a single restaurant.
  • A tag is a property, like a column in the table; it's a data point about an entry. The pizza restaurant example has "address", "Yelp rating", and "Delivery" as tags.

Enter Data Manually

If your data set is quite small, or isn't already in a spreadsheet, you may want to enter it into Silk manually.

1. Create a collection

At the top of the Dashboard page you will see a text box labelled Create your first collection. Type the name of the collection and click the Add button. Make sure to use the singular form of the word you use, such as "restaurant" instead of "restaurants".

add collection to silk
Naming a collection

2. Add pages

Once you've added your collection, the dashboard will update to allow you to add pages to that collection. For each of the entries in the data set, type the name for the page corresponding to it. This is usually a name, or sometimes another kind of identifier (a Silk about TV episodes might use the season number and episode number as a page title, for instance).

add places to set
Add places individually to your set.

3. Add tags

Now comes the time-consuming part: adding tags to each of the pages in the collection. To add tags to a page, click the page in the list to go to its edit page. For the first page, you'll have to click Add your first tag to get started. Then type in the name of the tag, which corresponds to the name of the column in the spreadsheet analogy. Next, type in the value for the current page—the value in the cell of the spreadsheet.

add tags in silk
Add as many facts as you want

You can use the Tab key to move between tag names and values. If you are currently editing the last tag in the list and press Tab, a new tag will be created automatically. If a tag can take multiple values like a list, hit Return between values and you can add multiple values as a bullet list. Once you've finished adding tags to a page, click Save page in the top right corner of the page, and then click Dashboard in the top left corner to return to the dashboard to edit the next page.

When you edit subsequent pages, the names of any tags you've used before will be shown on the edit page; these can be added by simply typing a value for them.

add tags in silk
A blank fact sheet pre-filled with the data options you added in the first entry

Import From CSV

If your data is in a spreadsheet and there are a lot of entries, it will be much quicker to import it into Silk automatically from a CSV file.

1. Prepare the spreadsheet

If there isn't one already, add a header row at the top of the table with names for each of the columns. This is how Silk determines the names of the tags to create. Then, make sure there is a column where each entry has a unique value. These will be used as the names of the pages.

2. Export and upload the CSV file

Use the export feature of your spreadsheet app to export as a CSV file; you may have to select the Save As option and then choose CSV from the drop-down list of file types. Then, in the Dashboard page on Silk, click Import CSV on the left-hand side.

Import CSV to silk
Upload your CSV spreadsheet of data

Drop your CSV file onto the box, or click the box to choose it from the file chooser. You'll be shown a preview of the pages that will be imported. At the top, type the name of the collection to create from the CSV.

Check your import
Check your info import

Check that the preview matches what you expected. If a tag contains a list of values, click the pencil icon next to it and choose Convert to multiple tags. Each of the items in the list will be separated out into a separate tag, in the same way as when pressing Return when entering the data manually.

Convert text to tags in silk
Convert your tags from your spreadsheet.

From the drop down list below the preview, select the tag to be used as the page name; this should be the column of unique values you created earlier. When you're happy with the preview, click Next and your data will be imported.

choose page name in silk
Choose the column with your page titles

Visualize Data

There are many different ways to visualize data in Silk. I'll be going through the three main ones: charts, tables and maps. The other forms of visualization work in a similar way, so the techniques can be applied to those, too.

To get started, from the Dashboard click Explore this collection below the name of the collection you want to visualize. You'll be taken to the Explore page, which allows you to create charts, tables, maps, and more with your data.

view data in silk
Jump into your data

Create a table

If Table isn't already selected in the blue box in the top left corner, click it and select Table from the top of the drop down list. Add columns to the table by clicking Add column and choosing a tag from the list. They'll be displayed in the order you add them.

customize table
Make the table look the way you want.

If you want to only display rows that match certain criteria, choose Filter in the top left (above the blue Table button) to access the filters menu on the left. Add a new filter by clicking Add filter and choosing a tag to filter by.

Tags can be filtered in different ways; click the '3 bars' button in the top right corner of the filter box and select a type. Different types include simply rows where the value is not empty, rows where the value contains some text, and rows with a numeric value in a specified range.

filter table
Filtering your data

The table can be sorted by any tag by clicking More on the right hand side and choosing a tag to sort by from the drop down list. If your data set is large, you can limit the number of entries shown using the Maximum items option.

more table options in silk
Choose how to sort your data

Create a chart

Choose a type of chart—either column, line, or pie—from the blue box in the top corner by clicking it and selecting from the drop down list. Then, choose tags to display by selecting them from the drop down lists along the top. A column chart and a line chart can use more than one tag, but a pie chart can only display one. Only numeric tags can be selected for charts.

tweak silk page
Tweak your Silk 

Charts can be filtered in the same way as tables using the filters menu on the left. Charts can also be sorted in the same way as tables by clicking More on the right hand side.

Create a map

Choose Map from the blue box in the top corner by clicking it and selecting it from the list. Then, choose a tag that represents a location by clicking Add location and choosing it from the list. Silk uses the Google Maps API to display locations, so tag values should be in a format that would give good results in Google Maps. Exact addresses such as "58 Mornington Terrace, London NW1 7RU" are best, but more general values such as "Manhattan" or even country names will work too.

Click More on the right hand side to set more options:

Silk map options
Pick your map options
  • Number plot changes the regular Google Maps pins to circles, the size of which is dictated by the tag you choose. It's a good way to show the locations of things whilst also showing other data at a glance.
  • Show on popup lets you choose tags to display in the popup which appears when you click on a pin on the map.

The same sort and size limit options as for charts and tables are also available.

Share Data

The main point of using Silk is to share data with other people. There are two ways: by giving people access to the Silk site itself, and by embedding a single chart, table, or map on another website.

Use the Silk site as a mini-website

Silk doesn't have the most sophisticated site building tools, but it lets you customize pages enough to share data with others.

To get started editing the site, click its name in the top left of the page. You'll be taken to the homepage of the site, where you'll see an orange Edit homepage button in the top right.

edit site in silk
Your mini website from Silk

Wherever you see a plus icon, you can add one of many different content blocks. Under Content are options like text, images, videos and audio. Charts, tables, and maps can be added under the Visualization section. Finally, some metadata can be added, such as recently added pages or a table of contents, under Overview.

add content to silk site
Add the content you want to your site

If you don't want to keep the blocks that are added by default, hover over them an an X will appear to the upper left of them. Click that to remove that block.

Each of the blocks is easy to use. For the Image and File blocks, you can drag and drop onto them to upload, or click them to select from the file chooser. For Video, Audio and Embed, just paste a link to the content. The Twitter block takes a Twitter username and uses it to show tweets from that user.

When you select a block from the Visualization section, you'll be taken to the familiar screen that you used before to create visualizations. When you finish building, click Done in the top right corner and whatever you've created will be placed on the page.

Once you've finished editing a page, click Save changes to see what it looks like as a finished web page.

Every page can be edited in the same way, meaning that the Silk pages representing your data can be more than just entries in a database. For example, on each of the pizza restaurant pages, I may want to add some text about the restaurants and some images.

Embed visualizations on the web

Instead of using Silk to create a website, you may just want to use it to create a few charts or maps and embed them somewhere else on the web. To do that, from the Explore page, create the visualization you want to put on the web and click Share & embed.

The Twitter and Facebook options let you share a link to just that chart or table. The link simply takes visitors to the same Explore page you clicked Share on.

embed your silk site
Copy your embed code to put Silk in your site.

The Embed option gives you the HTML code necessary to display the chart or table on another site. Just copy it and paste it into the HTML code for your page (most CMSes like WordPress, Tumblr, Squarespace and more will let you do this).

Conclusion

In this tutorial, I have shown you how to import data into Silk, and then create visualizations and share those with others. I've only touched upon the various ways Silk can help you analyze data, but using these tools, you can make your own unique tables and visualizations that make your own data come to life. 

There's so many ways you can put a tool like Silk to use to help analyze your data. For some ideas, check the Silk Examples page, as well as their Silk Blog which includes unique ideas for putting Silk to work and ways to get more out of it.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.