Visualization is a relatively new field, but we seem to be developing an understanding of what it is and what it can be used for. This year, we refined existing methods. With less emphasis on novelty of visual forms, we focused more on what we wanted to communicate.
I’m looking forward to what the next decade brings.
As I do every year, I picked my ten favorite visualization projects. Here they are in no particular order.
Best Blend of New and Vintage
3D elevation 1878 USGS Yellowstone Geology Map
Just look at it. It’s a blend of tools and a blend of new data and vintage documents. Scott Reinhard found the perfect balance. [See the Project / On FlowingData]
Best Font Doubling as Commentary On Gerrymandering
Gerry
Gerrymandering is often presented as a technical topic that sometimes makes people’s eyes glaze over. Gerry, a font by Ben Doessel and James Lee that used actual district boundaries for letters, distilled the topic down to its WTF-ness. [See the Project / On FlowingData]
Best Climate Change Alarms
Climate Coverage by The New York Times
Climate change is difficult to cover for many reasons, but from a data point of view, you have to deal with scale, reader preconceptions, relatability, and immediacy. The New York Times came at it from many angles. I hope they keep going. [See the Project / On FlowingData]
Skittles packages say the following: “No two rainbows are the same. Neither are two packs of Skittles. Enjoy an odd mix.” Possibly Wrong was like, yeah right. They did the math and put it to the test. [See the Project / On FlowingData]
Mapping America’s wicked weather and deadly disasters
For The Washington Post, Tim Meko made a series of maps, each conjuring the aesthetic of the natural disaster it represented. [See the Project / On FlowingData]
Best Atlas of Things in Space
The Atlas of Moons
National Geographic went all out to show the interesting moons in our solar system. Spinning things, orbits, craters, oh my. You might want to run this on a modern browser and a good computer for maximum effect. [See the Project / On FlowingData]
Best County-to-Bubble Transition
Try to impeach this? Challenge accepted!
There was an election map going around that was meant to represent strength in numbers. Karim Douïeb used an apt shape transition to show a different perspective. [See the Project / On FlowingData]
Best Unexpected Use of R
Genesis
I thought I knew what you could do with R visually. Thomas Lin Pedersen’s generative art experiments surprised me. [See the Project / On FlowingData]
My original plan was to pick my favorites for the decade, but I just couldn’t bring myself to do it. There’s too much good work. It felt too permanent, and my favorites can easily change based on when you ask me. If I liked something, I posted it.
Update 12/14: This post spurred a lot of discussion on Hacker News and Reddit. I collected some of the suggested projects and put them in a list at the end of this post.
I talk to a lot of students and professional developers that often want to start a side project, but aren’t sure what to build. Below is a handful of software projects that taught me a lot. In fact, they’re great because you could build them multiple times and learn new things each time. So whenever I don’t know what to build or I want to learn a new programming language or framework, I start with one of these:
Text editor
2D game – Space Invaders
Compiler – Tiny BASIC
Mini operating system
Spreadsheet (hard!)
Video game console emulator (hard!)
Text Editor
We use text editors everyday, but do you know how it really works? Ignoring all of the fancy features that your favorite editor has, how would you implement a textbox that supports a movable text cursor and selecting, inserting, and deleting text? No, you can’t use the builtin textbox component from your favorite GUI framework!
The biggest challenge is figuring out how to store the text document in memory. My first thought was to use an array, but that has horrible performance if the user inserts text anywhere other than the end of the document. Luckily, there are some nice data structures to learn to solve this.
Another hurdle was learning how a text cursor behaves in popular editors. For example, if I press the up arrow key with the cursor in the middle of the document, where will the cursor move? Same column? Not if that line is shorter. Keep pressing up. The cursor will snap back to the original column once a line is long enough. It turns out that the cursor has a memory for the column and tries to get back to it. It is these details that I never noticed until I tried to implement it.
After implementing the basic editor, I challenge you to implement two more features: undo/redo and word wrapping. Implementing undo/redo in an efficient way was mind blowing to me! I first tried keeping an array of previous states, then tried the Memento pattern, before finally settling on the Command pattern. Word wrapping forces you to separate the visual aspects of a text line from the memory aspects.
Even the most simple games require some unique data structures and design patterns. The idea here is to implement a well-defined game from start to finish without getting bogged down on the other fun stuff (e.g., game design and art). Also, it is best if you use a barebones 2D graphics library (e.g., SDL, SFML, PyGame), not a big game engine that’ll hide all of the interesting bits from you.
First, you’ll have to learn to draw to the screen. I had no idea how this worked. You are actually clearing the screen then drawing each portion of the screen in rapid succession, many times a second, to create the effect that objects are moving.
Second, you’ll learn all about the game loop. A game is effectively looping between drawing, getting user input, and processing the game logic.
Third, you’ll learn how to process user input. I never paid attention to the subtlties of initially pressing, holding, and releasing keys or mouse buttons, let alone handling things like a double click. And how often do you check for user input? If you are constantly checking then that means the rest of the game is frozen!
Fourth, you’ll learn how to create and manage all of your game objects and their state. For example, how do you generate a dynamic number of enemies? The factory pattern helps a lot.
Fifth, you’ll learn how to apply the game’s logic. When do bullet positions get updated? When do more enemies come onscreen? How do you know when an enemy is destroyed? When is the game over? I had never used the modulo operator prior to making games but it is littered all over my games’ code.
Once you get the basic game working, add a title screen menu, a game over screen, make sure the game runs at the same speed even on different computers, and explore how to implement more interesting enemies with AI. Still not enough? Add shader effects, sound, and online multiplayer!
Things to learn:
Drawing to the screen.
Handling user input.
Game loop.
Creating and managing a dynamic number of objects (e.g., factory pattern).
The 8 lessons I learned from releasing 8 video games (web)
Compiler – Tiny BASIC
The most-eye opening projects I have worked on are compilers. Even now, if I have a free Sunday afternoon to do some coding, chances are it is a compiler. It is a great feeling when you create something that enables others to create more things. By implementing one I had to learn so much more about the intricacies of compilers that I normally would never think about (e.g., when do expressions get implicitly type converted).
I suggest writing the compiler from scratch for a very small BASIC-like language (see Tiny BASIC) and compile to any other language that you know well. For example, you could write a Tiny BASIC compiler in Python that outputs C# code. It does not have to output assembly or C! Avoiding those will let you focus on the compiler itself.
The first hurdle is figuring out how to lex (or tokenize) the input code. Then you will parse the code, that is check the structure of the input and produce a tree representation of the code. The recursive descent parsing technique is beautiful! Next you will semantically check the input, ensuring the code makes sense and that the type rules are being followed. Finally, you can generate output!
This project has a ton of existing resources to help you, and a simple compiler can be completed in a few days. Don’t let the jargon scare you. Plus the possibilities are endless to what you can add! Once you have the basic compiler working, you can add a standard library (in PeayBASIC I added simple 2D graphics functionality), optimization passes, and improve the error messages. Finally, you should write some example programs in your own language to show off to the world!
Over the years I have found myself applying fundamental concepts from operating systems to a variety of domains, like games and even predictive models of human behavior. In a classroom setting the algorithms and data structures used by operating systems might seem abstract or useless, but they really are useful. Implementing an operating system also helped me understand far more about what is going on under the hood.
There is a bit of a learning curve and some barriers to get started since it is dependent on hardware. However, by following a book or tutorial then you should be able to get a bootable OS working that can run your own programs. I highly recommend my colleague’s free online book, Making a RISC-V Operating System using Rust.
Still not difficult enough for you? Try these two projects:
Spreadsheet
A spreadsheet application, like Excel, combines some of the challenges from a text editor with those of a compiler. You’ll have to learn how to represent the cell contents in memory and implement an interpreter for the programming language used for equations.
Writing an emulator (or virtual machine) for a video game console combines the challenges of writing a compiler, an operating system, and a compiler all into one. It is quite rewarding to play a real game made by someone else with your emulator!
Emulating a real video game console means writing a virtual machine that pretends to function just like the actual CPU and other hardware components. This allows you to run games designed for the video game console with your emulator.
I recommend starting by emulating CHIP-8, which is a simple, fictitious console, before moving on to a real video game console. The NES, SNES, Gameboy, and Gameboy Advance are all quite feasible to emulate, with a far amount of documentation and open source emulators already, though they each have their own quirks to make things interesting (e.g., certain games may rely on undocumented bugs/features of the specific hardware). There is also the PICO-8, which has become a very profitable “fantasy” console.
This practice project/Client brief is the third one in this series from UX Design Mastery after the one for a Blog website and an eCommerce project.
Design portfolio projects for UX and UI designers
Included in each design brief is the following:
Objectives(What is REQUIRED by the client. This part usually trips designers up as they go off designing what is not required)
Timeline(For this to be realistic each brief has a timeline that is as close to real-world work as possible)
Platform(Where your designs will live. Understanding these platforms will give a well-considered solution)
Target audience (Users always come first and the design must accommodate the target audience’s pain points)
References(If you are not sure where to start, clients normally give a set of examples or references they like. The closer the design solution is to the references, the fewer revisions a designer will have to do)
Deliverables(Most importantly how the solution should be delivered. These represent what a well-detailed portfolio case study looks like so hit it out of the park)
Recruiter advice(Portfolio advice from creative directors, CEOs and leading design creatives from the biggest companies)
A little about me
Creating a portfolio project is hard work.
I still remember when I did not have a single project in my portfolio that would really make me stand out and get noticed by recruiters.
I had just left my job as a Java Developer and was about to put all my effort into starting a design career.
One of the very first successful projects I created was a conceptual mobile app for a local airline. I had recently been on a trip which was frustratingly delayed and poorly communicated to passengers.
So I decided to creatively express my opinions through a conceptual project and it was responsible for me getting hired for my first design job.
Its also my most appreciated project .
I hope this travel app project you work on, provides you with as many opportunities as I have received.
Let’s get into it
Design Portfolio Project 3: Travel App
Client Brief
Client: Choose any travel brand of your liking
Timeline: 1–2 Weeks
Objectives
Create a mobile app design that can: • Allow a user to book a flight, a hotel and car on a specific date for different destinations • Find the best deals on flights, hotels and car hires • Ability to select holiday activities • Organize all travel plans into one itinerary • Notifications
Platform
Please design a travel app for either iOS or Android. So we require mobile screens. Pay attention to
• Research (refer to references provided) • Highlight 3 enhancements or unique features you have included to make our app stand out and solve user pain points • Sketches of initial ideas • Wireframes • Visual mockups screens of ⁃ App Onboarding ⁃ Home screen where a user can book a Hotel, a Flight, a Car or an activity in a popular city ⁃ Listing page of Hotels ⁃ Map view showing hotels location ⁃ Itinerary screen ⁃ Possible notifications
• Results section: Feedback from testing with 5 random people • Fonts: Brand related • Colors: Brand related • Link to this project
Nice to have
Video walkthrough (Screen record using QuickTime an Invision prototype interacation)
Pro-tip
Go through an entire booking experience to understand how the app is design.
Advice from recruiters
I wish more portfolio websites included little descriptions of what the designer’s role was in a specific project, or even pointed out some specific problems or personal thoughts about aspects of their designs. Too many portfolios now are just vanity shots and client name-dropping without actually communicating what was done.
James Cabrera, Senior Product Designer, Refinery29
Going the extra mile and making sure it’s easy to consume, well-presented, and filled with helpful context about your projects tells us a lot about your communication skills. Ideally a portfolio should be more than just a collection of pretty thumbnails and mockups — it should speak to your problem solving skills.
Ryan Le Roux, Metalab
If you’re just starting out as a designer, a good alternative to unsolicited redesigns are personal projects. These self-initiated projects are a great way to build up your design and product skills, while also putting something out into the world for people to use. You’ll learn a ton from the experience of launching something and the feedback you’ll get from your users will definitely make you a better designer.
Elyse Viotto, Shopify
If you are interested in gettting the PDF download and four extra example case studies of award winning Travel app projects download below.
Side projects are a great way for designers and developers to develop their skills, try new technologies and build their personal brand.
Today I hope to set out why businesses should also work on side projects and show the benefits they bring to both your company and their employees. I’ll then suggest a few ways, with examples, in which side projects can become part of your companies workflow.
Without further ado, let’s get started.
Utilise spare capacity
There are many situations in an agency where you might find yourself with a few hours spare, this could be while waiting for client feedback or after launching a big project.
Side projects are a great way to utilise this spare time as you can take advantage of these typically unproductive periods to learn new skills that benefit future projects, build revenue-generating products or market your company.
Onboard new hires to your technology stack
As a design and development studio, we have a range of internal tools and technologies that help us get projects off the ground such as Baseline, a framework for starting website builds (Read about our transition from jQuery to ES6) or Blueprint, our UX starter kit.
Naturally, when we hire people, they will need to learn our technical setup and workflow process, therefore, side projects are a great way to acclimatise a new hire, junior designer or developer to your setup without the added pressure of pushing code to production or designs to clients.
Explore new technologies and tools
With what seems like a new JavaScript framework or design tool coming out every month, it can feel like you’re falling behind if you’re not using the latest and greatest.
Side projects are a great way to test new technologies and tools in small doses. From this, you can evaluate the new technology in a risk-free environment to see if it’s worth adopting into your main workflow.
By doing this, you’ll be able to optimize your workflow with the best tools, upskill your team and potentially offer new services to clients.
Marketing
Marketing your agency or startup can be hard, adverts can be a cash-devouring black hole if you don’t know what you’re doing and other methods like networking are not for everyone.
Side projects are a great way to market your company using the skills your team already possess. Your aims could be to generate publicity, find new leads or create additional streams of revenue.
Compared with some other forms of marketing, side project marketing has the ability to produce asymmetric returns as they can be a drain on resources up front, but once finished they will continue to generate returns well into the future for little cost.
Crew: A great example of this method is Crew, a startup that was a marketplace for freelancers. They created an internal side project called Unsplash so their users could upload spare photos from their photoshoots. Unsplash exploded, bringing huge amounts of attention to the Crew platform. It was eventually spun off into its own company.
InVision: Another example is Do by Invision. Do is part of Invision’s free design resources and is a mobile UI kit for sketch and photoshop. To get the kit, you have to enter your email and they’ll send you the download link. From this, they can email you about new products with the aim of eventually converting you into a customer, it is effectively a lead generation tool.
Innovation
Side projects can often be a playground to experiment with ideas, test assumptions and gain valuable insights into areas that are not your primary business. These learnings can then be applied back to your core business which may end up giving you a competitive advantage.
Sometimes a side project can take on a life of its own, history is riddled with cases where the internal project becomes the core business or where companies have sold them for a huge profit.
Glitch: A great example of a company that pivoted from its core business to a side project is Glitch, a multiplayer online game that built an internal chat system. The game eventually failed but the chat system ultimately became Slack. In 2019, Slack went public with a valuation of at least $16 billion.
Hoptoad: Sometimes, a side project may succeed but may not get the love it deserves internally. Thoughtbot, a design and development studio created Hoptoad, a tool to monitor website errors. A few years later they released it as a service under a new name, Airbrake. Airbrake proved successful as its own business but wasn’t the focus of the Thoughtbot team, therefore, they decided to sell Airbrake for an undisclosed amount about four years after launching.
So, you’ve read about the benefits of implementing side projects within your company, how exactly do you go about working it into your process? Here are a few common ways companies manage to do it.
Spare capacity
As mentioned above, the simplest way is to build projects when there is no other work to do. This is easy to work into your schedule and if planned properly, can be a very efficient use of your time and resources.
Hackathons
A more purpose-driven approach to creating side projects is to have a dedicated block of time where attention can be solely devoted. Again, with proper planning and focussed attention on a particular problem, the likeliness of successful projects is greatly increased. Facebook’s ‘like’ feature was famously created in an internally led hackathon.
For more information on how to run a hackathon, check out hackathon.guide.
20% time
A more laissez-faire approach is 20% time, which is a guide to how much time an employee should dedicate to projects outside of their main projects. 20% is a lot of time that may not be available for projects that might not instantly benefit the company, therefore, a popular alternative is to set aside Friday afternoons for this kind of work.
Google is the famed example of 20% time, where they are encouraged to “spend 20% of their time working on what they think will most benefit Google”. Projects such as Google Maps, Gmail, and Adsense initially started as internal side projects which ultimately grew into large parts of Google’s core business.
Here at Inktrap, we’re always coming up with ideas for projects, whether that’s at lunch or down the pub after work. Here are a few things we’ve made at Inktap:
Pixel Jobs
Pixel Jobs is a project born out of our bad experiences, as a company, using existing job boards in London. We think both the employer and job hunter experiences can be improved through thoughtful UI design and transparency within job listings.
After a soft launch earlier this year we’re now iterating on our ideas based on what we’ve learnt so far.
Blueprint is a Sketch wireframe kit that we use internally for the early stages of our client projects. We decided we wanted to release the kit (for free), therefore, we productised it by designing and building a landing page. We used the build to onboard a new developer to our development stack and the product is now used to generate publicity for Inktrap.
Another of our side projects was our Planets and Space Illustration Set. We have some very talented illustrators here at Inktrap such as Rachel Brockbank, therefore, after noticing a gap in the market, we decided to create a set of illustrations to plug that gap.
Thanks for reading, hopefully, I’ve at convinced you to at least look into integrating side projects into your companies workflow.
Also, another of our side projects, if you’d like to keep up-to-date with the latest design, tech and other fun news, sign up to our weekly design newsletter Minimum Viable Publication. What do you think of our newsletter? Have we missed any great news? Let us know, follow us on Twitter and drop us a tweet!
In this short intro, I won’t go back to the history of the Vue.js or some statistics on the use of this framework. Now it is a matter of fact that Vue is gaining popularity and projects listed below are the best evidence of its prevalence. There are more than 20 Vue.js open-source projects in this article. The goal was to make this list as varied as possible. So here we go!
Prettier reprints your code in a consistent style with several rules. Using a code formatter you don’t have to do it manually and argue about what is the right coding style anymore. This code formatter Integrates with most editors (Atom, Emacs, Visual Studio, Web Storm, etc. and works with all your favorite tools such as JavaScript, CSS, HTML, GraphQL, etc. And last year Prettier started to run in the browser and support .vue files.
Developers of all skill levels can use iView but you have to be familiar with a Single File Components (https://vuejs.org/v2/guide/single-file-components.html). A friendly API and constant fixes and upgrades make it easy to use. You can use separate components (navigation, charts, etc.) or you can use a Starter Kit. Solid documentation of the iView is a big plus and of course, it is compatible with the latest Vue.js. Please note that it doesn’t support IE8.
A tab page gives easy access to RSS feeds, weather, downloads, etc. Epiboard focuses on customizability to provide a user with a personalized experience. You can synchronize your settings across your devices, change the feel and look and add your favorite bookmarks. This project follows the guidelines of the material design. The full list of the current cards you can find on the GitHub page.
Light Blue is built with latest Vue.js and Bootstrap has detailed documentation and transparent and modern design. This template is easy to navigate, has user-friendly functions and a variety of UI elements. All the components of this template fit together impeccably and provide great user experience. Easy customization is another big plus, cuts dramatically development time.
This security scanner was built with Vue.js and Ionic. It runs security checks and keeps passwords safe. So how this check is working? Beep simply compare your data with all the information in the leaked credentials databases. Your passwords are safe with Beep thanks to the use of the SHA-1 algorithm. Plus this app never stores your login and password as it is.
What do you need from an admin template? You definitely need classic look, awesome typography and the usual set of components. Sing App fits all these criteria plus it has a very soft color scheme. A free version of this template has all the necessary features to start your project with minimal work. This is an elegantly designed dashboard can be useful more the most of web apps like CMS, CRM or simple website admin panel.
This is straightforward and clean template will speed up the development process of your online shop. It allows you to organize tons of products and display product image on every screen of any device. It is adaptive and fully compatible with all modern browsers.
DynamoDB is a NoSQL database applicable in cases where you have to deal with large amounts of data or serverless apps with AWS Lambda. This GUI client gives remote access plus supports several databases at the same time.
With this solution, no webserver, install or database needed. This simple chart can be edited in excel or webpage. You can easily search for a particular manager or department. Also, there are two options for usage. First as a static website. This option is suitable for you if you want to use vueOrgChart without modification. If you are planning to build your own chart on top of this project you will have to study the section “Build Setup”.
This library helps you to create a simple icon. The first step is to pass in a configuration, and second, choose the format of your icon. You can choose JPG, PNG or SVG format. As you can see in the screenshot you can choose any font from the Google Fonts.
There is not much to say about this app. It is minimalistic, works on a browser locally, stored in localStorage and the file is only 4Kb. It is also available for Mac OS but the file form 4KB becomes 0.45 Bb. But it is still very lightweight.
Directus is a very lightweight and simple CMS. It has been modularized to give the developers the opportunity to customize it in every aspect. The main peculiarity of this CMS is that it stores your data in SQL databases so it can stay synchronized with every change you made and be easily customized. It also supports multilingual content.
The creator of Vue.js, Evan You, created this simple site generator. Minimalistic and SEO friendly it has multi-language support and easy Google Analytics integration. A VuePress site is using VueRouter, Vue, and webpack. If you worked with the Nuxt or Gatsby you will notice some familiarities. The only difference is that Nuxt was created to develop applications and VuePress is for building static websites.
This project has an impressive showcase list. The main peculiarity of this generator lies in the way pages are generated. It simply grabs you Markdown file and displays it as a page of your site. Another big plus of this project is a full-text search and API plugins. It supports multiple themes and really lightweight.
This well-known tooling was released by the Vue team. Please note that before starting to use it you should install the latest version of Vue.js, Node.js, NPM, and a code editor. Vue CLI has a GUI tool and instant prototyping. Instant prototyping is a relatively new feature. It allows you to create a separate component. And this component will have all “vue powers” as full Vue.js project.
SheetJS is a JS library that helps you to operate data stored in excel file. For example, you can export a workbook on browser-side or convert any HTML table. In other words, SheetJS doesn’t involve a server-side script, or for example AJAX. This the best solution for front-end operation of two-dimensional tables. It can export and parse data and run in node terminal or browser side.
Almost any framework provides developers with a suitable devtool. This is literally an additional panel in the browser which very differs from the standard one. You don’t have to install it as a browser extension. There is an option to install it as a standalone application. You can activate it by right-click the element and choose “Inspect Vue component” and navigate the tree of components. The left menu of this tool will show you the data and the props of the component.
This component has a spreadsheet look, can be easily modified with a plugin and binds to almost any data source. It supports all the standard operations like read, delete, update and create. Plus you can sort and filter your records. What is more, you can include data summaries and assign a type to a cell. This project has exemplary documentation and was designed as customizable as it needs to be.
Vue.js provides great templates to help you start the development process with your favorite stack. This boilerplate is a solid foundation for your project. It includes the best project structure and configuration, optimal tools and best development practices. Make sure this template has more or less the same features that you need for your project. Otherwise, it is better to use Vue CLI due to its flexibility.
What is great about this Material Design Framework is truly thorough documentation. The framework is very lightweight with a full array of components and fully in line with the Google Material Design guidelines. This design fits every screen and supports every modern browser.
This project is very simple and does exactly what is said in the description line. It’s a collection of CSS effects. You can see a preview of each effect and click on it. You will see a pop up with a code snippet that you can copy.
This is a collection of linear gradients which allows you to copy CSS codes. The collection is community contributed and has the opportunity to filter gradients based on preferred color.
