Welcome!
Dr. Rhea Ashley Hoskin and I made this page to collect a few example links of the types of programming and interactive features we intend to build into our Knowledge Mobilization Website demonstrating the thematic network generated from the focus groups on people’s experiences and observations of femmephobia.
Building Blocks - or Individual Nodes Representing Themes
Below are some examples of example coding that allows a visual card to “flip” when hovered over with a mouse to display additional information. The additional information can be more visual content (infographic), text, and/or include buttons to open up more content or to allow social media sharing. We will use cards like these to visually create the thematic network, such that when a user clicks or hovers on an image, more information about that part of the thematic network becomes available.
See the Pen 3D Flip Cards Pure CSS and HTML by Arash Rasteh (@ArashRasteh) on CodePen.
See the Pen 3D Product Cards by Zac (@zremboldt) on CodePen.
See the Pen Pure CSS Flip Card by Aron (@Aoyue) on CodePen.
Building a Landscape
Click Here to see an interactive website that allows the visitor to “navigate” through a landscape, finding key “nodes” that open up to provide additional information. Note that this website uses a globe as its landscape and the nodes open up to tell about a make-believe “critter.” In the context of our research, the landscape would be the visual representation of the thematic network (the links between different themes), and the nodes would be individual themes. Once they opened, similar to how this example site shows more information about each critter, our website would show additional information about the theme, anonymized quotes from our studies, relevant infographics and the ability to share the node to social media networks.
Infographics and Interactive Data Visualization
Here are some examples of interactive images that provide additional information to the viewer when the mouse hovers over a specific part of the image. Content like this can be made visible when a user enters a specific node on our thematic network, providing greater detail on the related theme.