Below are your lab requirements in a user story format. Try and think up what the feature tasks would be for each story, once you are done, or you get stuck, review the provided feature tasks to see what the actual tasks are for each story.
Do today’s work on a branch called dataviz.
As a marketeer, I want to prevent users from seeing the same image in two subsequent iterations, so that they are not biased.
Update your algorithm to randomly generate three unique product images from the images directory.
Update your algorithm so that new products are generated, confirm that these products are not duplicates from the immediate previous set.
As a marketing manager, I would like a visual representation of how many times a product was clicked so that I can visually analyze the results.
Using ChartJS (imported from CDN), display the vote totals and the number of times a product was viewed in a bar chart format. (hint: don’t forget about the <canvas> tags)
Place the bar chart in the section located beneath your three product images
The bar charts should only appear after all voting data has been collected.
Run a Lighthouse Accessability report. Make necessary updates to your application based on the report to get your score above 80.
Tell chart JS to use canvas
function renderResults() {
// Collect the results into arrays to feed to the chart
// Shaping our data
// Why? Because other systems need it in a certain format
let goatNames = [];
let goatLikes = [];
let goatViews = [];
for( let i = 0; i < state.allGoats.length; i++ ) {
goatNames.push( state.allGoats[i].name );
goatLikes.push( state.allGoats[i].votes );
goatViews.push( state.allGoats[i].views );
}
console.log(goatNames);
console.log(goatLikes);
console.log(goatViews);
const data = {
labels: goatNames,
datasets: [
{
label: "Likes",
data: goatLikes,
borderWidth: 1,
backgroundColor: [
'blue'
]
},
{
label: "Views",
data: goatViews,
borderWidth: 1,
backgroundColor: ['red']
}
]
}
const config = {
type: 'bar',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}
// reportContainer is our <canvas> element for chartJS
const myChart = new Chart(reportContainer, config);
}
<canvas id="report"></canvas>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="js/goats.js"></script>
</body>
</html>
<canvas /> elementWhat is HTML <canvas />?
What is a CDN?
What are some ways we can bring in third party libraries into our projects?
Bookmark and Review: Drawing Shapes With Canvas, Applying Style and Colors - Canvas API, and Drawing Text - Canvas API
Statement on why this topic matter as it relates to what I’m studying in this module:
<canvas> allow a developer to achieve?
</canvas> tag?
<canvas> element requires a closing tag. Content between the opening and closing tag is fallback content, which is displayed if the browser does not support the <canvas> element.getContext() method does.
2d or getContext("2d") returns CanvasRenderingContext2D object which provides a set of drawing methods and properties, so you acn create and manipulate 2D graphics on the canvas.<script> tag in HTMLBar Chart: represents data in rectangular bars, where the length of each bar is proportional to the value it represents.Line Chart: represent data points with lines, used to visualize trends over a period of time.Pie Chart: circular chart divided into sectors, each sector represents a proportion of the whole.Can it be used to create animations?
Once your resume matches our guideline outlined here, have your accountability partners review your resume and give you feedback on how well it matches the guideline. Make a copy of your resume and send it to your accountability partner for suggested edits. Integrate those suggested changes onto your original resume and then DELETE the copy.
A note on feedback: Whenever possible, provide a balance of positive and negative feedback. If you consistently give only positive or negative feedback, people will distrust the feedback and it will become useless. Remember to highlight what you liked on their resumes while also sharing ways for them to improve.
Also, remember to make ALL changes in the original resume document emailed to you when you enrolled, to be sure you are updating the official file that is in our database—this file is what we will be sharing with partner companies once it is approved by your Instructor in 401.
Write a brief reflection on your learning today, or use the prompt below to get started.
Sometimes, something is easier to learn than we expected it to be. Sometimes, something is more difficult to learn than we expected it to be. Briefly write about an experience with each extreme that you have had in this course.