{
"componentChunkName": "component---src-pages-infographics-infograms-index-mdx",
"path": "/infographics/infograms/",
"result": {"pageContext":{"frontmatter":{"title":"Infograms","description":"Infograms provide real data depictions in the style of IBM pictograms. This type of information graphic works well for tertiary or marginal data in smaller spaces.","keywords":"IBM infograms, data graphics, information graphics"},"relativePagePath":"/infographics/infograms/index.mdx","titleType":"append","MdxNode":{"id":"feabf29f-7f32-52c4-b47b-3564f6bd20e3","children":[],"parent":"91148f4f-b6e2-5c6a-9a4f-97b89a7e26e8","internal":{"content":"---\ntitle: Infograms\ndescription: Infograms provide real data depictions in the style of IBM pictograms. This type of information graphic works well for tertiary or marginal data in smaller spaces.\nkeywords: IBM infograms, data graphics, information graphics\n---\n\nimport OverviewCard from \"../../../components/OverviewCard\";\n\n\n\nInfograms are information graphics in the style of IBM pictograms. Unlike the charts found in the IBM pictogram library, which are used to illustrate the idea of data visualization, infograms are depictions of real data. The infogram is adapted for small spaces, works well as tertiary or marginal data, and stylistically pairs with productive pictograms in visual harmony.\n\n\n\n\n Infogram types\n Foundation\n Construction\n Typography\n Color and emphasis\n\n\n## Resources\n\n\n\n\n\n\n\n\n\n
\n\n## Infogram types\n\nCurrently, there are six infogram types. Each type has been selected to visually represent actual data in various settings. For example, the bar, line and multiline infogram types communicate one point of data, but do so in a way that can give a visual snapshot, depicting an upward or downward trend, leading to that singular data point. Each type is suited, in its own way, to a targeted and instant visual comprehension of the data represented.\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n
\n\n## Foundation\n\nDraw infograms on the 32px x 32px master grid to maintain consistent positioning and proportions across the IBM pictogram set.\n\n\n\n\n\n\nStandard grid\n\n\n\n\n\n\nRadial grid\n\n\n
\n\n## Construction\n\nUse the the grid lines as your basic guideline to snap the stroked linework of your design elements. We recommend making adjustments along the way to ensure the right amount of details work at every size. The grid contains 1px padding. This padding ensures that the pictograms retain their desired appearance when exported. Only extend artwork into the padding for additional visual weight when necessary.\n\n\n\n\n\n\n\n
\n\n### Strokes and data points\n\nInfogram line weight is consistent with the line weight used in IBM pictograms, except for the highlighted data point. The highlighted data point uses a 1.5x stroke weight compared to the rest of the infogram, as well as a color fill. For circular gauge charts, a dotted line represents an inactive portion of the data sum.\n\n| Element | Specifications |\n| ------- | -------------- |\n| Data line | 0.72px stroke |\n| Dotted line | 0.72px stroke, 2px gap |\n| Regular data point | 0.72px stroke |\n| Highlighted data point | 1.08px stroke, color fill |\n\n### Standard grid infograms\n\nWhen drawing standard grid infograms, data should be constrained to a 28px height within the grid. Data points should be placed within the 28px construction area proportional to their value. When a proportional value results in a non-integer number, round it up or down to the nearest integer and snap the line to the grid.\n\n\n\n\n\n\nRaw data\n\n\n\n\n\n\nApproximated data\n\n\n
\n\n| Carbon bar chart | IBM infogram |\n| ---------------- | ------------ |\n| 20% | 6px |\n| 40% | 11px |\n| 60% | 17px |\n| 80% | 22px |\n| 100% | 28px |\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Radial grid infograms\n\nInfograms can be constructed on a radial grid, where necessary, based on the chart type. Unlike rules for IBM pictogram construction, infograms drawn on a radial grid should prioritize data accuracy over snapping to the grid. Occasionally, data points and line terminals will necessarily occur between grid lines.\n\nRadial charts are typically used to display data as percentages of a whole. This data is mapped on a radial grid that breaks the circumference into 1% increments. In circular gauge charts, a solid line represents the main numerical data value of the chart, while a dotted line represents the remaining sum.\n\n\n\n\n\n\nDonut chart\n\n\n\n\n\n\nCircular gauge chart\n\n\n
\n\n## Typography\n\nInfograms contain built-in numerical values of the hero statistic to give the chart meaning. Typography should be set in IBM Plex® Sans Mono at a 6px scale. The baseline of this text should align to the 32px grid with special care taken so that any portion of the typography does not extend beyond the boundary of the grid.\n\n\n\n\n\n\nLeft aligned\n\n\n\n\n\n\nCentered\n\n\n\n\n\n\nRight aligned\n\n\n
\n\n### Kerning\n\nBecause of the inherent kerning characteristics of monospace type, decimal points will need to be adjusted for optical balance. Decimal kerning should be set to -150 units on both sides.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Color and emphasis\n\nColor is an important tool for clearly communicating data within a chart. Be sure to follow color contrast rules for accessibility when coloring infograms. Highlighted data points and values should be directly associated with their quantifier. One to three color families can be used when coloring infograms, though single-color families are recommended. Make sure the chosen colors meet [accessibility requirements](/color#accessibility) for contrast and color blindness.\n\n\n\n\n\n\nMonochrome infogram\n\n\n\n\n\n\nTwo-color infogram\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","type":"Mdx","contentDigest":"b7f9d27639613a670166f6ab3eb95fdd","owner":"gatsby-plugin-mdx","counter":1950},"frontmatter":{"title":"Infograms","description":"Infograms provide real data depictions in the style of IBM pictograms. This type of information graphic works well for tertiary or marginal data in smaller spaces.","keywords":"IBM infograms, data graphics, information graphics"},"exports":{},"rawBody":"---\ntitle: Infograms\ndescription: Infograms provide real data depictions in the style of IBM pictograms. This type of information graphic works well for tertiary or marginal data in smaller spaces.\nkeywords: IBM infograms, data graphics, information graphics\n---\n\nimport OverviewCard from \"../../../components/OverviewCard\";\n\n\n\nInfograms are information graphics in the style of IBM pictograms. Unlike the charts found in the IBM pictogram library, which are used to illustrate the idea of data visualization, infograms are depictions of real data. The infogram is adapted for small spaces, works well as tertiary or marginal data, and stylistically pairs with productive pictograms in visual harmony.\n\n\n\n\n Infogram types\n Foundation\n Construction\n Typography\n Color and emphasis\n\n\n## Resources\n\n\n\n\n\n\n\n\n\n
\n\n## Infogram types\n\nCurrently, there are six infogram types. Each type has been selected to visually represent actual data in various settings. For example, the bar, line and multiline infogram types communicate one point of data, but do so in a way that can give a visual snapshot, depicting an upward or downward trend, leading to that singular data point. Each type is suited, in its own way, to a targeted and instant visual comprehension of the data represented.\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n\n\n
\n\n## Foundation\n\nDraw infograms on the 32px x 32px master grid to maintain consistent positioning and proportions across the IBM pictogram set.\n\n\n\n\n\n\nStandard grid\n\n\n\n\n\n\nRadial grid\n\n\n
\n\n## Construction\n\nUse the the grid lines as your basic guideline to snap the stroked linework of your design elements. We recommend making adjustments along the way to ensure the right amount of details work at every size. The grid contains 1px padding. This padding ensures that the pictograms retain their desired appearance when exported. Only extend artwork into the padding for additional visual weight when necessary.\n\n\n\n\n\n\n\n
\n\n### Strokes and data points\n\nInfogram line weight is consistent with the line weight used in IBM pictograms, except for the highlighted data point. The highlighted data point uses a 1.5x stroke weight compared to the rest of the infogram, as well as a color fill. For circular gauge charts, a dotted line represents an inactive portion of the data sum.\n\n| Element | Specifications |\n| ------- | -------------- |\n| Data line | 0.72px stroke |\n| Dotted line | 0.72px stroke, 2px gap |\n| Regular data point | 0.72px stroke |\n| Highlighted data point | 1.08px stroke, color fill |\n\n### Standard grid infograms\n\nWhen drawing standard grid infograms, data should be constrained to a 28px height within the grid. Data points should be placed within the 28px construction area proportional to their value. When a proportional value results in a non-integer number, round it up or down to the nearest integer and snap the line to the grid.\n\n\n\n\n\n\nRaw data\n\n\n\n\n\n\nApproximated data\n\n\n
\n\n| Carbon bar chart | IBM infogram |\n| ---------------- | ------------ |\n| 20% | 6px |\n| 40% | 11px |\n| 60% | 17px |\n| 80% | 22px |\n| 100% | 28px |\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Radial grid infograms\n\nInfograms can be constructed on a radial grid, where necessary, based on the chart type. Unlike rules for IBM pictogram construction, infograms drawn on a radial grid should prioritize data accuracy over snapping to the grid. Occasionally, data points and line terminals will necessarily occur between grid lines.\n\nRadial charts are typically used to display data as percentages of a whole. This data is mapped on a radial grid that breaks the circumference into 1% increments. In circular gauge charts, a solid line represents the main numerical data value of the chart, while a dotted line represents the remaining sum.\n\n\n\n\n\n\nDonut chart\n\n\n\n\n\n\nCircular gauge chart\n\n\n
\n\n## Typography\n\nInfograms contain built-in numerical values of the hero statistic to give the chart meaning. Typography should be set in IBM Plex® Sans Mono at a 6px scale. The baseline of this text should align to the 32px grid with special care taken so that any portion of the typography does not extend beyond the boundary of the grid.\n\n\n\n\n\n\nLeft aligned\n\n\n\n\n\n\nCentered\n\n\n\n\n\n\nRight aligned\n\n\n
\n\n### Kerning\n\nBecause of the inherent kerning characteristics of monospace type, decimal points will need to be adjusted for optical balance. Decimal kerning should be set to -150 units on both sides.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Color and emphasis\n\nColor is an important tool for clearly communicating data within a chart. Be sure to follow color contrast rules for accessibility when coloring infograms. Highlighted data points and values should be directly associated with their quantifier. One to three color families can be used when coloring infograms, though single-color families are recommended. Make sure the chosen colors meet [accessibility requirements](/color#accessibility) for contrast and color blindness.\n\n\n\n\n\n\nMonochrome infogram\n\n\n\n\n\n\nTwo-color infogram\n\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/infographics/infograms/index.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}