A bar chart about the percentage of the time in which each of the Supreme Court Justices voted in majority. This example covers transformation strategies for mark type and data highlight.
{"name": "kennedy-mobile","layout": {"width": 375,"height": 500,"composition": "single","column": [{"field": "percentage","scale": {}}],"row": [{"field": "justice","type": "nominal","sort": {"order": "descending","field": "percentage"}}]},"layer": [{"mark": {"type": "bar","color": {"value": "#eeeeee","conditions": [{"condition": "(datum.justice == 'Kennedy')","value": "#d90000"}]}},"text": [{"type": "on-axis","field": "justice","orient": "left","values": ["Gorsuch","White","O'Connor","Roberts","Thomas","Scalia","Alito","Blackmun","Souter","Brennan","Kagan","Sotomayor","Marshall","Gorsuch","White","O'Connor","Roberts","Thomas","Scalia","Alito","Blackmun","Souter","Brennan","Kagan","Sotomayor","Marshall","Rehnquist","Breyer","Stevens","Ginsburg","Kennedy"],"items": [{"fontWeight": 700,"fontSize": 14,"align": "left","width": 70,"condition": ["Kennedy"]},{"fontWeight": 400,"fontSize": 14,"align": "left","width": 70,"condition": ["Gorsuch","White","O'Connor","Roberts","Thomas","Scalia","Alito","Blackmun","Souter","Brennan","Kagan","Sotomayor","Marshall","Gorsuch","White","O'Connor","Roberts","Thomas","Scalia","Alito","Blackmun","Souter","Brennan","Kagan","Sotomayor","Marshall","Rehnquist","Breyer","Stevens","Ginsburg"]}],"padding": 20,"anchor": "middle"},{"type": "on-mark","items": [{"color": "white","expression": "( isFirst('justice', datum) ? datum.value + '%' : datum.value )","fontWeight": 700}],"field": "percentage","orient": "middle-right","dx": -10,"anchorAlign": "end","values": [76]},{"type": "on-mark","items": [{"color": "black","expression": "( isFirst('justice', datum) ? datum.value + '%' : datum.value )"}],"field": "percentage","orient": "middle-right","dx": -10,"anchorAlign": "end","values": [82,68,66,65,63,62,61,57,47,46,45,44,42]}]}],"nondata": {"items": [{"type": "text","x": 9,"y": 75,"width": 210,"text": [{"align": "left","fontColor": "black","text": "Percentage of votes in the majority,
over each justice’s career","lineHeight": "120%"}],"box": {"fill": "white"},"visibility": {"externalize": {"position": "top"}}}]},"title": {"width": 350,"items": [{"text": "In close decisions, Kennedy voted in the majority 76 percent of the time.","fontSize": 18,"fontWeight": 700,"offset": 30}]},"data": [{"justice": "Gorsuch","percentage": 82,"_index_": 0},{"justice": "Kennedy","percentage": 76,"_index_": 1},{"justice": "White","percentage": 68,"_index_": 2},{"justice": "O'Connor","percentage": 66,"_index_": 3},{"justice": "Roberts","percentage": 65,"_index_": 4},{"justice": "Rehnquist","percentage": 65,"_index_": 5},{"justice": "Thomas","percentage": 63,"_index_": 6},{"justice": "Scalia","percentage": 62,"_index_": 7},{"justice": "Alito","percentage": 61,"_index_": 8},{"justice": "Blackmun","percentage": 57,"_index_": 9},{"justice": "Souter","percentage": 47,"_index_": 10},{"justice": "Stevens","percentage": 46,"_index_": 11},{"justice": "Brennan","percentage": 46,"_index_": 12},{"justice": "Kagan","percentage": 45,"_index_": 13},{"justice": "Sotomayor","percentage": 44,"_index_": 14},{"justice": "Breyer","percentage": 44,"_index_": 15},{"justice": "Ginsburg","percentage": 42,"_index_": 16},{"justice": "Marshall","percentage": 42,"_index_": 17}]}
{"$schema": "../cicero.json","name": "kennedy-mobile","description": "This is a Cicero specification for 'Justice Kennedy' visualization from desktop to mobile.","metadata": {"condition": "small"},"transformations": [{"description": "Resize the chart","specifier": {"role": "view"},"action": "modify","option": {"size": [800,180]}},{"description": "Remove a row element","specifier": {"role": "view.row"},"action": "remove"},{"description": "Replace as axis labels","specifier": {"role": "axis.label","field": "justice"},"action": "replace","option": {"to": {"role": "mark.label"}}},{"description": "Remove on-mark label","specifier": {"role": "mark.label","field": "percentage"},"action": "remove"},{"description": "Re-format axis labels","specifier": {"role": "mark.label","field": "justice"},"action": "modify","option": {"orient": "bottom-center","anchor": "start","angle": 45,"fontSize": 12,"dy": 20,"dx": -2,"padding": 0}},{"description": "Add the horizontal axis labels","specifier": {"role": "axis","field": "percentage"},"action": "add","option": {"role": "label","values": [40,50,60,70,80,90],"expression": "datum.value + '%'","fontSize": 13,"orient": "top"}},{"description": "Add the horizontal axis grid","specifier": {"role": "axis","field": "percentage"},"action": "add","option": {"role": "grid","stroke": "#cccccc","strokeDash": [3,1]}},{"description": "Change column domain","specifier": {"role": "column","field": "percentage"},"action": "modify","option": {"scale": {"domain": [35,95]}}},{"description": "Change mark type to bar","specifier": {"role": "mark"},"action": "modify","option": {"mark": "circle","color": {"value": "black"},"size": {"value": 80}}},{"description": "Color mark","specifier": {"role": "mark","data": {"justice": "Kennedy"}},"action": "modify","option": {"color": {"value": "black"}}},{"description": "Add a rule mark for axis domain","specifier": {"role": "emphasis"},"action": "add","option": {"id": "domain","width": 800,"height": 1,"x": 0,"y": 102.5,"mark": {"shape": "rule","stroke": "black"}}},{"description": "Internalize an annotation","specifier": {"role": "annotation"},"action": "reposition","option": {"external": false,"x": 9,"y": 68}},{"description": "Change the annotation color","specifier": {"role": "annotation"},"action": "modify","option": {"fontColor": "#999999","width": 240}},{"description": "Enlarge title font size","specifier": {"role": "title"},"action": "modify","option": {"fontSize": 22}},{"description": "Set mark label background or 'Kennedy'","specifier": {"role": "mark.label","data": {"justice": "Kennedy"}},"action": "modify","option": {"width": 61,"fill": "#ffe100","padding": 5,"fontWeight": 900,"radius": 5,"dy": 15,"dx": -7}},{"description": "Adjust label appearance","specifier": {"role": "mark.label","field": "justice","values": ["Rehnquist"]},"action": "modify","option": {"expression": "', ' + datum.value","dy": 50,"dx": 26}},{"description": "Adjust label appearance","specifier": {"role": "mark.label","field": "justice","values": ["Breyer"]},"action": "modify","option": {"expression": "', ' + datum.value","dy": 60,"dx": 36}},{"description": "Adjust label appearance","specifier": {"role": "mark.label","field": "justice","values": ["Stevens"]},"action": "modify","option": {"expression": "', ' + datum.value","dy": 51,"dx": 27}},{"description": "Adjust label appearance","specifier": {"role": "mark.label","field": "justice","values": ["Ginsburg"]},"action": "modify","option": {"expression": "', ' + datum.value","dy": 52,"dx": 30}}]}