{
    "componentChunkName": "component---src-templates-challenges-projects-frontend-show-tsx",
    "path": "/learn/data-visualization/data-visualization-projects/visualize-data-with-a-heat-map",
    "result": {"data":{"challengeNode":{"challenge":{"forumTopicId":301466,"title":"Visualize Data with a Heat Map","description":"<section id=\"description\">\n<p><strong>Objective:</strong> Build a CodePen app.</p>\n<p>Fulfill the below user stories and get all the tests to pass. Give it your own personal style.</p>\n<p>You can use HTML, JavaScript, and CSS to complete this project. Plain CSS is recommended because that is what the lessons have covered so far and you should get some practice with plain CSS. You can use Bootstrap or SASS if you choose. Additional technologies (just for example jQuery, React, Angular, or Vue) are not recommended for this project, and using them is at your own risk. Other projects will give you a chance to work with different technology stacks like React. We will accept and try to fix all issue reports that use the suggested technology stack for this project. Happy coding!</p>\n<p><strong>User Story #1:</strong> My heat map should have a title with a corresponding <code>id=\"title\"</code>.</p>\n<p><strong>User Story #2:</strong> My heat map should have a description with a corresponding <code>id=\"description\"</code>.</p>\n<p><strong>User Story #3:</strong> My heat map should have an x-axis with a corresponding <code>id=\"x-axis\"</code>.</p>\n<p><strong>User Story #4:</strong> My heat map should have a y-axis with a corresponding <code>id=\"y-axis\"</code>.</p>\n<p><strong>User Story #5:</strong> My heat map should have <code>rect</code> elements with a <code>class=\"cell\"</code> that represent the data.</p>\n<p><strong>User Story #6:</strong> There should be at least 4 different fill colors used for the cells.</p>\n<p><strong>User Story #7:</strong> Each cell will have the properties <code>data-month</code>, <code>data-year</code>, <code>data-temp</code> containing their corresponding <code>month</code>, <code>year</code>, and <code>temperature</code> values.</p>\n<p><strong>User Story #8:</strong> The <code>data-month</code>, <code>data-year</code> of each cell should be within the range of the data.</p>\n<p><strong>User Story #9:</strong> My heat map should have cells that align with the corresponding month on the y-axis.</p>\n<p><strong>User Story #10:</strong> My heat map should have cells that align with the corresponding year on the x-axis.</p>\n<p><strong>User Story #11:</strong> My heat map should have multiple tick labels on the y-axis with the full month name.</p>\n<p><strong>User Story #12:</strong> My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.</p>\n<p><strong>User Story #13:</strong> My heat map should have a legend with a corresponding <code>id=\"legend\"</code>.</p>\n<p><strong>User Story #14:</strong> My legend should contain <code>rect</code> elements.</p>\n<p><strong>User Story #15:</strong> The <code>rect</code> elements in the legend should use at least 4 different fill colors.</p>\n<p><strong>User Story #16:</strong> I can mouse over an area and see a tooltip with a corresponding <code>id=\"tooltip\"</code> which displays more information about the area.</p>\n<p><strong>User Story #17:</strong> My tooltip should have a <code>data-year</code> property that corresponds to the <code>data-year</code> of the active area.</p>\n<p>Once you're done, submit the URL to your working project with all its tests passing.</p>\n</section>","instructions":null,"challengeType":3,"helpCategory":"JavaScript","superBlock":"data-visualization","certification":"data-visualization","block":"data-visualization-projects","translationPending":false,"fields":{"blockName":"Data Visualization Projects","slug":"/learn/data-visualization/data-visualization-projects/visualize-data-with-a-heat-map"}}}},"pageContext":{"challengeMeta":{"certification":"data-visualization","superBlock":"data-visualization","block":"data-visualization-projects","template":"","required":[],"nextChallengePath":"/learn/data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map","prevChallengePath":"/learn/data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph","id":"bd7188d8c242eddfaeb5bd13"},"projectPreview":{"showProjectPreview":false,"challengeData":{"challengeType":3,"challengeFiles":[]}},"slug":"/learn/data-visualization/data-visualization-projects/visualize-data-with-a-heat-map"}},
    "staticQueryHashes": ["3216307819","3851966407"]}