The webpage you create will have five simple charts: two bar charts, two line charts and one pie chart (this is possibly the last time I’ll ask you to draw a pie chart in earnest: we’ll see why in the Principles part of the course).
You will draw each chart in an SVG element of size 400x400. The
elements for each SVG chart need to have specific
The name of the file should be
Your bar charts should take all horizontal space in the SVG (all 400
pixels). The individual bars should have the following height, in order:
225, 225, 300, 300, 225, 225, 150.
You should create a bar chart with blue bars in the SVG element named
blue_bar_chart, and a bar chart with red bars in the SVG element
red_bar_chart. In addition, the SVG elements inside each of
the main elements should be IDENTICAL. In other words: any
declarations that will influence the color of the bars need to be done
with the attributes of the different outer SVG elements and your CSS
declarations. It is important that you learn how to do this kind of
thing because it will enable you, later on, to write better
abstractions in d3. Better abstractions mean you can try more things
faster. Trying more things, as we discussed, means you will end up
with better visualizations.
The bar charts will look like this:
Your two line charts will look almost identical. The first line chart,
line_line_chart, will be composed of SVG
elements. The second line chart, with id
path_line_chart, will be composed of a single
element that will draw the polyline. The heights of the vertices in
the polyline should be the same as the heights of the individual bars
for your bar charts.
Both of your line charts will look very similar to this:
Your pie chart, which will be an SVG element with id
have two wedges. The first wedge will span 90 degrees and will be
red, and the second wedge will span the remaining 270 degrees, and
will be yellow.
Your pie chart will look very similar to this:
20% of the grade will be given to submissions which succesfully validate as HTML5 according to the w3c validator.
16% of the grade will be given to submissions for each chart that gets full marks. The charts don’t have to look exactly like the ones here, but the general style should match: fill and stroke colors count, as do positioning of the elements, and respecting the constraints of the assignments (using the right elements and right declarations, as described above).