Gender Comparison: Would you Tell your Weight?

How females responded

How males responded

Gender Ratio

Would tell Would not tell Not sure
Female Male

How females and males responded to the poll: If a friend asked how much you weighed out of curiosity, would you tell them? as of June 5, 2015.
(cc by-sa) 2015 Ramiro Gómez • Data: redd.it/37ylv1 • Source: geeksta.net/visualizations/tell-weight/


The charts above show how people responded to the poll If a friend asked how much you weighed out of curiosity, would you tell them? created by Redditor Honeycone, who submitted it in the SampleSize subreddit.

Presumably most participants came via Reddit, so if the results are representative of any group of people, it is the subscribers of /r/SampleSize. Keeping that in mind, we can see that females are more willing to tell their weight, but also less certain about how they'd answer.

For me the most reasonable conclusion of this poll is that far more males seem to be subscribed to the SampleSize subreddit. So why bother about it at all?

I found this poll while looking for an existing graphic to critique as part of a project for the Data Visualization and D3.js course on Udacity, which is excellent by the way.

Critique of the Straw Poll presentation

Below you can see a screenshot of how the poll results are presented on Straw Poll as of June 5, 2015. I don't want to bash Straw Poll for their design choices or argue about aesthetics, but the presentation has several problems from a functional point of view.

Straw Poll Screen Tell Weight
Straw Poll screenshot

There are instances of chartjunk such as using a font that is not very readable or rounding the corners of bars. Also showing the corresponding answer text above each bar and having arguably too many slices in one pie chart are problematic.

The most fundamental problem though is, that this presentation is not helpful for comparing gender differences, which is what the creator of the poll was apparently interested in. Straw Poll is a very simple tool which only seems to allow for single questions. It is not the right tool for the job, because Honeycone actually asked two questions: Would you tell your weight? and Are you male or female?

Improving the presentation

Course participants were not only asked to critique a graphic, but also to improve it. You can see my attempt at the beginning of this article.

To show gender differences I decided to create 2 pie charts next to each other, one for females and one for males. This way you can see which answer got what share within each of the 2 groups. The 3rd chart is to make it obvious that there is a gender imbalance, which also suggests that this is not a representative result.

While pie charts are not the best choice for comparisons, there are particularly good at showing part of the whole relations, which is why I chose them. Alternatives I had in mind were a stacked bar or a 2-sided bar chart showing percent values for each group.

Conclusion

I don't want to interpret too much into the poll results. For whatever reason you might not want to disclose your weight to a friend, at least be aware of it yourself. If you are ashamed of your weight, there is probably something you should work on to make your life better.

If you want to critique my graphic, you can do so in the comments at the end of this post. The last section is about how I created the charts.

Source code and data

One of the tools the teachers of the D3 course suggested is dimple. Of all the general purpose charting libraries built on top of D3 I've seen, the creators of dimple seem to have put the most thought into creating an API that allows designers to think in terms of the basic building blocks, that make up a chart: axes, columns, data types and relationships.

By providing a higher abstraction level than D3 itself, dimple allows chart designers to iterate quickly and use dimple for data exploration with chart types like bar, pie, scatter and line.

ECMAScript 6 code to draw the charts

I recently started writing browser code in ECMAScript 6, which I find a lot more pleasant than the current standard supported by browsers. Thanks to Babel for making it very easy to use.

Most of the ES6 code below should look familiar to JavaScript developers, except for the arrow (=>) notation for creating functions and template strings as used in the getTooltipText function.

With dimplejs you can create charts with just a few lines of code as seen in the drawPie function. The main "complexities" in the code result from creating custom legends and tooltip texts. I didn't want to show the legend for the 2 charts on the left twice and also make sure that the 3rd chart uses different colors to better separate it.

// Map data keys to more meaningful labels for display.
let labelMap = {
    'yes': 'Would tell',
    'no': 'Would not tell',
    'open': 'Not sure',
    'female': 'Female',
    'male': 'Male',
};

function drawPie(selector, data, measure='Count', series='Response') {
    let pie = new dimple.chart(getSVG(selector, 1), data);

    pie.addMeasureAxis('p', measure);
    let s = pie.addSeries(series, dimple.plot.pie);

    // Customize tooltip text, so it takes up less space.
    s.getTooltipText = (e) => {
        let percent = d3.format('%')(e.piePct);
        return [`${labelMap[e.aggField[0]]}: ${e.pValue} (${percent})`];
    };

    // Set bounds so that tooltips are visible for all slices.
    pie.setBounds('8%', '8%', '84%', '84%')

    // Assign CSS classes from data keys for custom colors.
    data.forEach((d) => pie.assignClass(d[series], d[series]));

    pie.draw();
}

d3.csv('/data/tell-weight.csv', (data) => {
    let females = data.filter((d) => d.Gender == 'female');
    let males = data.filter((d) => d.Gender == 'male');
    let byGender = d3.nest()
        .key((d) => d.Gender)
        .rollup((v) => d3.sum(v, (d) => d.Count))
        .entries(data);

    drawPie('#pie-female', females);
    drawPie('#pie-male', males);
    drawPie('#pie-ratio', byGender, 'values', 'key');

    d3.select('.count-females')
        .text(byGender.filter((d) => d.key == 'female').pop().values);
    d3.select('.count-males')
        .text(byGender.filter((d) => d.key == 'male').pop().values);
    d3.select('.count-total')
        .text(d3.sum(data, (d) => d.Count));
});

CSS code

For each data key used in the CSV file below a color is defined, which is used for pie slices and legends.

path {
    stroke: #888;
}
.yes {
    fill: #b2df8a;
}
.no {
    fill: #1f78b4;
}
.open {
    fill: #a6cee3;
}
.female {
    fill: #ef8a62;
}
.male {
    fill: #67a9cf;
}
.pie-legend svg {
    margin: 0 .2em 0 1em;
}

CSV dataset

Gender,Response,Count
female,yes,330
female,no,83
female,open,73
male,yes,688
male,no,452
male,open,46

To see how the chart layout as well as the legends are created, simply look for div-tags with the class charts in the page source.




blog comments powered by Disqus