2d:null 2e:["$","title",null,{"children":"Data visualisation guidelines (defunct) | ONE Campaign | Observable"}] 33:T7d1,1. **Clear single objective**
A chart should try to accomplish a single objective. This objective should be clear and obvious and charts should be designed to serve that purpose. Charts that have a single objective are usually clear and understandable. Charts that try to accomplish too many objectives (or none) are usually unclear and ineffective. 2. **Tell a story**
Add context to the chart to guide the viewer and help them understand the argument/story you are making. Use headings and annotations, explain unfamiliar concepts and highlight key insights and trends to make charts that are more engaging and clear. 3. **High data-to-ink ratio**
Maximise the amount of information conveyed in the chart relative to the amount of non-data elements used. Remove unnecessary elements, labels, and decorations, even axes (if they are unnecessary) to avoid clutter. It is still important to make aesthetically pleasing charts, but be mindful of the design decisions that you make, what they add and what they remove from a reader’s ability to understand a chart. 4. **Use colour purposefully**
Colour impacts more than just the aesthetics of a chart, it affects its clarity, credibility, and engagement. Think carefully about which colours to use and what elements should be assigned (or not assigned) a colour; do not assign colours randomly. It is useful to start designing your visualisation with muted colours, like greys, to ensure it communicates the argument effectively without colour. When colour is needed, generally use fewer hues and use more shades of neighbouring colours. 6. **Show the right amount of relevant data**
Visualising complex issues is difficult. Choose the right amount of data to show in order to clarify the argument/story. At times arguments are clearer through simple charts using only aggregated measures like totals and averages. Other times arguments are clearer when more granular data is used to show nuances, outliers, and hidden trends. 34:T687,**Bar and column charts** This is the most common way to show the relationship between a numeric variable and a categorical variable. Each item in the category is a bar and the size of the bar is proportional to the numeric value. For example, for GDP for countries in the world, each bar is a country and the sizes of the bars are proportional to the value of GDP. Items can be plotted with the category on the horizontal axis and numeric variable on the vertical axis (column chart) or with the category on the vertical axis and numeric variable on the horizontal axis (bar chart). When there are lots of items in the category, use a bar chart as it increases readability. A bar chart can also show multiple numeric variables, by placing bars for each category next to each other or on top of each other. - _Bars should **ALWAYS** start at 0, otherwise you will distort the data_ - _Try to order the bars in ascending or descending order, this makes the charts easier to read_ - _Avoid the rainbow chart - do not use different colours for each item in the category. You may use different colours for each different category or highlight a single bar with a different colour._ - _If there are several values for each item in the category, consider using a different chart like a bee swarm or a box/violin plot to show the distribution of values._ - _Do not confuse a bar chart with a histogram. A histogram has only numeric variables and is intended to show distribution_ 35:T49f,**Scatter plot** This chart shows the relationship between 2 numeric variables. Each data point is shown as a shape (usually a dot) with the value for the first variable on the vertical axis and the value for the second variable on the horizontal axis. The relative position of the dots shows a relationship (or lack of) between the two variables. - _Avoid over-plotting - when there are many dots overlapping it is difficult to see whether there is a relationship between the variables or not. Try change the opacity and sizes of the dots to increase readability_ - _You can colour dots to show an additional numeric variable or a categorical variable, or to highlight certain data points (with some text annotation)_ - _Be weary of using logarithmic scales. They may be useful to make sense of data that covers a wide scale from very big to very small values (e.g. GDP), but this may lead the viewer to misinterpret the chart. Be sure to note and explain the use of logarithmic scales._ 36:T486,Maps are a very powerful tool to visualise geographic data. However, outside of geospatial applications, maps can be problematic to visualise data. That includes, for example, using choropleth maps and cartograms. Spatial distortion is unavoidable with maps (because we are visualising a sphere on a 2-dimensional rectangular page). Depending on the map projection type you choose there may be more or less distortion making some regions appear more or less prominent. **We use “[natural earth](https://en.wikipedia.org/wiki/Natural_Earth_projection)” projection which balances limiting distortion while maintaining an aesthetically pleasing shape.** Maps will also hide regions with small areas or small populations while overemphasising the importance of large areas and areas with large populations. Maps will overemphasise political borders, drawing attention away from the actual data you are trying to show. Maps also rely on a viewer's familiarity with geographical positions and can increase the risk of misinterpretation. Before designing a map for your visualisation, make sure to consider other charts that may better represent the data. 37:T42f,

*Note: Sometimes non standard data visualizations can be just as effective at communicating insights as standard charts. In fact, many are more engaging because of their irregularity and novelty.

Here are some examples:

Napoleon’s Russian campaign
Population rings by Pedro Cruz
Patchwork Kingdoms by Nadieh Bremer
Ed Hawkins’ Climate Stripes

38:Te00,

	Font	Weight	Size	Colour
Title	Colfax	Bold	2	#333333
Subtitle	Colfax	Regular	1.5	#333333
Legend text	Colfax	Regular	1	#333333
Axis titles	Colfax	Regular	1	#646464
Grid line			0.05	#E8E8E8
Axis ticks			0.05	#E8E8E8
Axis line			0.075	#E8E8E8
Axis labels	Colfax	Regular	1	#646464
Source	Colfax	Regular	0.9	#333333
Footer notes	Colfax	Regular	0.9	#333333
Name/Handle	Colfax	Italic	0.9	#333333
Annotation text	Colfax	Regular*	1*	#333333
Annotation lines				#333333
Data labels	Colfax	Regular*	1*	#646464

39:Tbb2,

Teal

#10827b

Blue

#072942

Orange

#F5A425

Cyan

#42B2D4

Purple

#66125C

Burgundy

#96153E

Grey (neutral)

#c2c2c4

White (background)

#ffffff

3a:Tc4b,- **Define objective and audience** Before you start any work, make sure you have fully defined objective of the visualisation. What is the topic you are exploring, how have others approached the topic and visualised it, is there data or additional data you can use? What may be some biases you have in this topic? Who is your audience and what is their level of data and graph literacy? - **Explore and understand the data** To build an effective and interesting visualisation you need to have a good understanding of the data. Using exploratory data visualisation is a good technique to find hidden stories in your data (See for example Anscombe's quartet). You should not explore data only to find things that support your desired argument (see more on quantitative analysis principles), but openly explore the data and reach conclusions and arguments based on what you find. - **Choose a chart type** Once you have an understanding of the argument and story you want to visualise, choose a chart type (standard or non standard) that best illustrates the point you want to make - **Prepare the data and build the visual elements** This is the actual building step. Prepare the data for the visualisation. Depending on the method you are using to visualize the data (Flourish, Tableau, Excel, or scripting language) the data will need to be formatted in a specific way. Reach out to the data team for support, if you need it. Then start the build! Determine how to layer the visualization - which variables are shown on the x-axis, y-axis, which are shown as size, colour etc. - **Add annotations, titles, explanations etc** Think about guiding the viewer through the visualisation. Write an active and interesting title that succinctly describes the argument you are making. Add annotations and other non data elements to the chart that make it easy for the viewer to understand the chart. If needed, make sure you include legends . - **Check accessibility and accuracy** Make sure the colours and opacities you have chosen are accessible to viewers who are colour blind or colour weak. If your visualisation is intended for the web or social media, draft an alternative text ([read this](https://medium.com/nightingale/writing-alt-text-for-data-visualization-2a218ef43f81) on alt text for data visualisation) to help viewers who have some visual impairment. Be aware of your audience’s literacy and ability to interpret your chart. Make sure your expected viewers who are least familiar with many data visualisation techniques can understand your chart. Clearly state where the data came from and how you are using and calculating it. - **Review, test, iterate, and work with the data team** Share your visualisation to get feedback. Assess how others interpret your visualisation and make changes if it is not how you intended viewers to interpret it. Iterate through this process multiple times until you are satisfied the visualisation accomplishes your intended goal. And check with the data team for help, feedback, and suggestions on your viz! 3b:T6b1,Interactivity plays an important role in enhancing the effectiveness and engagement of a data visualization. Complex arguments can be visualised in a much clearer way through interactive elements. However, poorly implemented interactivity can confuse, overwhelm and distract viewers. Using interactivity in a chart should be done carefully. Follow these guidelines to use interactivity effectively. **Purpose driven** Being able to add interactivity to a chart doesn’t mean all charts should be interactive. There should be a well defined purpose for the use of interactive elements in a chart. The main purpose of the chart is most important. If interactivity distracts from the main purpose, it should be static. **Complement clarity, don’t substitute it** Unless specifically built as an interactive tool requiring users to interact with it, a chart should not rely on interactive elements for clarity. A chart’s purpose should be clear as a static image. Interactive elements can then add more details and show more nuance. **User centred design** Interactive elements should be built with your target audience in mind - their technological proficiency, familiarity with charts, etc. Consider what devices your audience will use. Any interactive and UI element in a chart should be user friendly, with clear instructions on how they can be used. They should also be accessible to viewers with disabilities. Test interactive charts with others to understand if they are intuitive and easy to use or add confusion to a chart. If the chart’s final use will be static, do not include interactive elements when building the chart. This may confuse viewers and can make charts look less professional. 3c:T43b,function clipSvg() {return htl.html` ` }3d:[{"id":"05a790586cb3c3e5b7ccd6eec671916ab464067a10ad6019a62066d3d242215c5abc662e50ba11fe554298b1054cb30848e6275d99c9cdea26982069ce321bb7","href":"https://static.observableusercontent.com/files/05a790586cb3c3e5b7ccd6eec671916ab464067a10ad6019a62066d3d242215c5abc662e50ba11fe554298b1054cb30848e6275d99c9cdea26982069ce321bb7","name":"Screenshot 2024-02-09 at 17.23.34.png","type":"image/png","lastModified":1707495834612.081,"size":188858}] 31:{"id":"93bc7c14d3ceb0f4","slug":"data-visualisation-guidelines_old","title":"Data visualisation guidelines (defunct)","thumbnail":"180c6d02abad33c9274d77cd043ab87e3a5bb5a7411f64d76ac44d731cbdb8b8","access_level":"public","create_time":"$D2024-02-06T15:33:49.616Z","update_time":"$D2025-03-21T17:00:38.991Z","view_time":null,"first_public_time":"$D2025-03-21T16:58:41.991Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"13c6fc7ef7b09bba","login":"one-campaign","name":"ONE Campaign","avatar_url":"https://avatars-next.observableusercontent.com/c58192ca59b3a23066e98356418851adaed725e827bb52882301fc4fda17a8aa","tier":"starter_2024"},"version":965,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"41d521a445df67f0","login":"lpicci96","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/ba6585f4cae72924b1dcc452b6fb1923fcec5bcb72959fa7b5f07090711ce6ca","tier":null},{"type":"individual","id":"0004d5be12d25201","login":"jm-rivera","name":"Jorge Rivera","avatar_url":"https://avatars-next.observableusercontent.com/eb9ffa1c5d630f63517176ded24be11e0764d4d4e52d473aa882a19f73422911","tier":null},{"type":"individual","id":"3b1eb0227eec8660","login":"mattie-p","name":"Mattie Price","avatar_url":"https://avatars-next.observableusercontent.com/a74ad82605fb316a1a406dba2a56b49a4913df4e18ed488975767ad70044d0ef","tier":null}],"members":[{"type":"individual","id":"0004d5be12d25201","login":"jm-rivera","name":"Jorge Rivera","avatar_url":"https://avatars-next.observableusercontent.com/eb9ffa1c5d630f63517176ded24be11e0764d4d4e52d473aa882a19f73422911","tier":null,"role":"editor"},{"type":"individual","id":"41d521a445df67f0","login":"lpicci96","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/ba6585f4cae72924b1dcc452b6fb1923fcec5bcb72959fa7b5f07090711ce6ca","tier":null,"role":"editor"},{"type":"team","id":"13c6fc7ef7b09bba","login":"one-campaign","name":"ONE Campaign","avatar_url":"https://avatars-next.observableusercontent.com/c58192ca59b3a23066e98356418851adaed725e827bb52882301fc4fda17a8aa","tier":"starter_2024","role":"viewer"}],"comments":[{"id":"771461cc6c0045d2","reply_to_id":null,"content":"fix links for in page navigation","create_time":"$D2024-02-06T17:13:56.114Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"41d521a445df67f0","login":"lpicci96","name":"Luca Picci","avatar_url":"https://avatars-next.observableusercontent.com/ba6585f4cae72924b1dcc452b6fb1923fcec5bcb72959fa7b5f07090711ce6ca","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Data visualisation guidelines (defunct)","cells":[{"id":0,"value":"# Data visualisation guidelines (defunct)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":958,"value":"**This guide is outdated. Please visit ONE's new [data visualisation guide here](https://one-campaign.observablehq.cloud/one-data-viz-guide/)**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"This document contains guidelines that are in line with best data visualisations and design principles. Use this guide to create beautiful and impactful charts in any visualisation tool that have a consistent and recognisable look and feel.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"### Jump to:\n\n1. [A brief introduction to data viz](#intro)\n2. [Principles for impactful charts](#principles)\n3. [How to choose a chart type](#chartType)\n4. [Chart layout and typography](#layout)\n5. [Colour Palette](#colour)\n6. [Chart design process](#design)\n7. [A note on interactivity and UI](#interactivity)\n8. [A final note](#final)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"intro = md`## A brief introduction to data viz`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"Data visualisation is one of the most powerful tools we have to understand the world and raise awareness about important issues. It is not just about creating fancy charts. Encoding information onto visual elements can and has changed the world.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"\n\n\n

\n\n

\n Thanks to Florence Nightingale’s visualisations about deaths during the Crimean War we learned the true importance of sanitation.\n

\n \n

If it weren’t for John Snow’s visualisation of cholera cases in London, we might still think the disease spreads through the air and many more people might have died.\n

\n \n

W.E.B Du Bois’ iconic charts played a significant role in advancing civil rights in the US and pointing out racial disparities. \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"Charts and visuals are becoming more and more common in publications, and some are becoming iconic like those of the FT or the Economist. And for ONE's advocacy, it can be a secret weapon to get people to care about what we stand for and make a real difference.\n\nSo, let's go make some beautiful and impactful charts…","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"principles = md`## Principles for impactful charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"Our Philosophy: **We build charts that are clear, engaging and fit for purpose**. Our charts illustrate a clear point, and help our audience understand an argument and react to it. We are competing for space and attention so every decision we make must be justified. Simplicity and accuracy are important, but engagement is just as important, so we balance perceptual accuracy and engagement based on our objectives.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":449,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"chartType = md`## How to choose a chart type`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"Line, bar, column charts (and others) are very common and efficient at showing certain kinds of insights. They have become standards for data visualisations. However, choosing the appropriate chart requires careful consideration and should be linked to your charts’ purpose. \n\nYou should always start with the data. Explore the data, gather insights, and formulate the arguments you want to communicate before choosing a chart type. **Do not pick a chart and coerce the data to fit the chart type**. Once you know the arguments, insights, and story you want to communicate, consider which chart types will do that most effectively. \n\nHere are some standard chart types to consider","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"### Evolution and change over time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"**Line chart**\n\nLine charts are a standard way of showing how a single or multiple numeric variables change, using a line to connect data points for each variable. Typically time spans the horizontal axis and numeric values span the vertical axis.\n\n- *Avoid the spaghetti chart - plotting more than 5 lines on a single chart generally makes the chart less readable*\n- _Do not use a dual axis to compare the change over time of 2 different numeric variables (especially at different scales) as this misrepresents the data. It is usually better to make 2 separate charts rather than combine them with a dual axis._\n- _Consider how the range of values on the vertical axis will affect how easy (or not) it is to observe patterns_\n\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":483,"value":"\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":90,"value":"**Area chart**\n\nSimilar to a line chart, but the area below the line is filled in to show the volume. This chart shows the change over time of the value of one or several variables, where usually the areas for each group are stacked on top of each other. In this way you can also see the change over time for the total of all the variables, and the relative proportion of each variable. \n\n- _This chart is useful to show relative proportions and the evolution of the total of all the variables._\n- _It is not efficient in showing the change for each individual variable_\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"### Magnitude","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":496,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"### Correlation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":123,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"**Bubble plot**\n\nSimilar to a scatter plot, but with a third variable added, shown through the size of the dots. The third variable can be numeric or categorical. Similar to scatter plots, you can use colour to show an additional variable. The most [famous bubble chart was used by Hans Rosling](https://www.youtube.com/watch?v=jbkSRLYSojo) to show the state of human development in the world - showing life expectancy (vertical axis), GDP per capita (horizontal axis), population size (dot size) and continent (dot colour). \n- _Be mindful that the values of the first two variables (on the vertical and horizontal axis) are much easier to interpret than the third variable. Make sure to consider which variable to place on which visual element._\n- _Do show a legend or description for bubble sizes, otherwise the viewer will not be able to interpret the sizes or what the sizes mean._\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"### Deviation and distribution","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"**Bee swarm chart**\n\nThis chart is useful to show the distribution of a single numeric variable. It is similar to a scatter plot, however instead of 2 numeric variables, 1 variable is numeric and the other is categorical. Each item in the category is a dot, and the numeric value is the position of the dot along an axis. The categorical variable can be split into subcategories each with its own beeswarm, shown side by side (if the categorical variable is on the horizontal axis) or on top of each other (if the categorical variable is on the vertical axis). Similar to scatter and bubble charts, colour and size can be used to show additional variables.\n_See also connected dot plots, histograms, box plots, violin charts, and ridge-line charts._\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":515,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"### Proportion","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"**Pie chart (WARNING)**\n\nThis is a circle (pie) split into sections (slices), where the size of each section represents the proportion of an item. While these charts are used often, they have some significant disadvantages and often there are better alternatives, so they are often avoided by professionals in the field. This is because angles of slices are very hard to differentiate, so a viewer may easily misinterpret the data. Read more on pie charts [here](https://www.data-to-viz.com/caveat/pie.html). \nIt is slightly better to use doughnut charts where the angles are easier to interpret. **It is even better to use a bar or column chart**, because viewers can perceive differences in length more easily than differences in angle and area. Just because the data may be part-to-whole does not mean you have to use a pie chart. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"**Treemap**\n\nA tree map is composed of nested rectangles used to show the proportions of items to a whole and how a hierarchy is organized. For example a tree map may show the world’s population. Each rectangle represents a continent and the size of the rectangle is the population size. Each rectangle may be composed of smaller rectangles each for a country in the continent (the second order in the hierarchy).\nAvoid using more than 3 levels in the hierarchy as the chart will be difficult to interpret\nGenerally these kinds of charts are greatly enhanced by interactivity.\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":518,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":141,"value":"### Geospatial","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"**Choropleth map**\n\nThis map shows geographic areas coloured in relation to a numeric variable Colours scales may be a single colour of different shades, where the darker the colour the greater the value of the variable, or diverging (using 2 colours) e.g. reg blue scale, where small values are coloured more blue and large values are more red, and a midpoint is white. \nBe sure to include a colour legend and enough explanations and annotations for the viewer to understand the chart. \nNormalise the data. You cannot compare raw values among different regions, consider normalising the values based on population or some other variable to make values comparable.\n\nSee also hex maps and cartograms.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":526,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"$37","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"layout = md`## Chart layout and typography`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"Different charts serve different purposes so they might be built differently. But for standard charts used regularly for social media or website embedding here is are standard layout and typography suggestions to make charts clearer, cleaner, and recognisable as ONE charts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":783,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"$38","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":944,"value":"__*__ _modify according to chart needs_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":453,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":358,"value":"colour = md`## Colour Palette`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"

The organization's brand colours are ⬤ black (#000000) and ⬤ white (#ffffff), with campaign colours ⬤ teal (#00ffd9), ⬤ “Equali-teal” (#10827b), and ⬤ “Action Azul” (#081248) with ⬤ (RED) Red (#af1e2d) for HIV related content. While these brand colours can be used for content, and with careful consideration some annotation on charts, generally they are not suitable for the density of information that data visualizations usually convey. They fail in terms of accessibility, contrast, and equal visual weight. The colour palette below is developed specifically for data visualizations while maintaining the feeling and purpose shown through the brand colours and the brand guidelines.\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"The colours below should be considered for use in data visualisations, in order of preference from left to right. Sometimes it is necessary to emphasise or de-emphasise certain colours by increasing or decreasing the saturation and brightness of the colours. For this purpose equal emphasis shades of these colours can be used. Consider also adjusting the opacity of colours to de-emphasise certain categories. To find different shades of a colour use a tool like [this](https://maketintsandshades.com/).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":398,"value":"**Our data viz colour palette:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":385,"value":"$39","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":547,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"design = md`## Chart design process`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":549,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":420,"value":"interactivity = md`## A note on interactivity and UI`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"$3b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":593,"value":"final = md`## A final note`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"Remember, **these are guidelines not rules**. While the chart layout, colour palette etc are the recommended standards to create uniform ONE data visualisations, unique styles can be applied when a creator sees that it improves the visualisation. **But every decision must be considered carefully** for its impact on the clarity, credibility and engagement of the chart, while also striving to maintain the ONE data visualisation brand. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":182,"value":"

\n

Appendix

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":632,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":637,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 32:"$31:body"