ASSIGNMENT

1
Juliette Hoedemakers
S1423592

Easy: Make a new HTML files using the example, invert the x and y axis and edit the style of the bar chart (colors, size).

Firstly the color of the bar chart is changed by editing the color names at the
beginning of the code:
Original Edited
.bar { .bar {
fill: steelblue; fill: orange;
} }
.bar:hover { .bar:hover {
fill: brown; fill: pink;
} }
By following the steps of Lets make a Bar chart Part III by Mike Bostock
(https://bost.ocks.org/mike/bar/3/) the x and y values are switched in every
part of the code. This causes the switch in the perspective from an upright bar
graph to a side bar graph. This line of code can be found in line 33.
Original Edited
var x = d3.scaleBand().rangeRound([0, var y = d3.scaleBand().rangeRound([0,
width]).padding(0.1), height]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, x = d3.scaleLinear().rangeRound([0, width]);
0]);
Finally the x and y values are only switched for the bars, since this value had not
switched for the bars with the previous change. This can be seen at line 84.
Original Edited
.attr("x", function(d) { return x(d.letter); }) .attr("y", function(d) { return y(d.letter); })
.attr("y", function(d) { return .attr("x",0)
y(d.frequency); }) // finally the width and height are defined
// finally the width and height are // for x with have a set width "x.bandwidth()"
defined .attr("height", y.bandwidth())
// for x with have a set width // for y we set it to be height - the frequency
"x.bandwidth()" mapped into our y range
.attr("width", x.bandwidth()) .attr("width", function(d) { return
// for y we set it to be height - the x(d.frequency); });
frequency mapped into our y range });
.attr("height", function(d) { return height
- y(d.frequency); });