Solve Homework questions using D3 in HTML: Solve question (1) using bar chart: 1
ID: 3736515 • Letter: S
Question
Solve Homework questions using D3 in HTML:
Solve question (1) using bar chart: 150 students of class were asked to state their favorite subjects and these were the results of survey.:
French: 30, English: 20, Maths:26, Geography: 38, Science:34
Solve question (2) using pie chart: A company collected statistics about children to show that children liked TV more than other activities. These were the results of the survey :
School: 6, Sleep: 8, Playing: 2, Study: 4, T. V.: 1, Others: 3
Solve question (3) using box (and whisker) plot: A clinal trial measurement of two different groups A and B were reported. Which group is performing better (high values are better)?
A= {0.22, -0.87, -2.39, -1.79, 0.37, -1.54, 1.28, -0.31, -0.74, 1.72, 0.38, -0.17, -1.62, -1.10, 0.30, 0.15, 2.30, 0.19, -0.50, -0.09}
B= {-5.13, -2.15, -3.43, -3.83, 0.50, -3.25, 4.32, 0.63, 5.18, -0.43, 7.11, 4.87, -3.10, -5.81, 3.76, 6.31, 2.58, 0.07, 5.76, 3.50}
Explanation / Answer
1. <!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Favourite subject"
},
data: [
{
type: "bar",
dataPoints: [
{ y: 30, label: "French"},
{ y: 20, label: "English"},
{ y: 26, label: "Maths"},
{ y: 38, label: "Geography"},
{ y: 34, label: "Science"} ]
},
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer">
</div>
</body>
</html>
2. <!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Childrens like"
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type: "pie",
showInLegend: true,
legendText: "{indexLabel}",
dataPoints: [
{ y: 6, indexLabel: "School" },
{ y: 8, indexLabel: "Sleep" },
{ y: 2, indexLabel: "Playing" },
{ y: 4, indexLabel: "Study"},
{ y: 1, indexLabel: "T.V" },
{ y: 3, indexLabel: "Others"},
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer"></div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.