Here are some studies of Maps and Data-Binding. The interactive products below use HTML, CSS, JavaScript, and JQuery; Python and Node.js was used to filter and reformat datasets. Vue.js is supported by modern browsers. Additional technologies are listed under each item.

Credits – I used the following Code Libraries: D3 created by Mike Bostock. Note: D3 works with modern browsers; therefore, it does not work with Internet Explorer (IE) 8 and below.

• Knowledge Graph
  • Visualization that shows the relationships, similar to Databases, Nodes and Vectors.
  • For example, this shows Lord of the Rings.
• Collapsible Tree
  • Visualization that shows the relationship between movies and its brand and franchises
  • For example, under Action is the Bourne series, and under the Bourne series, you can view each of its movies.

• Sunburst
  • This graphic uses the same data set as the Collapsible Tree (above).
  • Different visualizations of the same data can emphasize (for the audience) certain key aspects of the data.
  • For example, the Collapsible Tree shows the parent-child relationship in franchises while the Sunburst visualizes the Gross Profit (GP) shown by the size of each pie wedge.

• Vue.js Website (in progress)
  • Data Binding, modular programming
  • Search Engine
  • Subject: Interactive Map as Banner

• Vue.js: Sticky Note
  • Includes: To Do List
  • Date: Day, Month, and Year
  • Second Version with Animation
  • Vue.js is supported by modern browsers but not older browsers (e.g. IE)
  • When click on Add ( + ) button, for privacy reasons, the website does not keep the items you are adding to the list once the browser is refreshed.

• Vue.js Designs (in progress)
  • Design 1: using Bootstrap
  • Subject: Emerging Technologies

• Bar Chart
  • Visualization that shows the relationship between Movies, its Brand and Franchises
  • Uses Tooltip
  • This is the same Bar Chart and contains simple Animation
  • A third Bar Chart with Randomly-generated Data

• Line Chart
  • Visualization of Temperatures: showing highs, lows, and precipitation using a Drop-down menu
  • Visualization of Drug-related Deaths in U.S.: Animation emphasizes the climbing numbers in the past decade

• Pie Chart
  • Visualization of Grants by Gates in 2009 and 2010.
  • Uses a Tooltip and Toggle (for On and Off)

• Treemap
  • Visualization of the amounts of Water Use in Virginia in 2005 in Gallons per Day. The water originates from the Ground or Surface. It is then used by various entities (e.g. thermo-electric cooling or commercial/industry). It is then disposed by evaporation or returns to the Ocean.
  • Treemaps offers a different way of viewing data versus a Pie Chart (see above)

• Sankey Diagram
  • Visualization of Water Flow in Virginia in 2015 in Gallons per Day. (as compared to the Treemap of the Water Use.
  • This graphic emphasizes how the same water flows from its source to its use to its disposal.

• D3 Loom Diagram
  • Loom Diagrams show the relationship between two entities, such as how many times a Character’s name appeared in each Chapter. This specific case shows how many times the character’s name ‘Scrooge’ appeared in Chapter 1 of “A Christmas Carol”.
  • The same dataset can be shown in a Line, Bar, or Pie Chart. I have added a Loom Visualization for the sake of variety.
  • Other datasets that can be shown are the Line Chart on Temperatures.
  • I also used Python scripts and Jupyter Notebook to filter and reformat the datasets.