Template:Graph:US Map state highlight/doc

This graph's main version resides at Template:Graph:US Map state highlight. Please make or suggest all the changes there, and copy it everywhere else (until the copying is automated)

{{Graph:US Map state highlight | table=Bea.gov/GDP by state.tab | title=Gross Domestic Product by State }}

<graph mode="interactive"> { // // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:US_Map_state_highlight // Please do not modify it anywhere else, as it may get copied and override your changes. // Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:US_Map_state_highlight // "version": 2, "width": 300, "height": 265, "signals": [ // TODO: should be last available { "name": "initYear", "init": 2016 }, { "name": "gapHeight", "init": 26 }, { // Hide overview if total height is too small "name": "showOverview", "init": {"expr": "true || height < (gapHeight + 100)" } }, { "name": "overviewHeight", "init": {"expr": "showOverview ? 40 : 0" } }, { "name": "detailHeight", "init": {"expr": "height - (showOverview ? overviewHeight + gapHeight : 0)" } }, { "name": "overviewYPos", "init": {"expr": "height - overviewHeight" } }, { "name": "brush_start", "streams": [{ "type": "@overview:mousedown, @overview:touchstart", "expr": "clamp(eventX(), 0, width)", "scale": {"name": "xOverview", "invert": true} }] }, { "name": "brush_end", "streams": [{ "type": "@overview:mousedown, [@overview:mousedown, window:mouseup] > window:mousemove, @overview:mouseup, @overview:touchstart, [@overview:touchstart, window:touchend] > window:touchmove, @overview:touchend", "expr": "clamp(eventX(), 0, width)", "scale": {"name": "xOverview", "invert": true} }] }, { "name": "fromYear", "init": {"expr": "initYear"}, "expr": "year(min(brush_start, brush_end))" }, { "name": "toYear", "init": {"expr": "initYear"}, "expr": "year(max(brush_start, brush_end))" }, { "name": "isRange", "init": {"expr": "false"}, "expr": "fromYear !== toYear" }, { "name": "tooltip", "init": {"expr": "{x: 0, y: 0, datum: false }"}, "streams": [ {"type": "@map:mouseout, @map:touchstart", "expr": "{x: 0, y: 0, datum: false }" }, {"type": "@map:mouseover, @map:touchstart", "expr": "{x: eventX(), y: eventY(), datum: eventItem().datum.lookup}" } ] }, ], "data": [{ "name": "data", "url": "tabular:///Bea.gov/GDP by state.tab", "format": {"type": "json", "property": "data"}, },{ "name": "totals", "source": "data", "transform": [ { "type": "formula", "field": "date", "expr": "datetime(datum.year, 0, 1)" }, // TODO: We shouldn't list each field this way... nasty { "type": "formula", "field": "total", "expr": "datum.AL+datum.AK+datum.AZ+datum.AR+datum.CA+datum.CO+datum.CT+datum.DE+datum.DC+datum.FL+datum.GA+datum.HI+datum.ID+datum.IL+datum.IN+datum.IA+datum.KS+datum.KY+datum.LA+datum.ME+datum.MD+datum.MA+datum.MI+datum.MN+datum.MS+datum.MO+datum.MT+datum.NE+datum.NV+datum.NH+datum.NJ+datum.NM+datum.NY+datum.NC+datum.ND+datum.OH+datum.OK+datum.OR+datum.PA+datum.RI+datum.SC+datum.SD+datum.TN+datum.TX+datum.UT+datum.VT+datum.VA+datum.WA+datum.WV+datum.WI+datum.WY" }, ] },{ // Select just the source data for the starting year "name": "firstYearData", "source": "data", "transform": [{ "type": "filter", "test": "datum.year === fromYear" },{ // TODO: autogenerate this list "type": "fold", "fields": ["AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA","KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY"] }] },{ // Select just the source data for the ending year "name": "yearData", "source": "data", "transform": [{ "type": "filter", "test": "datum.year === toYear" },{ "type": "fold", // TODO: autogenerate this list "fields": ["AL","AK","AZ","AR","CA","CO","CT","DE","DC","FL","GA","HI","ID","IL","IN","IA","KS","KY","LA","ME","MD","MA","MI","MN","MS","MO","MT","NE","NV","NH","NJ","NM","NY","NC","ND","OH","OK","OR","PA","RI","SC","SD","TN","TX","UT","VT","VA","WA","WV","WI","WY"] },{ "type": "lookup", "on": "firstYearData", "onKey": "key", "keys": ["key"], "as": ["firstYear"], "default": null },{ "type": "formula", "field": "calc", "expr": "if(isRange, (datum.value - datum.firstYear.value)/datum.firstYear.value, datum.value)" }] },{ "name": "mapData", "url": "map:///Naturalearthdata.com/US_states.map", "format": {"type": "json", "property": "data.features"}, "transform": [{ "type": "geopath", "projection": "albersUsa", "scale": 500, "translate": [200, 100] },{ "type": "lookup", "on": "yearData", "onKey": "key", "keys": ["id"], "as": ["lookup"], "default": null }] },{ "name": "dummyValue", "values": [{}] }], "scales": [{ "name": "color", "type": "linear", "domain": {"data": "yearData", "field": "calc"}, "range": ["#f1f1f0", "#08306b"], "zero": false },{ "name": "diffColor", "type": "linear", "domain": [-1, -0.8, -0.6, -0.3, -0.1, 0, 0.1, 0.3, 0.6, 0.8, 1], "range": ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"], "zero": false },{ "name": "xOverview", "type": "time", "range": "width", "domain": {"data": "totals", "field": "date"} },{ "name": "yOverview", "type": "linear", "rangeMin": {"signal": "overviewHeight"}, "nice": true, "zero": false, "domain": {"data": "totals", "field": "total"} }], "marks": [{ "type": "group", "name": "detail", "properties": { "enter": { "height": {"signal": "detailHeight"}, "width": {"signal": "width"} } }, "marks": [{ "name": "map", "type": "path", "from": {"data": "mapData"}, "properties": { "enter": { "stroke": {"value": "#fff"}, "path": {"field": "layout_path"}, }, "update": { "fill": [ {"test": "isRange", "field": "lookup.calc", "scale": "diffColor"}, {"field": "lookup.calc", "scale": "color"} ]} } }] },{ "type": "group", "name": "overview", "from": { "data": "dummyValue", // HACK: brush_end is needed to fool optimizer, because otherwise legend doesn't auto-update "transform": [{"type": "filter", "test": "(brush_end && 0) || showOverview"}] }, "properties": { "enter": { "x": {"value": 0}, "y": {"signal": "overviewYPos"}, "height": {"signal": "overviewHeight"}, "width": {"signal": "width"}, "fill": {"value": "transparent"} } }, "axes": [ {"type": "x", "scale": "xOverview"} ], "marks": [{ // Draw scale for a single year (I wish we could dynamically pick which scale to use for the legend) "type": "group", // HACK: brush_end is needed to fool optimizer, because otherwise legend doesn't auto-update "from": { "data": "dummyValue", "transform": [{"type": "filter", "test": "(brush_end && 0) || !isRange"}] }, "properties": { "enter": { "width": {"signal": "width"} } }, "legends": [{ "fill": "color", "offset": 20, "properties": {"legend": {"y": {"value": 30} } } }]},{ // Draw scale for a range (I wish we could dynamically pick which scale to use for the legend) "type": "group", "from": { "data": "dummyValue", "transform": [{"type": "filter", "test": "isRange"}] }, "properties": { "enter": { "width": {"signal": "width"} } }, "legends": [{ "fill": "diffColor", "offset": 20, "properties": { "legend": {"y": {"value": 30} }, "labels": { "text": [ {"test": "datum.data===0", "value": "0"}, {"test": "(datum.data%1)===0", "template": "\u007b{datum.data|number:'.0%'}\u007d"}, {"value": ""} ]} } }]},{ "name": "yearLabel", "type": "text", "from": { "data": "dummyValue", "transform": [ {"type": "formula", "field": "text", "expr": "if(isRange,fromYear + '-' + toYear, fromYear)"}, {"type": "formula", "field": "fontSize", "expr": "if(isRange,22,32)"}, ]}, "properties": { "enter": { "x": {"signal": "width", "offset": 72}, "y": {"value": 20}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "middle"}, "fill": {"value": "#08306b"} }, "update": { "fontSize": {"field": "fontSize"}, "text": {"field": "text"} } } },{ "type": "line", "from": { "data": "totals" }, "properties": { "update": { "x": {"scale": "xOverview", "field": "date"}, "y": {"scale": "yOverview", "field": "total"}, "stroke": {"value": "#08306b"}, "strokeWidth": {"value": 2} } } },{ "type": "rect", "from": { "data": "dummyValue", "transform": [ {"type": "formula", "field": "fromDate", "expr": "datetime(fromYear, -6, 1)"}, {"type": "formula", "field": "toDate", "expr": "datetime(toYear, 6, 1)"}, ]}, "properties": { "enter": { "y": {"value": 0}, "height": {"signal": "overviewHeight"}, "fill": {"value": "#333"}, "fillOpacity": {"value": 0.2}, "stroke": {"value": "#f00"}, "strokeDash": {"value": [4]}, }, "update": { "x": {"scale": "xOverview", "field": "fromDate"}, "x2": {"scale": "xOverview", "field": "toDate"} } } }]}, { "name": "tooltip", "type": "group", "from": { "data": "dummyValue", "transform": [ {"type": "filter", "test": "tooltip.datum && tooltip.datum.calc"}, {"type": "formula", "field": "offsetX", "expr": "5"}, {"type": "formula", "field": "offsetY", "expr": "30"}, {"type": "formula", "field": "tipWidth", "expr": "200"}, {"type": "formula", "field": "tipHeight", "expr": "51"}, {"type": "formula", "field": "alignLeft", "expr": "tooltip.x > width - datum.offsetX - datum.tipWidth"}, {"type": "formula", "field": "alignTop", "expr": "tooltip.y > height - datum.offsetY - datum.tipHeight"}, {"type": "formula", "field": "x", "expr": "max(0, tooltip.x + (datum.alignLeft ? -datum.offsetX-datum.tipWidth : datum.offsetX ))"}, {"type": "formula", "field": "y", "expr": "tooltip.y + (datum.alignTop ? -1 : 1) * datum.offsetY"}, {"type": "formula", "field": "lookupYear", "expr": "datetime(fromYear, 0, 1)"}, { "type": "lookup", "on": "totals", "onKey": "lookupYear", "keys": ["date"], "as": ["totals"], "default": null }, {"type": "formula", "field": "relGrowth", "expr": "tooltip.datum.calc/datum.totals.total"}, ]}, "properties": { "update": { "x": {"field": "x" }, "y": {"field": "y" }, "width": {"field": "tipWidth" }, "height": {"field": "tipHeight" }, "fill": {"value": "#fff"}, "fillOpacity": {"value": 0.85}, "stroke": {"value": "#aaa"}, "strokeWidth": {"value": 0.5} } }, "marks": [ { "type": "text", "properties": { "update": { "x": {"value": 6}, "y": {"value": 14}, "text": {"template": "\u007b{tooltip.datum.key}\u007d"}, "fill": {"value": "black"}, "fontWeight": {"value": "bold"} } } }, { "type": "text", "properties": { "update": { "x": {"value": 6}, "y": {"value": 29}, "text": [ {"test": "isRange", "template": "Growth:\t\u007b{tooltip.datum.calc|number:'.1%'}\u007d"}, {"template": "State GDP:\t\u007b{tooltip.datum.calc|number:',.0f'}\u007d"}, ], "fill": {"value": "black"}, } } }, { "type": "text", "properties": { "update": { "x": {"value": 6}, "y": {"value": 44}, "text": [ {"test": "isRange", "template": ""}, {"template": "Percent of total:\t\u007b{parent.relGrowth|number:'.1%'}\u007d"}, ], "fill": {"value": "black"}, } } }, ]} // Draw title at the top of the graph , { "type": "text", "properties": { "enter": { "x": {"signal": "width", "mult": 0.5, "offset": 30}, "y": {"value": -15}, "text": {"value": "Gross Domestic Product by State"}, "fontWeight": {"value": "bold"}, "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#000"} } } } ] } </graph> See or edit source data.