The Stack Overflow podcast is back! Listen to an interview with our new CEO.

Hot answers tagged

87

How about leaving out the second colour and instead put a border around each bar? That makes it obvious what the maximum value is, but it also keeps the clarity of the uncoloured negative space.


56

This is an absolute 'No no' in creating charts. This is a very bad way of representing data, to make it look like Donut chart but non-functional. It doesn't matter if the thickness is proportional to the value, that is a secondary dimension. The primary dimension must be proportional to the primary value. Having a regular Donut chart is adequate for this ...


53

White is giving the appearance as the absence of data. Data visualization is not about what you intend, it's about what they perceive. Black and white have connotations as opposites. Some cultural connotations are good/bad, empty/full, etc. These vary. Seeing this much black and white is also harsh on the eyes. I'm losing track that these are parts of a ...


51

For anyone mathematically inclined, the answer is to use a log scale. For non-mathematical people, you may be better off showing a break in the chart and then the extreme value.


45

I have seen the following visualization used to represent down time and it has been effective: The illustration in the question requires too much thinking. The linear time line works well for a 24 hour timespan.


40

The main advantage of visualization is you are just showing the data and nothing else. Adding negative space just to show the ceiling sounds like Chartjunk. If you just want to show the maximum limit, show a thin line and write what it represents. download bmml source – Wireframes created with Balsamiq Mockups This is quite similar to what stack ...


37

You could: Remove the axis line entirely. If the diagram is not to scale, then the axis line itself is the confounding/confusing element of the UX that is causing failed perception. Use simple labels attached to sections that are set off from each other only in the sense of a list. You could put a larger space between items that are spaced farther apart, ...


35

Stacked bar charts often use a darker colour at the bottom and lighter colour at the top. Bolder darker colours look strong and more supportive of what's on top. Your chart bars looks top heavy, with black areas 'floating', rather than the bar giving the impression of 'tapering up to the sky'. Outlining the bars would also help to stop the bleed from one bar ...


34

I wouldn’t call this a “chart”, but rather numbers with decorations. The numbers don’t add up to the total, and the pie sizes are decorative rather than informational. Sizes don’t make sense either. Using this will create more confusion than answers. The most approximate chart to the provided images is a Donut Chart. Refer to this link about how to use ...


30

You have several visualization problems to solve in one graph. How are the users interacting with this? Your question is focused mostly on labels, however, you also mentioned showing when an element is being split among several entities for payment, in addition to showing sequence of payments. So you have a stacked bar - like graph doing some heavy lifting....


27

You could use logarithmic axes. This allows you to compactly visualize wide ranging variables. To illustrate, here is a very simple logarithmic visualization: 6 942 535 341 23 598 419 203 8 201 3 The length of each datum represented as a number is (roughly) log_10 of that number. So just printing the numbers in a ...


27

A decent heuristic would be whether the negative space has meaning. If the bar represents something like speed or a metric of productivity, the blue part in your graph doesn't have an important meaning. In that case the bars are best left by themselves against the regular backgound. Just make sure that the user can distinguish between the value 0, and a ...


22

Start by figuring out what you want to communicate Since you are (rightly) looking for a reasoned, non-hacky way to lay this out, you can start with first principles. 1. Understand the layout pattern The layout you're trying to use is a common one....I call it the mini-map or navigator pattern although there is probably a more correct UX term for it. ...


22

If black and white maps to the colors of the products, then consider outlining the white bar to add some contrast. Some Tips: What to consider when creating stacked column charts


21

I have graduated as a Petroleum Engineer, so perhaps I can help you here. This is a domain specific problem and the right solution depends on the kind of equipment you're using in the oil well. Let me give you a few examples here. It's slightly technical but I'll try my best to explain it clearly: Example 1: Casing Installation You do well casing before ...


21

Topologically, it looks the same as a Spider chart with 4 variables, but each variable is displayed as a quarter-circle instead of a point.


18

If it is absolutely necessary to see all the amounts in detail all the time you could go with a variation of your second solution but still keep the figures in one column. like this Alternatively you could implement something like a magnifiyng glass to show the small amounts. I first thought about tool tips on hover but a amount could be so small, that the ...


17

That looks like a form of polar area diagram. Also known as a ‘rose diagram’, this is almost 200 years old, and was popularised by Florence Nightingale to highlight death rates in different months: It uses equal angles, with the radius indicating the magnitude.  (Though that means the area isn't proportional.  Alternatively, you could use area to indicate ...


15

I've implemented something along these lines - here the 'plant' is split into sections and then you display the sections in a hierarchical order and display a count of the red / green from each section along with a histogram:


14

From Wikipedia: In statistics, a histogram is a graphical representation of the distribution of data. It is an estimate of the probability distribution of a continuous variable. The emphasis is on continuous variable, as opposed to discrete variable. The histogram In the top histogram you've presented, the X axis is time, which is continuous in this ...


14

Broken axes are only useful if they are intended to be used sparingly. If, as you say, the axis is broken everywhere, it makes more sense to use a table instead describing the relevant points. +-------+-----------+------+ | Depth | Structure | Icon | +-------+-----------+------+ | 0 | Oil Rig | A | | 6100 | Foo Pipe | F | | 6200 | Bar Pipe ...


14

A doughnut (or donut) chart serves a similar purpose to a pie chart, except that it is able to show more than one set of data. Think of it as a pie chart with an additional dimension. See the example below, where a donut chart shows sales for different regions for two separate years. This allows to compare data more easily with respect to time (see how easy ...


13

This chart belongs to the family of Bar Charts. However, there are a variety of bar charts that you can create, including vertical, horizontal, grouped, stacked, and overlapped. Grouped Stacked Overlapped As you see from the examples, your chart would correspond to the Overlapped bar chart, because values are drawn inside of each other.


13

Your first solution is the classic one. The most of the timelines on the web are made with this solution. Just google "timeline" and take a look to the pictures. But you said, you only have a small area to use your timeline, so this could be tightly. I would use a version, where you have the line at the bottom of the page and just show up the events upwards. ...


13

I would say in this case usability should take a back seat to accuracy. Graph B implies a polynomial function of sorts that you have sampled at specific locations. If that is not the case, you should always go with A. For a great comparison of the two, see: http://vizwiz.blogspot.com/2011/12/when-you-use-smoothed-line-chart-your.html


13

You can add a scrollbar or preview chart to clearly indicate that users can zoom in/out and interact with the chart. This makes instructional text unnecessary. See the following demos. In addition to the scrollbar or preview handles, the user can still click and drag to zoom in on an area of the chart. They can also use the context menu (right-click to ...


12

John GB's solution is aesthetically pleasing, but scientific fields generally discourage scale breaks like those shown (and are often cliche examples of misleading graphics). Cleveland (1984) suggests to use a full scale break, making a separate panel, to further visually distinguish between the values. Jon Peltier has a similar example using multi-panels, ...


11

When the cursor enters the graph area, change its symbol to a "move cursor" : EDIT : An alternative solution is use this icon when the mouse enters the graph area : and this icon when user clicks on the graph area :


10

I would consider visualizing courses as individual units in the graph. After all, they are the building block of your degree. Displaying the graph this way will also give a more accurate view of your progress: You can see which courses you have passed, failed or skipped/remaining. You could also display more information about the individual courses on hover (...


10

This is the way Pingdom chose to visualize it in their Public Status Pages: (Disclosure: I was the front-end web developer who implemented this graph back in 2010, but not the designer or originator of the concept.)


Only top voted, non community-wiki answers of a minimum length are eligible