Relative Budgets Chart

[ndarville]

http://upwithsteve.tumblr.com/post/45700087207/how-the-center-gets-defined-in-the-budget-debate

[ndarville]

Data Example

value,A,B,C,F,I,K,O,V,Ø
%,29,9,4,6,4,0,13,22,9
$,29,9,4,6,4,0,13,22,9
#,29,9,4,6,4,0,13,22,9

[ndarville]

To do:

Similar to bill votes chart:

• [x] Create 50% divider

Dissimilar:

• [ ] Display name on top of bar
  • Or coloured symbol as tick with legend to the right
• [x] Additional value displays beside the main one

[ndarville]

• [x] Remove color() code; seems superfluous
• [x] Add 50% divider
• [x] Render axis bar as singular instead of composite (not directly necessary)
• [x] Fix same bar being rendered dataset.length times
• [x] Support for display of multiple value( type)s
  • Use axis or <text>

Labelling Text Labels

• [ ] Text labels

Symbols

• [x] Symbols
• [x] Different symbols for different values
• [x] With legend
• [ ] Centre legend—by creating a container, presumably

[ndarville]

• [x] getValues()
• [x] displayValue()
• [x] shownPlusSign
• [x] .tickFormat()
• [x] if el in list
• [x] define var percentage, money, quantity
• [x] remove var data
• [x] parseNumber()
• [x] Proper y values for additional values

[ndarville]

How to render the text labels?

Where to place the legend: below or to the side?

[ndarville]

• [ ] Implement backwards-compatible support for Object.keys()

[ndarville]

This is the current code:

// Display text labels
var keys = Object.keys(jsonData);
g.selectAll(".name")
    .data(domain)
    .enter().append("text")
    .attr("class", "name")
    .attr({
        "text-anchor": function(d) {
            return (x(d) > (x.range()[0] + x.range()[1])/2) ? "end" : "start";
        },  // Revise
        "x": x,
        "y": 0 // Revise
    })
    .text(function(d, i) {  // fetch string
        return keys[i];
    });

And this is the data:

var jsonData = {
    "Ryan Budget": {
        "percentage": 0,
        "money": 0
    },
    "Senate Democrats": {
        "percentage": 2.3,
        "money": 975000000000
    },
    "Progressive Caucus": {
        "percentage": 14.1,
        "money": 3900000000000
    }
};

And this is what it ends up looking like:

It’s going to be a royal pain to handle this programmatically—not to imply that it won’t be a pain to handle manually either.

So perhaps the primary visualization should be with symbols and a legend, while I wait for an idea for how to go about the text labels, until someone hands a solution down to me a dream.

[ndarville]

Need to find out a way to define vertical positioning for the value and legend text:

These are the two values:

var xPos = (x.range()[0] + x.range()[1])/2 - 25;  // <-

///

g.selectAll(".name")
    .data(domain)
    .enter().append("text")
    .attr("class", "name")
    .attr({
        "text-anchor": function(d) {
            return (x(d) > (x.range()[0] + x.range()[1])/2) ? "end" : "start";
        },  // Revise
        "x": x,
        "y": 0 // Revise
    })
    .text(function(d, i) {  // fetch string
        return keys[i];
    });

[ndarville]

Better to group the chart into three <g> elements:

1. Title + bar
2. Value text
3. Legend (symbol + text)

[ndarville]

Perhaps a good way of going about many or adjacent values is to either include an option that only displays values at the minimum, average, and maximum.

• [ ] Setting for copious/adjacent values
• [ ] Setting for displaying value at centre