{
    "componentChunkName": "component---src-pages-data-visualization-overview-mdx",
    "path": "/data-visualization/overview/",
    "result": {"pageContext":{"frontmatter":{"title":"Overview","description":"Data visualization is a powerful means to discover, understand and reveal important stories that live within vast amounts of information. To be effective, they need to stand out, be distinctive, be clear and deliver meaning while representing values and numbers accurately. We’ve synthesized a set of criteria that can help you achieve successful data visualization."},"relativePagePath":"/data-visualization/overview.mdx","titleType":"append","MdxNode":{"id":"43720b1b-5cdd-532d-ac1d-ab27ed64e45c","children":[],"parent":"dd6d2b17-60b8-520f-84dd-1051b35b6975","internal":{"content":"---\ntitle: Overview\ndescription: Data visualization is a powerful means to discover, understand and reveal important stories that live within vast amounts of information. To be effective, they need to stand out, be distinctive, be clear and deliver meaning while representing values and numbers accurately. We’ve synthesized a set of criteria that can help you achieve successful data visualization.\n---\n\n<PageDescription>\n\nData visualization is a powerful means to discover, understand and reveal important stories that live within vast amounts of information. To be effective, they need to stand out, be distinctive, be clear and deliver meaning while representing values and numbers accurately. We’ve synthesized a set of criteria that can help you achieve successful data visualization.\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Understandable</AnchorLink>\n  <AnchorLink>Essential</AnchorLink>\n  <AnchorLink>Impactful</AnchorLink>\n  <AnchorLink>Consistent</AnchorLink>\n  <AnchorLink>Contextual</AnchorLink>\n</AnchorLinks>\n\n\n<div className=\"overview-gallery\">\n\n<ImageGallery className=\"show\">\n<ImageGalleryImage alt=\"Digital Analytics\" title=\"Digital Analytics\" col={4}>\n\n![Digital Analytics](/images/Overview/Digital_Analytics.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage  alt=\"Cloud database\" title=\"Cloud database\" col={8}>\n\n![Cloud database](/images/Overview/Cloud_database.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"Open Digital\" title=\"Open Digital\" col={8}>\n\n![Open Digital](/images/Overview/IBM_US_Open_Digital.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"Watson Discovery Demo\" title=\"Watson Discovery Demo\" col={4}>\n\n![Watson Discovery Demo](/images/Overview/IBM_Watson_Discovery_Demo_ok.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"optimization rates\" title=\"optimization rates\" col={8}>\n\n![optimization rates](/images/Overview/optimization_rates_ok.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage  alt=\"Iot investment\" title=\"Iot investment\" col={4}>\n\n![Iot investment](/images/Overview/IoT_investment_area.png)\n\n</ImageGalleryImage>\n</ImageGallery>\n\n</div>\n\n## Understandable\n\nAn IBM data visualization should communicate a message at a glance, in a clear, concise and easy-to-understand way. Avoid elements that make a visualization appear complex, distant or disjointed. You can achieve this effect using established typographic and visual communication principles that enhance the form, readability and meaning. You should remove anything gratuitous and avoid ambiguity or unnecessary embellishments that distract the user from the main concept. Less is more.\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/understandable_video.mp4\"\n  poster=\"/images/dataviz/Understandable_cover.png\"\n/>\n\n</Column>\n</Row>\n\n## Essential\n\n\n<Row>\n<Column colMd={5} colLg={8}>\n\nDesign is an exercise in decision-making. When you design data visualization, you must consider the utility in answering a question or solving a problem. A definite structure, contrast, rhythm and hierarchy of the information displayed is essential to guide users through complex information. Choose the visual model that best conveys the message. Take a dive into our Charts section to get a better understanding of how to pair your data with the most effective chart type. [Learn more on Carbon](https://www.carbondesignsystem.com/data-visualization/basic-charts).\n\n</Column>\n</Row>\n\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/essential.mp4\"\n  poster=\"/images/dataviz/essential_cover.png\"\n/>\n\n</Column>\n</Row>\n\n## Impactful\n\nAs IBMers, we love celebrating the beauty and creativity of things, but we also invest in showing how things work, conveying concepts and displaying details. Our data visualization should always enable the user to reach the goal and explore the topic in detail by using a clear system of filters, functions and well-known interaction patterns that make the affordance unmistakable. We embrace a love for details and multiple layers of information as part of a good design practice.\n\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/impactfulVideo.mp4\"\n  poster=\"/images/dataviz/impactful_cover.png\"\n/>\n\n</Column>\n</Row>\n\n## Consistent\n\n<Row>\n<Column colMd={5} colLg={8}>\n\nJust as the core values of IBM have remained consistent over the years, similarly, we want our visualizations to be consistent both stylistically and from a data point of view. Be a good storyteller. Ensure each visual representation corresponds to the relative numerical quantity, and pay attention to the proportions and scale of the elements to keep the integrity of the data. A misrepresentation of data could lead to a misinterpretation of reality. [Learn more on Wikipedia](https://en.wikipedia.org/wiki/Misleading_graph).\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/consistentVideo.mp4\"\n  poster=\"/images/dataviz/consistent_cover.png\"\n/>\n\n</Column>\n</Row>\n\n## Contextual\n\n<Row>\n<Column colMd={5} colLg={8}>\n\nSuccessful systems require both fixed and fluid elements of expression. The innovative ways in which we use these elements deliver distinction and uniqueness, but the context should be the primary driver of our decisions. A visualization should be crafted based on the environment of the audience and its constraints. If it’s for marketing or analysis purposes, what’s the level of familiarity with the subject matter, and does the final result respect the time required by the audience being asked to experience it? These examples are just a few of the essential aspects in a data visualization that affect layout and style, the level of complexity, and the amount of detail revealed. [Learn more on Carbon](https://www.carbondesignsystem.com/data-visualization/getting-started).\n  \n</Column>\n</Row>\n\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/contextualvideo.mp4\"\n  poster=\"/images/dataviz/contexual_cover.png\"\n/>\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"639dced64441a5cb88a3c9ecee0d2bef","owner":"gatsby-plugin-mdx","counter":1919},"frontmatter":{"title":"Overview","description":"Data visualization is a powerful means to discover, understand and reveal important stories that live within vast amounts of information. To be effective, they need to stand out, be distinctive, be clear and deliver meaning while representing values and numbers accurately. We’ve synthesized a set of criteria that can help you achieve successful data visualization."},"exports":{},"rawBody":"---\ntitle: Overview\ndescription: Data visualization is a powerful means to discover, understand and reveal important stories that live within vast amounts of information. To be effective, they need to stand out, be distinctive, be clear and deliver meaning while representing values and numbers accurately. We’ve synthesized a set of criteria that can help you achieve successful data visualization.\n---\n\n<PageDescription>\n\nData visualization is a powerful means to discover, understand and reveal important stories that live within vast amounts of information. To be effective, they need to stand out, be distinctive, be clear and deliver meaning while representing values and numbers accurately. We’ve synthesized a set of criteria that can help you achieve successful data visualization.\n</PageDescription>\n\n<AnchorLinks>\n  <AnchorLink>Understandable</AnchorLink>\n  <AnchorLink>Essential</AnchorLink>\n  <AnchorLink>Impactful</AnchorLink>\n  <AnchorLink>Consistent</AnchorLink>\n  <AnchorLink>Contextual</AnchorLink>\n</AnchorLinks>\n\n\n<div className=\"overview-gallery\">\n\n<ImageGallery className=\"show\">\n<ImageGalleryImage alt=\"Digital Analytics\" title=\"Digital Analytics\" col={4}>\n\n![Digital Analytics](/images/Overview/Digital_Analytics.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage  alt=\"Cloud database\" title=\"Cloud database\" col={8}>\n\n![Cloud database](/images/Overview/Cloud_database.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"Open Digital\" title=\"Open Digital\" col={8}>\n\n![Open Digital](/images/Overview/IBM_US_Open_Digital.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"Watson Discovery Demo\" title=\"Watson Discovery Demo\" col={4}>\n\n![Watson Discovery Demo](/images/Overview/IBM_Watson_Discovery_Demo_ok.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage alt=\"optimization rates\" title=\"optimization rates\" col={8}>\n\n![optimization rates](/images/Overview/optimization_rates_ok.png)\n\n</ImageGalleryImage>\n<ImageGalleryImage  alt=\"Iot investment\" title=\"Iot investment\" col={4}>\n\n![Iot investment](/images/Overview/IoT_investment_area.png)\n\n</ImageGalleryImage>\n</ImageGallery>\n\n</div>\n\n## Understandable\n\nAn IBM data visualization should communicate a message at a glance, in a clear, concise and easy-to-understand way. Avoid elements that make a visualization appear complex, distant or disjointed. You can achieve this effect using established typographic and visual communication principles that enhance the form, readability and meaning. You should remove anything gratuitous and avoid ambiguity or unnecessary embellishments that distract the user from the main concept. Less is more.\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/understandable_video.mp4\"\n  poster=\"/images/dataviz/Understandable_cover.png\"\n/>\n\n</Column>\n</Row>\n\n## Essential\n\n\n<Row>\n<Column colMd={5} colLg={8}>\n\nDesign is an exercise in decision-making. When you design data visualization, you must consider the utility in answering a question or solving a problem. A definite structure, contrast, rhythm and hierarchy of the information displayed is essential to guide users through complex information. Choose the visual model that best conveys the message. Take a dive into our Charts section to get a better understanding of how to pair your data with the most effective chart type. [Learn more on Carbon](https://www.carbondesignsystem.com/data-visualization/basic-charts).\n\n</Column>\n</Row>\n\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/essential.mp4\"\n  poster=\"/images/dataviz/essential_cover.png\"\n/>\n\n</Column>\n</Row>\n\n## Impactful\n\nAs IBMers, we love celebrating the beauty and creativity of things, but we also invest in showing how things work, conveying concepts and displaying details. Our data visualization should always enable the user to reach the goal and explore the topic in detail by using a clear system of filters, functions and well-known interaction patterns that make the affordance unmistakable. We embrace a love for details and multiple layers of information as part of a good design practice.\n\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/impactfulVideo.mp4\"\n  poster=\"/images/dataviz/impactful_cover.png\"\n/>\n\n</Column>\n</Row>\n\n## Consistent\n\n<Row>\n<Column colMd={5} colLg={8}>\n\nJust as the core values of IBM have remained consistent over the years, similarly, we want our visualizations to be consistent both stylistically and from a data point of view. Be a good storyteller. Ensure each visual representation corresponds to the relative numerical quantity, and pay attention to the proportions and scale of the elements to keep the integrity of the data. A misrepresentation of data could lead to a misinterpretation of reality. [Learn more on Wikipedia](https://en.wikipedia.org/wiki/Misleading_graph).\n\n</Column>\n</Row>\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/consistentVideo.mp4\"\n  poster=\"/images/dataviz/consistent_cover.png\"\n/>\n\n</Column>\n</Row>\n\n## Contextual\n\n<Row>\n<Column colMd={5} colLg={8}>\n\nSuccessful systems require both fixed and fluid elements of expression. The innovative ways in which we use these elements deliver distinction and uniqueness, but the context should be the primary driver of our decisions. A visualization should be crafted based on the environment of the audience and its constraints. If it’s for marketing or analysis purposes, what’s the level of familiarity with the subject matter, and does the final result respect the time required by the audience being asked to experience it? These examples are just a few of the essential aspects in a data visualization that affect layout and style, the level of complexity, and the amount of detail revealed. [Learn more on Carbon](https://www.carbondesignsystem.com/data-visualization/getting-started).\n  \n</Column>\n</Row>\n\n\n<Row>\n<Column colMd={8} colLg={8}>\n\n<Video\n  src=\"/videos/dataviz/contextualvideo.mp4\"\n  poster=\"/images/dataviz/contexual_cover.png\"\n/>\n\n</Column>\n</Row>\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/data-visualization/overview.mdx"}}},
    "staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}