Workflow Streamlining Tool for Chart-Making

JOUR 116 Class—Sac State
Spring 2024

A row of colorful square buttons underneath a rectangle containing a line graph

Problem and Solution

Problem: For students in JOUR 116 (Data Visualization), building charts with Datawrapper can be tedious and time-consuming. To use custom colors, students have to copy HTML color codes from another website.
Solution: A simple webpage in a pop-up window that sits underneath Datawrapper, functioning like a hotbar that’s accessible at all times, allowing students to copy HTML color codes immediately with one click.

Skills Demonstrated

Technical skills: HTML, CSS, Javascript, debugging
Soft skills: Creative problem-solving

Results

The professor praised the program as a resourceful way to complete assignments more efficiently
The program substantially streamlined the process of making charts with Datawrapper

Description

A simple webpage that opens in a pop-up window, which can be placed underneath Datawrapper like a hotbar. The page contains a single row of buttons that automatically copy HTML color codes to the user’s clipboard when clicked. The buttons’ colors have been pre-selected to meet the needs of the JOUR 116 class. The program eliminates the need to switch tabs to other websites with bulkier color pickers such as Canva and Color Brewer, which were recommended by the professor.