{
    "componentChunkName": "component---src-templates-introduction-super-block-intro-tsx",
    "path": "/learn/data-visualization/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"certification":"data-visualization","superBlock":"data-visualization","title":"Data Visualization"}},"allChallengeNode":{"edges":[{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/add-document-elements-with-d3","blockName":"Data Visualization with D3"},"id":"587d7fa6367417b2b2512bc2","block":"data-visualization-with-d3","challengeType":6,"title":"Add Document Elements with D3","order":0,"superBlock":"data-visualization","dashedName":"add-document-elements-with-d3"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3","blockName":"Data Visualization with D3"},"id":"587d7fa6367417b2b2512bc3","block":"data-visualization-with-d3","challengeType":6,"title":"Select a Group of Elements with D3","order":0,"superBlock":"data-visualization","dashedName":"select-a-group-of-elements-with-d3"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/work-with-data-in-d3","blockName":"Data Visualization with D3"},"id":"587d7fa7367417b2b2512bc4","block":"data-visualization-with-d3","challengeType":6,"title":"Work with Data in D3","order":0,"superBlock":"data-visualization","dashedName":"work-with-data-in-d3"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3","blockName":"Data Visualization with D3"},"id":"587d7fa7367417b2b2512bc5","block":"data-visualization-with-d3","challengeType":6,"title":"Work with Dynamic Data in D3","order":0,"superBlock":"data-visualization","dashedName":"work-with-dynamic-data-in-d3"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/add-inline-styling-to-elements","blockName":"Data Visualization with D3"},"id":"587d7fa7367417b2b2512bc6","block":"data-visualization-with-d3","challengeType":6,"title":"Add Inline Styling to Elements","order":0,"superBlock":"data-visualization","dashedName":"add-inline-styling-to-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/change-styles-based-on-data","blockName":"Data Visualization with D3"},"id":"587d7fa7367417b2b2512bc7","block":"data-visualization-with-d3","challengeType":6,"title":"Change Styles Based on Data","order":0,"superBlock":"data-visualization","dashedName":"change-styles-based-on-data"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/add-classes-with-d3","blockName":"Data Visualization with D3"},"id":"587d7fa7367417b2b2512bc8","block":"data-visualization-with-d3","challengeType":6,"title":"Add Classes with D3","order":0,"superBlock":"data-visualization","dashedName":"add-classes-with-d3"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically","blockName":"Data Visualization with D3"},"id":"587d7fa8367417b2b2512bc9","block":"data-visualization-with-d3","challengeType":6,"title":"Update the Height of an Element Dynamically","order":0,"superBlock":"data-visualization","dashedName":"update-the-height-of-an-element-dynamically"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart","blockName":"Data Visualization with D3"},"id":"587d7fa8367417b2b2512bca","block":"data-visualization-with-d3","challengeType":6,"title":"Change the Presentation of a Bar Chart","order":0,"superBlock":"data-visualization","dashedName":"change-the-presentation-of-a-bar-chart"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/learn-about-svg-in-d3","blockName":"Data Visualization with D3"},"id":"587d7fa8367417b2b2512bcb","block":"data-visualization-with-d3","challengeType":6,"title":"Learn About SVG in D3","order":0,"superBlock":"data-visualization","dashedName":"learn-about-svg-in-d3"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/display-shapes-with-svg","blockName":"Data Visualization with D3"},"id":"587d7fa8367417b2b2512bcc","block":"data-visualization-with-d3","challengeType":6,"title":"Display Shapes with SVG","order":0,"superBlock":"data-visualization","dashedName":"display-shapes-with-svg"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set","blockName":"Data Visualization with D3"},"id":"587d7fa8367417b2b2512bcd","block":"data-visualization-with-d3","challengeType":6,"title":"Create a Bar for Each Data Point in the Set","order":0,"superBlock":"data-visualization","dashedName":"create-a-bar-for-each-data-point-in-the-set"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar","blockName":"Data Visualization with D3"},"id":"587d7fa9367417b2b2512bce","block":"data-visualization-with-d3","challengeType":6,"title":"Dynamically Set the Coordinates for Each Bar","order":0,"superBlock":"data-visualization","dashedName":"dynamically-set-the-coordinates-for-each-bar"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar","blockName":"Data Visualization with D3"},"id":"587d7fa9367417b2b2512bcf","block":"data-visualization-with-d3","challengeType":6,"title":"Dynamically Change the Height of Each Bar","order":0,"superBlock":"data-visualization","dashedName":"dynamically-change-the-height-of-each-bar"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/invert-svg-elements","blockName":"Data Visualization with D3"},"id":"587d7fa9367417b2b2512bd0","block":"data-visualization-with-d3","challengeType":6,"title":"Invert SVG Elements","order":0,"superBlock":"data-visualization","dashedName":"invert-svg-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element","blockName":"Data Visualization with D3"},"id":"587d7fa9367417b2b2512bd1","block":"data-visualization-with-d3","challengeType":6,"title":"Change the Color of an SVG Element","order":0,"superBlock":"data-visualization","dashedName":"change-the-color-of-an-svg-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/add-labels-to-d3-elements","blockName":"Data Visualization with D3"},"id":"587d7faa367417b2b2512bd2","block":"data-visualization-with-d3","challengeType":6,"title":"Add Labels to D3 Elements","order":0,"superBlock":"data-visualization","dashedName":"add-labels-to-d3-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/style-d3-labels","blockName":"Data Visualization with D3"},"id":"587d7faa367417b2b2512bd3","block":"data-visualization-with-d3","challengeType":6,"title":"Style D3 Labels","order":0,"superBlock":"data-visualization","dashedName":"style-d3-labels"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element","blockName":"Data Visualization with D3"},"id":"587d7faa367417b2b2512bd4","block":"data-visualization-with-d3","challengeType":6,"title":"Add a Hover Effect to a D3 Element","order":0,"superBlock":"data-visualization","dashedName":"add-a-hover-effect-to-a-d3-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element","blockName":"Data Visualization with D3"},"id":"587d7faa367417b2b2512bd6","block":"data-visualization-with-d3","challengeType":6,"title":"Add a Tooltip to a D3 Element","order":0,"superBlock":"data-visualization","dashedName":"add-a-tooltip-to-a-d3-element"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles","blockName":"Data Visualization with D3"},"id":"587d7fab367417b2b2512bd7","block":"data-visualization-with-d3","challengeType":6,"title":"Create a Scatterplot with SVG Circles","order":0,"superBlock":"data-visualization","dashedName":"create-a-scatterplot-with-svg-circles"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements","blockName":"Data Visualization with D3"},"id":"587d7fab367417b2b2512bd8","block":"data-visualization-with-d3","challengeType":6,"title":"Add Attributes to the Circle Elements","order":0,"superBlock":"data-visualization","dashedName":"add-attributes-to-the-circle-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles","blockName":"Data Visualization with D3"},"id":"587d7fab367417b2b2512bd9","block":"data-visualization-with-d3","challengeType":6,"title":"Add Labels to Scatter Plot Circles","order":0,"superBlock":"data-visualization","dashedName":"add-labels-to-scatter-plot-circles"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3","blockName":"Data Visualization with D3"},"id":"587d7fab367417b2b2512bda","block":"data-visualization-with-d3","challengeType":6,"title":"Create a Linear Scale with D3","order":0,"superBlock":"data-visualization","dashedName":"create-a-linear-scale-with-d3"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale","blockName":"Data Visualization with D3"},"id":"587d7fac367417b2b2512bdb","block":"data-visualization-with-d3","challengeType":6,"title":"Set a Domain and a Range on a Scale","order":0,"superBlock":"data-visualization","dashedName":"set-a-domain-and-a-range-on-a-scale"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/use-the-d3-max-and-d3-min-functions-to-find-minimum-and-maximum-values-in-a-dataset","blockName":"Data Visualization with D3"},"id":"587d7fac367417b2b2512bdc","block":"data-visualization-with-d3","challengeType":6,"title":"Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset","order":0,"superBlock":"data-visualization","dashedName":"use-the-d3-max-and-d3-min-functions-to-find-minimum-and-maximum-values-in-a-dataset"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/use-dynamic-scales","blockName":"Data Visualization with D3"},"id":"587d7fac367417b2b2512bdd","block":"data-visualization-with-d3","challengeType":6,"title":"Use Dynamic Scales","order":0,"superBlock":"data-visualization","dashedName":"use-dynamic-scales"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements","blockName":"Data Visualization with D3"},"id":"587d7fac367417b2b2512bde","block":"data-visualization-with-d3","challengeType":6,"title":"Use a Pre-Defined Scale to Place Elements","order":0,"superBlock":"data-visualization","dashedName":"use-a-pre-defined-scale-to-place-elements"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-with-d3/add-axes-to-a-visualization","blockName":"Data Visualization with D3"},"id":"587d7fad367417b2b2512bdf","block":"data-visualization-with-d3","challengeType":6,"title":"Add Axes to a Visualization","order":0,"superBlock":"data-visualization","dashedName":"add-axes-to-a-visualization"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property","blockName":"JSON APIs and Ajax"},"id":"587d7fad367417b2b2512be1","block":"json-apis-and-ajax","challengeType":6,"title":"Handle Click Events with JavaScript using the onclick property","order":1,"superBlock":"data-visualization","dashedName":"handle-click-events-with-javascript-using-the-onclick-property"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/change-text-with-click-events","blockName":"JSON APIs and Ajax"},"id":"587d7fad367417b2b2512be2","block":"json-apis-and-ajax","challengeType":6,"title":"Change Text with click Events","order":1,"superBlock":"data-visualization","dashedName":"change-text-with-click-events"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method","blockName":"JSON APIs and Ajax"},"id":"587d7fae367417b2b2512be3","block":"json-apis-and-ajax","challengeType":6,"title":"Get JSON with the JavaScript XMLHttpRequest Method","order":1,"superBlock":"data-visualization","dashedName":"get-json-with-the-javascript-xmlhttprequest-method"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method","blockName":"JSON APIs and Ajax"},"id":"5ccfad82bb2dc6c965a848e5","block":"json-apis-and-ajax","challengeType":6,"title":"Get JSON with the JavaScript fetch method","order":1,"superBlock":"data-visualization","dashedName":"get-json-with-the-javascript-fetch-method"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api","blockName":"JSON APIs and Ajax"},"id":"587d7fae367417b2b2512be4","block":"json-apis-and-ajax","challengeType":6,"title":"Access the JSON Data from an API","order":1,"superBlock":"data-visualization","dashedName":"access-the-json-data-from-an-api"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/convert-json-data-to-html","blockName":"JSON APIs and Ajax"},"id":"587d7fae367417b2b2512be5","block":"json-apis-and-ajax","challengeType":6,"title":"Convert JSON Data to HTML","order":1,"superBlock":"data-visualization","dashedName":"convert-json-data-to-html"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/render-images-from-data-sources","blockName":"JSON APIs and Ajax"},"id":"587d7fae367417b2b2512be6","block":"json-apis-and-ajax","challengeType":6,"title":"Render Images from Data Sources","order":1,"superBlock":"data-visualization","dashedName":"render-images-from-data-sources"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need","blockName":"JSON APIs and Ajax"},"id":"587d7fae367417b2b2512be7","block":"json-apis-and-ajax","challengeType":6,"title":"Pre-filter JSON to Get the Data You Need","order":1,"superBlock":"data-visualization","dashedName":"pre-filter-json-to-get-the-data-you-need"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates","blockName":"JSON APIs and Ajax"},"id":"587d7faf367417b2b2512be8","block":"json-apis-and-ajax","challengeType":6,"title":"Get Geolocation Data to Find A User's GPS Coordinates","order":1,"superBlock":"data-visualization","dashedName":"get-geolocation-data-to-find-a-users-gps-coordinates"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method","blockName":"JSON APIs and Ajax"},"id":"587d7faf367417b2b2512be9","block":"json-apis-and-ajax","challengeType":6,"title":"Post Data with the JavaScript XMLHttpRequest Method","order":1,"superBlock":"data-visualization","dashedName":"post-data-with-the-javascript-xmlhttprequest-method"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart","blockName":"Data Visualization Projects"},"id":"bd7168d8c242eddfaeb5bd13","block":"data-visualization-projects","challengeType":3,"title":"Visualize Data with a Bar Chart","order":2,"superBlock":"data-visualization","dashedName":"visualize-data-with-a-bar-chart"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph","blockName":"Data Visualization Projects"},"id":"bd7178d8c242eddfaeb5bd13","block":"data-visualization-projects","challengeType":3,"title":"Visualize Data with a Scatterplot Graph","order":2,"superBlock":"data-visualization","dashedName":"visualize-data-with-a-scatterplot-graph"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-projects/visualize-data-with-a-heat-map","blockName":"Data Visualization Projects"},"id":"bd7188d8c242eddfaeb5bd13","block":"data-visualization-projects","challengeType":3,"title":"Visualize Data with a Heat Map","order":2,"superBlock":"data-visualization","dashedName":"visualize-data-with-a-heat-map"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map","blockName":"Data Visualization Projects"},"id":"587d7fa6367417b2b2512bbf","block":"data-visualization-projects","challengeType":3,"title":"Visualize Data with a Choropleth Map","order":2,"superBlock":"data-visualization","dashedName":"visualize-data-with-a-choropleth-map"}}},{"node":{"challenge":{"fields":{"slug":"/learn/data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram","blockName":"Data Visualization Projects"},"id":"587d7fa6367417b2b2512bc0","block":"data-visualization-projects","challengeType":3,"title":"Visualize Data with a Treemap Diagram","order":2,"superBlock":"data-visualization","dashedName":"visualize-data-with-a-treemap-diagram"}}}]}},"pageContext":{"certification":"data-visualization","superBlock":"data-visualization","slug":"/learn/data-visualization/"}},
    "staticQueryHashes": ["3851966407","3877153394"]}