Matthew Relph mattrelph

User Story #1: My tree map should have a title with a corresponding id="title". User Story #2: My tree map should have a description with a corresponding id="description". User Story #3: My tree map should have rect elements with a corresponding class="tile" that represent the data. User Story #4: There should be at least 2 different fill colors used for the tiles. User Story #5: Each tile should have the properties data-name, data-category, and data-value containing their corresponding name, category, and value. User Story #6: The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area. User Story #7: My tree map should have a legend with corresponding id="legend". User Story #8: My legend should have rect elements with a corresponding class="legend-item".

User Story #1: My choropleth should have a title with a corresponding id="title". User Story #2: My choropleth should have a description element with a corresponding id="description". User Story #3: My choropleth should have counties with a corresponding class="county" that represent the data. User Story #4: There should be at least 4 different fill colors used for the counties. User Story #5: My counties should each have data-fips and data-education properties containing their corresponding fips and education values. User Story #6: My choropleth should have a county for each provided data point. User Story #7: The counties should have data-fips and data-education values that match the sample data. User Story #8: My choropleth should have a legend with a corresponding id="legend".

User Story #1: My heat map should have a title with a corresponding id="title". User Story #2: My heat map should have a description with a corresponding id="description". User Story #3: My heat map should have an x-axis with a corresponding id="x-axis". User Story #4: My heat map should have a y-axis with a corresponding id="y-axis". User Story #5: My heat map should have rect elements with a class="cell" that represent the data. User Story #6: There should be at least 4 different fill colors used for the cells. User Story #7: Each cell will have the properties data-month, data-year, data-temp containing their corresponding month, year, and temperature values. User Story #8: The data-month, data-year of each cell should be within the range of the data.

User Story #1: I can see a title element that has a corresponding id="title". User Story #2: I can see an x-axis that has a corresponding id="x-axis". User Story #3: I can see a y-axis that has a corresponding id="y-axis". User Story #4: I can see dots, that each have a class of dot, which represent the data being plotted. User Story #5: Each dot should have the properties data-xvalue and data-yvalue containing their corresponding x and y values. User Story #6: The data-xvalue and data-yvalue of each dot should be within the range of the actual data and in the correct data format. For data-xvalue, integers (full years) or Date objects are acceptable for test evaluation. For data-yvalue (minutes), use Date objects. User Story #7: The data-xvalue and its corresponding dot should align with the corresponding point/value on the x-axis. User Story #8: The data-yval

User Story #1: My chart should have a title with a corresponding id="title". User Story #2: My chart should have a g element x-axis with a corresponding id="x-axis". User Story #3: My chart should have a g element y-axis with a corresponding id="y-axis". User Story #4: Both axes should contain multiple tick labels, each with the corresponding class="tick". User Story #5: My chart should have a rect element for each data point with a corresponding class="bar" displaying the data. User Story #6: Each bar should have the properties data-date and data-gdp containing date and GDP values. User Story #7: The bar elements' data-date properties should match the order of the provided data. User Story #8: The bar elements' data-gdp properties should match the order of the provided data.

User Story #1: I should be able to see an outer container with a corresponding id="drum-machine" that contains all other elements. User Story #2: Within #drum-machine I can see an element with a corresponding id="display". User Story #3: Within #drum-machine I can see 9 clickable drum pad elements, each with a class name of drum-pad, a unique id that describes the audio clip the drum pad will be set up to trigger, and an inner text that corresponds to one of the following keys on the keyboard: Q, W, E, A, S, D, Z, X, C. The drum pads MUST be in this order. User Story #4: Within each .drum-pad, there should be an HTML5 audio element which has a src attribute pointing to an audio clip, a class name of clip, and an id corresponding to the inner text of its parent .drum-pad (e.g. id="Q", id="W", id="E" etc.). User Story #5: When I click on a .drum-pad element, the audio clip contained in its child a

User Story #1: I can see a textarea element with a corresponding id="editor". User Story #2: I can see an element with a corresponding id="preview". User Story #3: When I enter text into the #editor element, the #preview element is updated as I type to display the content of the textarea. User Story #4: When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked). User Story #5: When my markdown previewer first loads, the default text in the #editor field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. User Story #