Cocoa Delicacy is an interactive visualization story that explores the creation of the globally renowned delicacy - chocolate. Chocolate around the world range in a multitude of aspects, from flavour profiles to cocoa bean exporting/importing companies and cocoa composition. With so many chocolate products on the market, it can be difficult for consumers and retailers to determine which chocolate to buy without first trying it. Cocoa Delicacy aims to alleviate this problem by allowing users to explore patterns behind chocolate productions. Users will also be able to view various trends of bean sources among different chocolate companies, explore different chocolate bars and ratings all over the world, and explore the impacts of ingredients on flavour notes.
Demo Video: https://youtu.be/W5Uo-YMB5jA
URL: https://www.youtube.com/watch?v=KAG5wNPdoTw
What it was used for: Creating the scroll functionality
What was changed (degree of change of code): Major functionality addition
- Changes in class names and ids of HTML elements
- Replaced contents inside slide/dashboard to our own
URL: https://d3-graph-gallery.com/graph/wordcloud_size.html
What it was used for: Loading the d3-cloud library
What was changed (degree of change of code): Unchanged
URL: https://fonts.google.com/selection/embed
What it was used for: Searching for and importing of Google Fonts
What was changed (degree of change of code): Used exact code given by the link to import the fonts we chose into our project
URL: https://www.w3schools.com/html/html_links.asp
What it was used for: Learning to add hyperlink in HTML text sections
What was changed (degree of change of code): Adapted the following code for use in our specific project <a href="url">link text</a>
URL: https://www.youtube.com/watch?v=KAG5wNPdoTw
What it was used for: Creating the scroll functionality
What was changed (degree of change of code): Minor changes
- Changes in class names and ids
- Removed inapplicable elements like color and background
- Added
scroll-behavior: smooth;element to .dashboard-container css - Added other elemnts like
background-colourto the styles as needed
URL: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
What it was used for: To allow smooth scroll
What was changed (degree of change of code): Unchanged, scroll-behavior: smooth;
URL: https://www.color-hex.com/color-palette/22298
What it was used for: To choose colours in hex value from the colour palette
What was changed (degree of change of code): Unchanged
URL: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-examples/tree/master/d3-symbol-map
What it was used for: Tooltip and map css
What was changed (degree of change of code): Minor changes in styling
URL: https://developer.mozilla.org/en-US/docs/Web/CSS/background
What it was used for: Adding in a background image for a page
What was changed (degree of change of code): Adapted code to use our own image
URL: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing
What it was used for: Letter spacing
What was changed (degree of change of code): Adapted specific spacing values to look appropriate for our page titles
URL: https://www.w3schools.com/css/css3_borders.asp
What it was used for: Box border styling
What was changed (degree of change of code): Adapted code to create a box style that is suitable for our project (changed border design values)
URL: https://www.w3schools.com/css/css_link.asp
What it was used for: Adding colour to a hyperlink
What was changed (degree of change of code): Changed specific colour value to suit our project
URL: https://observablehq.com/@contervis/clickable-word-cloud
What it was used for: For font-family reference
What was changed (degree of change of code): Minor changes in the second element of font-family
URL: Tutorial 6 d3-symbol-map: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-examples/tree/master/d3-symbol-map?file=%2Fjs%2Fmain.js
What it was used for: General code structure of main.js
What was changed (degree of change of code): Only used the structure and implemented the actual data processing based on this project
URL: https://d3js.org/d3-array/group
What it was used for: To learn how to group data elemnets with d3.group
What was changed (degree of change of code): Minor changes in variable names
Source: ChatGPT
What it was used for: The idea to pass in the barchart and radar chart reference to geoMap and wordCloud initialization respectively
What was changed (degree of change of code): Only got the idea from ChatGPT
URL: https://www.students.cs.ubc.ca/~cs-447/23Sep/fame/projects/g15/index.html
What it was used for: Layout inspiration for landing page and narrative page
What was changed (degree of change of code): Layout structure/positioning of the landing page and narrative page was closely inspired by the first and second page of the Loneliness project. However, actual elements of design such as font, background, use of colour, etc. are original.
URL: https://www.geeksforgeeks.org/typewriter-effect-in-js/
What it was used for: Function for typewriter effect
What was changed (degree of change of code): Minor changes to function from source; changed specific values used in the function and also abstracted out the output to be a parameter
URL: https://www.canva.com/
What it was used for: Creating background images
What was changed (degree of change of code): Used free elements and design platform from Canva to create background images we used in our landing and narrative page
URL: Tutorial 2 d3-static-barchart: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-examples/tree/master/d3-static-bar-chart?file=%2Fjs%2Fbarchart.js%3A1%2C1-123%2C2
What it was used for: Template of the bar chart
What was changed (degree of change of code): Adapted to fit this project's data, title, color scheme, and interactivity
URL: Tutorial 6 d3-symbol-map: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-examples/tree/master/d3-symbol-map?file=%2Fjs%2FgeoMap.js%3A95%2C8-95%2C15
What it was used for: Tooltip code
What was changed (degree of change of code): Adapted to the actual text the tooltip needs to display
Source: ChatGPT
What it was used for: Map icon recentering for on hover icon enlargement
What was changed (degree of change of code): Unchanged
URL: Tutorial 3: https://github.com/UBC-InfoVis/447-materials/tree/25Jan/tutorials/3_D3_Tutorial_Datajoin#enter-update-exit
What it was used for: Enter-update-exit pattern
What was changed (degree of change of code): Only referenced the pattern for the barchart
gx.transition()
.duration(750)
.call(d3.axisBottom(x));
What it was used for: Axis transition
What was changed (degree of change of code): Updated with own duration length and axis
Source: ChatGPT
What it was used for: Remove duplicates of importer-exporter pairs and format the grouped data
What was changed (degree of change of code): Minor tweaks to fit this project's data
URL: Tutorial 6 d3-symbol-map: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-examples/tree/master/d3-symbol-map?file=%2Fdata%2Fworld_wonders.csv%3A8%2C47
What it was used for: Template of the geoMap
What was changed (degree of change of code): Adapted to fit this project's data, title, color scheme, and interactivity
URL: Tutorial 6 d3-symbol-map: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-examples/tree/master/d3-symbol-map?file=%2Fdata%2Fworld_wonders.csv%3A8%2C47
What it was used for: topojson.v3.js, d3.v6.min.js
What was changed (degree of change of code): Copied directly from the sandbox
URL: https://d3js.org/d3-geo/path
What it was used for: Lines that connect between exporters and importers on the map
What was changed (degree of change of code): Unchanged
Source: ChatGPT
What it was used for: Tooltip positioning
What was changed (degree of change of code): Minor tweaks to work as a helper in the code
URL: Tutorial 6 d3-symbol-map: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-examples/tree/master/d3-symbol-map?file=%2Fjs%2FgeoMap.js%3A96%2C15
What it was used for: Tooltip code
What was changed (degree of change of code): Adapted to the actual text the tooltip needs to display
Source: ChatGPT
What it was used for: Make the lines curved on the map and the shooting out effect of the lines
What was changed (degree of change of code): Unchanged
URL: https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json
What it was used for: TopoJson file for the map
What was changed (degree of change of code): Unchanged
URL: Chocolate icons created by monkik - Flaticon: https://www.flaticon.com/free-icons/chocolate
What it was used for: Chocolate icon on the map
What was changed (degree of change of code): Unchanged
URL: Cacao icons created by Erifqi Zetiawan - Flaticon: https://www.flaticon.com/free-icons/cacao
What it was used for: Cocoa bean icon on the map
What was changed (degree of change of code): Unchanged
Source: ChatGPT 4.0
What it was used for:
- In constructor, used ChatGPT to learn how to get the size of parent element using getBoundingClientRect()
- setTooltipPosition() was generated by ChatGPT to check if the position of the tooltip is out of bound, then change the position of tooltip within the bound.
Source: Claude 3.5
What it was used for: In renderLegend(), used Claude 3.5 to generate code for creating stop and offset of the color on the color gradient rectangle. (line 209-213)
URL: https://observablehq.com/d/5685044cf69fabd4
What it was used for: Changing the cvs data to hierarchical format in updateVis()
What was changed (degree of change of code): The use of d3.group() and d3.hierarchy() and learned from the website. The algorithm is modified greatly to fit the nested hierarchical structure in this project by using forEach loop
URL: https://github.com/UBC-InfoVis/447-materials/blob/25Jan/programming-assignments/skeletons/p1/js/timeline.js
What it was used for: Clipping mask for display the circle packed chart, everything outside will be clipped
What was changed (degree of change of code): The size of the clipping mask is set to be same as the viewbox
URL: https://observablehq.com/@d3/zoomable-circle-packing
What it was used for: Used d3.pack(); Labels on the circle in renderVis(); as well as the zoom in/out interaction
What was changed (degree of change of code):
- Instead of using .sum() and .sort() to set the ratio radius and sequence of the circle circle. In the project .pack.radius() is used directly set the smallest circle's radius.
- The label of the circle is modified by changing the binding data, condition for fill-opacity
- The zoom() and zoomTo() is directly used from the the URL, but in zoom(), added conditions to selectively display the label by checking if the circle is big enough (have lots of children) and if the label length is short than a threshold
URL: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-examples/tree/master/d3-linked-charts-dispatcher?file=%2Fjs%2Fscatterplot.js%3A122%2C11-134%2C16
What it was used for: Tooltips in renderVis()
What was changed (degree of change of code): The tooltip component and hover interaction in the URL is directly used in this project, but the format and content inside the tooltip is changed to fit the current project context
URL: https://stackoverflow.com/questions/49739119/legend-with-smooth-gradient-and-corresponding-labels
What it was used for: Gradient legend in renderLegend()
What was changed (degree of change of code): The code for gradient legend is directly used from the URL, minor change is variable namings and configurations, created a extra axis group for legend axis. The code snippet of creating color stops and offset is generated by Claude 3.5 instead of creating manually as demonstrated in the URL
URL: https://colorbrewer2.org/#type=sequential&scheme=BuPu&n=9
What it was used for: Color scale for rating
What was changed (degree of change of code): NA
URL: https://github.com/UBC-InfoVis/447-materials/blob/25Jan/programming-assignments/skeletons/p2/js/lexisChart.js
What it was used for: Reference for class structure and visualization setups like svg and chart area
What was changed (degree of change of code): Major functionality changes, the functionality and configurations of the class is changed for our word cloud implementation.
URL: https://observablehq.com/@panningforbacon/word-cloud
What it was used for: Classed notation and idea for using separate "handle" functions
What was changed (degree of change of code): Idea to use classed notation and separate handle functions was inspired by the source. Specific code used within the handle functions and areas to use "classed" is original to our project
URL: https://observablehq.com/@contervis/clickable-word-cloud
What it was used for: To implement the scaling of font size
What was changed (degree of change of code): Minor changes, domain and ranges are in differnet places of the code, and their values are changes to fit our need.
URL: https://observablehq.com/@contervis/clickable-word-cloud
What it was used for: To display a text with a specific font family
What was changed (degree of change of code): Unchanged
The code used:
.attr("font-family", "Lucida Console, Courier, monospace")
URL: https://stackoverflow.com/questions/36326683/d3-js-how-can-i-set-the-cursor-to-hand-when-mouseover-these-elements-on-svg-co
What it was used for: to add (prevent) cursor effect on hover
What was changed (degree of change of code): Not changed
To implement the word cloud using the d3-cloud library, I learned how to implement the word cloud by reading different implementations listed below. My implementation is based on code blocks in the following sources and my understanding gained from the implementations and by logging infromation while developing. \
URL: https://observablehq.com/@contervis/clickable-word-cloud
What it was used for: To implement the word cloud visualization
What was changed (degree of change of code): Minor changes. To create word cloud, I built on top of their code block where they implement their word cloud. I changed the attributes (ex. size, words, paddings, etc.) so it suits our visualization. Please see the js/wordCloud.js renderVis() for the code built on top of it.
URL: https://d3-graph-gallery.com/graph/wordcloud_size.html
What it was used for: To implement the word cloud visualization
What was changed (degree of change of code): Minor changes. To create word cloud, I built on top of their code block where they implement their word cloud. I changed the attributes (ex. size, words, paddings, etc.) so it suits our visualization. I also replaced the draw function to our own function. Please see the js/wordCloud.js renderVis() for the code built on top of it.
URL: https://observablehq.com/@d3/word-cloud
What it was used for: To implement the word cloud visualization
What was changed (degree of change of code): Minor changes. To create word cloud, I built on top of their code block where they implement their word cloud. I changed the attributes (ex. size, words, paddings, etc.) so it suits our visualization. Please see the js/wordCloud.js renderVis() for the code built on top of it.
URL: https://using-d3js.com/07_01_word_clouds.html
What it was used for: To implement the word cloud visualization
What was changed (degree of change of code): I referenced this document to learn and understand more about the d3-cloud library.
URL: https://github.com/jasondavies/d3-cloud/blob/master/examples/node.js
What it was used for: To figure out the usage of .on("end") with the d3-cloud library
What was changed (degree of change of code): Minor changes. To create word cloud, I built on top of their code block where they implement their word cloud. I changed the attributes (ex. size, words, paddings, etc.) so it suits our visualization. I also replaced the function in .on() to our own function. Please see the js/wordCloud.js renderVis() for the code built on top of it.
URL: https://github.com/UBC-InfoVis/447-materials/blob/25Jan/programming-assignments/skeletons/p2/js/barChart.js
What it was used for: Reference for class structure and visualization setups like svg and chart area
What was changed (degree of change of code): Major functionality changes, the functionality of the class is changed/implemented for our project's need.
URL: https://yangdanny97.github.io/blog/2019/03/01/D3-Spider-Chart
What it was used for: To build radar chart visualization
What was changed (degree of change of code): Minor but many changes
The implementation of radar charts in the source is adapted to the class RadarChart in js/radarChart.js. The places that the source code blocks are utilized are specified in the implementation as comments. I made revisions to the source code blocks in the source to adapt the blocks to the class structures. For example, I changed:
- attributes of elements (values, addition, removal)
- usage (values) of ticklabel
- parameter values for function calls
- scale values (domain, range)
- join format
- variable names
- helper function implementation and variation
so the code suits our visualization and context.
URL: https://observablehq.com/@contervis/clickable-word-cloud
What it was used for: To display chosen word at a corner of the box using specific font family, I referenced their implementation of displaySelection.
What was changed (degree of change of code): Some changes and functionality additions are made in variable names, attributes, and locations that attributes are set.
URL: https://github.com/UBC-InfoVis/2021-436V-tutorials/blob/570c22b4ca0d42a02869c8e79e0579cf021129e9/5_D3_tutorial/README.md
What it was used for: To implement color scale
What was changed (degree of change of code): Minor changes, I changed the values of .domain() and .range() to make them suitable for our project.
URL: https://www.color-hex.com/color-palette/22298
What it was used for: To choose colours in hex value from the colour palette
What was changed (degree of change of code): Unchanged
URL: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-examples/tree/master/d3-linked-charts-basic?file=%2Fjs%2Fscatterplot.js%3A1%2C1 What it was used for: To implement tooltip What was changed (degree of change of code): Minor changes, such as in function style and html attribute values.
URL: https://github.com/UBC-InfoVis/2021-436V-tutorials/blob/570c22b4ca0d42a02869c8e79e0579cf021129e9/5_D3_tutorial/README.md
What it was used for: To implement color scale
What was changed (degree of change of code): Minor changes, I changed the values of .domain() and .range() to make them suitable for our project.
URL: https://www.color-hex.com/color-palette/22298
What it was used for: To choose colours in hex value from the colour palette
What was changed (degree of change of code): Unchanged
URL: https://codesandbox.io/p/sandbox/github/UBC-InfoVis/2021-436V-case-studies/tree/master/case-study_measles-and-vaccines?file=%2Fjs%2Fheatmap.js%3A1%2C1
What it was used for: To implement legend for the radar charts
What was changed (degree of change of code): Minor changes with removal of heatmap implementation. Some values, variables and logics inside each of the class's functions are revised for this project's needs.