Question

In: Computer Science

My code is supposed to display a stacked bar chart of my average week. Can you...

My code is supposed to display a stacked bar chart of my average week. Can you help me locate my errors and fix them? I'm just so confused

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8" />
<title>Assignment 3: My Weekly Schedule</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}

.axis path,
.axis line{
fill: none;
stroke: #000;
}

path.domain {
stroke: none;
}

.y .tick line{
stroke: #ddd;
}
</style>
</head>
<body>
<script type="text/javascript">

var margin = {top: 20, right: 160, bottom: 35, left: 30};

var width = 960 - margin.left - margin.right,
height = 500 + margin.top + margin.bottom;

var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [
{weekday: "Monday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Tuesday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Wednesday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Thursday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Friday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Saturday", eat: "3", sleep: "5", work: "0", study: "2", relax: "9", dance: "5"},
{weekday: "Sunday", eat: "3", sleep: "15", work: "0", study: "0", relax: "4", dance: "2"},
];

var parse = d3.time.format("%A").parse;

//shifts data to layers
var dataset = d3.layout.stack()(["eat", "sleep", "work", "study", "relax", "dance"].map(function(activities){
return data.map(function(d){
return {x: parse(d.weekday), y: +d[activities]};
});
activitie
//set the x and y colours
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) { return d.x;}))
.rangeRoundBands([10, width-20] 0.02);

var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {return d3.max(d, function(d) {return d.y0 + d.y; }); })])
.range([height, 0]);

var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574", "#5fca27", "#0076b2", "#224060"];

// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
.tickSize(-width, 0, 0)
.tickFormat( function(d) { return d } );

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%A"));

svg.append("g")
.attr("class", "y axis")
.call(yAxis);

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

//create groups for each series and rectangles for each segment

var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) { return colors[i];});

// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {return colors.slice().reverse()[i];});

legend.append("text")
.attr("x", width + 5)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d, i) {
switch (i) {
case 0: return "Eat";
case 1: return "Sleep";
case 2: return "Work";
case 3: return "Study";
case 4: return "Relax";
case 5: return "Dance";
}
});

</script>

</body>
</html>

Expert Solution

Updated code:

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8" />
<title>Assignment 3: My Weekly Schedule</title>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
svg {
font: 10px sans-serif;
shape-rendering: crispEdges;
}

.axis path,
.axis line{
fill: none;
stroke: #000;
}

path.domain {
stroke: none;
}

.y .tick line{
stroke: #ddd;
}
</style>
</head>
<body>
<script type="text/javascript">
  
var margin = {top: 20, right: 160, bottom: 35, left: 30};

var width = 960 - margin.left - margin.right,
height = 500 + margin.top + margin.bottom;

var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [
{weekday: "Monday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Tuesday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Wednesday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Thursday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Friday", eat: "2", sleep: "6", work: "8", study: "4", relax: "1", dance: "3"},
{weekday: "Saturday", eat: "3", sleep: "5", work: "0", study: "2", relax: "9", dance: "5"},
{weekday: "Sunday", eat: "3", sleep: "15", work: "0", study: "0", relax: "4", dance: "2"},
];

//var parse = d3.time.format("%A").parse;

//shifts data to layers
var dataset = d3.layout.stack()(["eat", "sleep", "work", "study", "relax", "dance"].map(function(activities){
return data.map(function(d){
return {x: d.weekday, y: +d[activities]};
})}));
//set the x and y colours
var x = d3.scale.ordinal()
.domain(dataset[0].map(function(d) { return d.x;}))
.rangeRoundBands([10, width-10],0.07);

var y = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {return d3.max(d, function(d) {return d.y0 + d.y; }); })])
.range([height, 0]);

var colors = ["b33040", "#d25c4d", "#f2b447", "#d9d574", "#5fca27", "#0076b2", "#224060"];

// Define and draw axes
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
.tickSize(-width, 0, 0)
.tickFormat( function(d) { return d } );

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

svg.append("g")
.attr("class", "y axis")
.call(yAxis);

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

//create groups for each series and rectangles for each segment

var groups = svg.selectAll("g.cost")
.data(dataset)
.enter().append("g")
.attr("class", "cost")
.style("fill", function(d, i) { return colors[i];});

var rect = groups.selectAll("rect")
.data(function(d) {return d; })
.enter()
.append("rect")
.attr("x", function(d) {return x(d.x); })
.attr("y", function(d) { return y(d.y0 + d.y); })
.attr("height", function(d) {return y(d.y0) - y(d.y0 + d.y); })
.attr("width", x.rangeBand())

// Draw legend
var legend = svg.selectAll(".legend")
.data(colors)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });

legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {return colors.slice().reverse()[i];});

legend.append("text")
.attr("x", width + 5)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "start")
.text(function(d, i) {
switch (i) {
case 0: return "Eat";
case 1: return "Sleep";
case 2: return "Work";
case 3: return "Study";
case 4: return "Relax";
case 5: return "Dance";
}
});   

</script>

</body>
</html>

Output:

venereology answered 5 months ago

How is a stacked bar chart different than the one-variable and two variable bar charts? How...

How is a stacked bar chart different than the one-variable and two variable bar charts? How are they similar?

This is my code I want the average temp for the week to be printed when...

This is my code I want the average temp for the week to be printed when the user types : 'week' currently when the user types 'week' it only prints Monday - Sunday and the average temp for each day. import java.util.Arrays; import java.util.ArrayList; import java.util.Scanner; public class weeklytemps { public static void main(String[] args) { Scanner input = new Scanner(System.in); ArrayList Day = new ArrayList(Arrays.asList( "Monday","Tuesday","Wednesday","Thurday","Friday","Saturday","Sunday")); // Stores days of the week...

True or False: A bar chart is used most often when you want to display frequencies...

True or False: A bar chart is used most often when you want to display frequencies by categories.

1. Identify which graphical display might be appropriate in each case. Bar chart, Pie Chart, Side-by-side...

1. Identify which graphical display might be appropriate in each case. Bar chart, Pie Chart, Side-by-side bar chart, segmented bar chart, histogram, dotplot, side-by-side boxplots, scatterplot Scenarios: Scenario Graphic Statisical Procedure 1.Investigate the number of months in your community during the last year 2.Investigate the relationship between GPA and SAT scores for stem related majors 3.Compare the annual incomes among engineering, science, and business majors 4.Compare the percentages of commuters among freshmen, sophomores, juniors, and seniors 5.Investigate the favorite method...

JAVA Exercise BasketBall Bar Chart Write a program that allows you to create a bar chart...

JAVA Exercise BasketBall Bar Chart Write a program that allows you to create a bar chart for the active members of a basketball team during a game. (Recall: there are only 5 active players on the court per team in a standard basketball game.) Your program should do the following tasks: • Prompt the user to store the first name of the five players • Prompt the user to enter the points scored by each player a. Use a while...

I'm getting an error with my code on my EvenDemo class. I am supposed to have...

I'm getting an error with my code on my EvenDemo class. I am supposed to have two classes, Event and Event Demo. Below is my code. What is a better way for me to write this? //******************************************************** // Event Class code //******************************************************** package java1; import java.util.Scanner; public class Event { public final static double lowerPricePerGuest = 32.00; public final static double higherPricePerGuest = 35.00; public final static int cutOffValue = 50; public boolean largeEvent; private String...

Please can you draw a flow chart for the following code : Program code for Payroll,java:...

Please can you draw a flow chart for the following code : Program code for Payroll,java: public class Payroll { public Payroll(String name,int ID,double payRate) { this.name=name; this.ID=ID; this.payRate=payRate; } private String name; private double payRate,hrWorked; private int ID; public Payroll() { name="John Doe"; ID=9999; payRate=15.0; hrWorked=40; } public String getName() { return name; } public int getID() { return ID; } public void setPayRate(int payRate) { this.payRate=payRate; } public void setHrWorked(double hrWorked) { this.hrWorked=hrWorked; } public double getPayRate() {...

Using the data shown, you will create two charts. The first chart is a bar chart...

Using the data shown, you will create two charts. The first chart is a bar chart that will display % growth in different job titles between 2010 and 2020Est. The second chart will be a pie chart showing the 2020Est. Jobs in different categories as a % of overall 2020Est. jobs. Computer-Related Jobs 2010 2020 Est. % Change Systems Analysts 544,400 664,800 Software App Developers 520,800 664,500 Programmers 363,100 406,800 Network/System Admins 347,200...

True or False 1. PIE CHART, HISTOGRAM, and BAR CHART can be produced when one select...

True or False 1. PIE CHART, HISTOGRAM, and BAR CHART can be produced when one select T-TEST statistical function. 2. Descriptive statistics are run when researchers want to find out relationship between phenomena, such as if a higher gas price leads to more use of public transportation system. 3. In SPSS, DATA VIEW allows researchers to see actual numerical data that researchers have entered. 4. When running SPSS to generate PEARSON CORRELATION, one will use ANALYZE-à CORRELATE. 5. In PEARSON...

i have attached my code here and we are supposed to create two classes. one is...

i have attached my code here and we are supposed to create two classes. one is date the other switches accounts for bank and then displays the bank account,type,name,date(pulled from first class and then prints out. i am having issues getting my code to pull from the first class and dont know how to make it read the data from date class if someone can look at my code and tell me how to fix this i would greatly appreciate...