Working on a Drought Quick Look. This color gradient is real tacky. I'm just going to color the nodes. Also wanting a nice toolip...coming soon, then that animated Drought Map.
Last active
August 29, 2015 14:19
-
-
Save dhoboy/93df8e83cfd8ca884121 to your computer and use it in GitHub Desktop.
U.S. Drought: quick look 4/7/15
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| state | none | D0 | D1 | D2 | D3 | D4 | |
|---|---|---|---|---|---|---|---|
| Alabama | 44.82 | 37.56 | 14.54 | 3.09 | 0.00 | 0.00 | |
| Alaska | 69.91 | 30.09 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Arizona | 7.07 | 12.71 | 50.73 | 28.51 | 0.97 | 0.00 | |
| Arkansas | 95.66 | 4.34 | 0.00 | 0.00 | 0.00 | 0.00 | |
| California | 0.15 | 1.74 | 4.67 | 26.84 | 22.28 | 44.32 | |
| Colorado | 25.49 | 22.77 | 11.98 | 39.75 | 0.00 | 0.00 | |
| Connecticut | 100.00 | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Delaware | 100.00 | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Florida | 65.34 | 25.40 | 8.36 | 0.90 | 0.00 | 0.00 | |
| Georgia | 51.17 | 46.56 | 2.27 | 0.00 | 0.00 | 0.00 | |
| Hawaii | 27.26 | 49.41 | 23.33 | 0.00 | 0.00 | 0.00 | |
| Idaho | 30.47 | 30.48 | 21.51 | 15.13 | 2.41 | 0.00 | |
| Illinois | 75.86 | 24.14 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Indiana | 78.44 | 21.56 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Iowa | 51.09 | 48.89 | 0.01 | 0.00 | 0.00 | 0.00 | |
| Kansas | 6.52 | 24.78 | 41.03 | 22.75 | 4.92 | 0.00 | |
| Kentucky | 100.00 | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Louisiana | 55.67 | 25.79 | 18.54 | 0.00 | 0.00 | 0.00 | |
| Maine | 34.30 | 65.70 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Maryland | 99.78 | 0.22 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Massachusetts | 92.95 | 7.05 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Michigan | 32.49 | 66.88 | 0.63 | 0.00 | 0.00 | 0.00 | |
| Minnesota | 0.01 | 8.05 | 91.94 | 0.00 | 0.00 | 0.00 | |
| Mississippi | 73.91 | 22.33 | 3.76 | 0.00 | 0.00 | 0.00 | |
| Missouri | 88.21 | 11.79 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Montana | 94.63 | 5.37 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Nebraska | 31.54 | 45.97 | 22.49 | 0.00 | 0.00 | 0.00 | |
| Nevada | 0.00 | 0.07 | 14.22 | 37.75 | 29.58 | 18.38 | |
| New Hampshire | 36.94 | 63.06 | 0.00 | 0.00 | 0.00 | 0.00 | |
| New Jersey | 93.00 | 7.00 | 0.00 | 0.00 | 0.00 | 0.00 | |
| New Mexico | 19.45 | 18.44 | 43.36 | 18.75 | 0.00 | 0.00 | |
| New York | 30.48 | 69.52 | 0.00 | 0.00 | 0.00 | 0.00 | |
| North Carolina | 59.48 | 40.52 | 0.00 | 0.00 | 0.00 | 0.00 | |
| North Dakota | 5.18 | 73.68 | 21.14 | 0.00 | 0.00 | 0.00 | |
| Ohio | 95.34 | 4.66 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Oklahoma | 16.76 | 14.97 | 15.53 | 13.02 | 28.13 | 11.60 | |
| Oregon | 14.36 | 3.35 | 34.36 | 14.22 | 33.61 | 0.12 | |
| Pennsylvania | 45.83 | 54.17 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Rhode Island | 100.00 | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 | |
| South Carolina | 79.13 | 20.87 | 0.00 | 0.00 | 0.00 | 0.00 | |
| South Dakota | 0.57 | 56.65 | 42.78 | 0.00 | 0.00 | 0.00 | |
| Tennessee | 97.10 | 2.90 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Texas | 51.15 | 12.48 | 10.98 | 9.93 | 11.58 | 3.87 | |
| Utah | 0.00 | 0.95 | 45.83 | 43.90 | 9.32 | 0.00 | |
| Vermont | 17.23 | 82.77 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Virginia | 84.92 | 15.08 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Washington | 34.56 | 37.31 | 28.13 | 0.00 | 0.00 | 0.00 | |
| West Virginia | 100.00 | 0.00 | 0.00 | 0.00 | 0.00 | 0.00 | |
| Wisconsin | 0.00 | 44.64 | 55.36 | 0.00 | 0.00 | 0.00 | |
| Wyoming | 69.70 | 22.70 | 6.84 | 0.75 | 0.00 | 0.00 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| text { | |
| font: 30px sans-serif; | |
| } | |
| .abbv { | |
| font: 13px sans-serif; | |
| } | |
| .node { | |
| fill: #ffffff; | |
| fill-opacity: 0; | |
| stroke: #252525; | |
| stroke-width: 2px; | |
| } | |
| .node:hover { | |
| stroke: #ffff33; | |
| position: relative; | |
| } | |
| div[data-title]:hover::after { | |
| content: attr(data-title); | |
| padding: 4px 8px; | |
| color: #ffff33; | |
| position: absolute; | |
| left: 0; | |
| top: 100%; | |
| white-space: nowrap; | |
| z-index: 20px; | |
| /*-moz-border-radius: 5px; | |
| -webkit-border-radius: 5px;*/ | |
| border-radius: 5px; | |
| /*-moz-box-shadow: 0px 0px 4px #222; | |
| -webkit-box-shadow: 0px 0px 4px #222;*/ | |
| box-shadow: 0px 0px 4px #222; | |
| /*background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc)); | |
| background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); | |
| background-image: -o-linear-gradient(top, #eeeeee, #cccccc); | |
| */ | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 620, | |
| padding = 30, | |
| format = d3.format(".2%"); | |
| // background color scale | |
| var color = d3.scale.linear() | |
| .domain([0, width]) | |
| .range(["#1c9099", "#d95f0e"]); | |
| var svg = d3.select("body").append("svg") | |
| .attr("height", height) | |
| .attr("width", width) | |
| .style("position", "relative") | |
| // set background color from wet to dry | |
| svg.selectAll("rect") | |
| .data(d3.range(width)) | |
| .enter() | |
| .append("rect") | |
| .attr("class", "background") | |
| .attr("x", function(d) { return d; }) | |
| .attr("y", 0) | |
| .attr("width", 1) | |
| .attr("height", height) | |
| .attr("fill", function(d) { return color(d); }); | |
| svg.append("text") | |
| .attr("x", width / 8) | |
| .attr("y", height / 2) | |
| .attr("fill", "#016c59") | |
| .text("WET") | |
| svg.append("text") | |
| .attr("x", width * (4/5)) | |
| .attr("y", height / 2) | |
| .attr("fill", "#bd0026") | |
| .text("DRY") | |
| // node scales | |
| var r = d3.scale.linear() | |
| .range([12, 20]); | |
| var x = d3.scale.linear() | |
| .range([padding, width-padding]); | |
| var y = d3.scale.linear() | |
| .range([height-padding, padding]); | |
| // create nodes, size according to acres of farmland | |
| // position nodes according to dryness | |
| d3.csv("state_farm_acreage.csv", form_state_data, function(states) { | |
| states.sort(function(a, b) { | |
| if (a.acreage > b.acreage) { | |
| return 1; | |
| } | |
| if (a.acreage < b.acreage) { | |
| return -1; | |
| } | |
| if (a.acreage == b.acreage) { | |
| return 0; | |
| } | |
| }); | |
| r.domain([0, d3.max(states, function(d){ return d.acreage; })]) | |
| d3.csv("drought_info_categorical_4_7_15.csv", form_drought_data, function (drought) { | |
| x.domain([0, d3.max(drought, function(d){ return ((d.D4 * .5) + (d.D3 * .4) + (d.D2 * .3) + (d.D1 * .2) + (d.D0 * .1)); })]) | |
| y.domain([0, states.length - 1]) | |
| //console.log(drought) | |
| d3.csv("state_abbrev.csv", function(abbrev) { | |
| var nodes = svg.selectAll(".node") | |
| .data(states); | |
| // draw state abbrev first | |
| nodes.enter() | |
| .append("text") | |
| .attr("class", "abbv") | |
| .attr("x", function(d) { | |
| var v; | |
| drought.forEach(function(f) { | |
| if (f.state == d.state) { | |
| v = ((f.D4 * .5) + (f.D3 * .4) + (f.D2 * .3) + (f.D1 * .2) + (f.D0 * .1)); | |
| } | |
| }) | |
| return x(v); | |
| }) | |
| .attr("y", function(d, i){ return y(i); }) | |
| .attr("text-anchor", "middle") | |
| .attr("dy", ".4em") | |
| .text(function(d){ | |
| var v; | |
| abbrev.forEach(function(a) { | |
| if (a.state == d.state) { | |
| v = a.abbrev; | |
| } | |
| }) | |
| return v; | |
| }) | |
| // overlay nodes with listener + hover title | |
| nodes.enter() | |
| .append("circle") | |
| .attr("class", "node") | |
| .attr("cx", function(d){ | |
| var v; | |
| drought.forEach(function(f) { | |
| if (f.state == d.state) { | |
| v = ((f.D4 * .5) + (f.D3 * .4) + (f.D2 * .3) + (f.D1 * .2) + (f.D0 * .1)); | |
| } | |
| }) | |
| return x(v); | |
| }) | |
| .attr("cy", function(d, i){ return y(i); }) | |
| .attr("r", function(d){ return r(d.acreage); }) | |
| /*.append("title") | |
| .text(function(d){ | |
| var v; | |
| drought.forEach(function(f) { | |
| if (f.state == d.state) { | |
| v = f; | |
| } | |
| }) | |
| // display each val D0, D1, D2, D3, D4... | |
| console.log(v) | |
| var ans = ""; | |
| if (v.D0 > 0) { | |
| //ans += v.D0 | |
| } | |
| if (v.D1 > 0) { | |
| } | |
| if (v.D2 > 0) { | |
| } | |
| if (v.D3 > 0) { | |
| } | |
| if (v.D4 > 0) { | |
| } | |
| return d.state + "D0" + "%"; | |
| })*/ | |
| }); | |
| }); | |
| }); | |
| function form_state_data(d) { | |
| d.acreage = +d.acreage; | |
| d.acreage_per_farm = +d.acreage_per_farm; | |
| d.farms = +d.farms; | |
| return d; | |
| } | |
| function form_drought_data(d) { | |
| d.D0 = +d.D0; | |
| d.D1 = +d.D1; | |
| d.D2 = +d.D2; | |
| d.D3 = +d.D3; | |
| d.D4 = +d.D4; | |
| d.none = +d.none; | |
| return d; | |
| } | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| state | abbrev | |
|---|---|---|
| Alabama | AL | |
| Alaska | AK | |
| Arizona | AZ | |
| Arkansas | AR | |
| California | CA | |
| Colorado | CO | |
| Connecticut | CT | |
| Delaware | DE | |
| Florida | FL | |
| Georgia | GA | |
| Hawaii | HI | |
| Idaho | ID | |
| Illinois | IL | |
| Indiana | IN | |
| Iowa | IA | |
| Kansas | KS | |
| Kentucky | KY | |
| Louisiana | LA | |
| Maine | ME | |
| Maryland | MD | |
| Massachusetts | MA | |
| Michigan | MI | |
| Minnesota | MN | |
| Mississippi | MS | |
| Missouri | MO | |
| Montana | MT | |
| Nebraska | NE | |
| Nevada | NV | |
| New Hampshire | NH | |
| New Jersey | NJ | |
| New Mexico | NM | |
| New York | NY | |
| North Carolina | NC | |
| North Dakota | ND | |
| Ohio | OH | |
| Oklahoma | OK | |
| Oregon | OR | |
| Pennsylvania | PA | |
| Rhode Island | RI | |
| South Carolina | SC | |
| South Dakota | SD | |
| Tennessee | TN | |
| Texas | TX | |
| Utah | UT | |
| Vermont | VT | |
| Virginia | VA | |
| Washington | WA | |
| West Virginia | WV | |
| Wisconsin | WI | |
| Wyoming | WY |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| state | farms | acreage | acreage_per_farm | |
|---|---|---|---|---|
| Alabama | 48500 | 9000000 | 186 | |
| Alaska | 680 | 880000 | 1294 | |
| Arizona | 15500 | 26100000 | 1684 | |
| Arkansas | 49300 | 13700000 | 278 | |
| California | 81700 | 25400000 | 311 | |
| Colorado | 36100 | 31200000 | 864 | |
| Connecticut | 4900 | 400000 | 82 | |
| Delaware | 2480 | 490000 | 198 | |
| Florida | 47500 | 9250000 | 195 | |
| Georgia | 47400 | 10300000 | 217 | |
| Hawaii | 7500 | 1110000 | 148 | |
| Idaho | 25700 | 11400000 | 444 | |
| Illinois | 76000 | 26700000 | 351 | |
| Indiana | 62000 | 14800000 | 239 | |
| Iowa | 92400 | 30800000 | 333 | |
| Kansas | 65500 | 46200000 | 705 | |
| Kentucky | 85700 | 14000000 | 163 | |
| Louisiana | 30000 | 8050000 | 268 | |
| Maine | 8100 | 1350000 | 167 | |
| Maryland | 12800 | 2050000 | 160 | |
| Massachusetts | 7700 | 520000 | 68 | |
| Michigan | 54900 | 10000000 | 182 | |
| Minnesota | 81000 | 26900000 | 332 | |
| Mississippi | 42400 | 11150000 | 263 | |
| Missouri | 108000 | 29100000 | 269 | |
| Montana | 29400 | 60800000 | 2,068 | |
| Nebraska | 47200 | 45600000 | 966 | |
| Nevada | 3100 | 5900000 | 1,903 | |
| New Hampshire | 4150 | 470000 | 113 | |
| New Jersey | 10300 | 730000 | 71 | |
| New Mexico | 21000 | 43200000 | 2057 | |
| New York | 36300 | 7000000 | 193 | |
| North Carolina | 52400 | 8600000 | 164 | |
| North Dakota | 31900 | 39600000 | 1241 | |
| Ohio | 74700 | 13700000 | 183 | |
| Oklahoma | 86500 | 35200000 | 407 | |
| Oregon | 38800 | 16400000 | 423 | |
| Pennsylvania | 63200 | 7750000 | 123 | |
| Rhode Island | 1220 | 70000 | 57 | |
| South Carolina | 27000 | 4900000 | 181 | |
| South Dakota | 31800 | 43700000 | 1,374 | |
| Tennessee | 78300 | 10900000 | 139 | |
| Texas | 247500 | 130400000 | 527 | |
| Utah | 16600 | 11100000 | 669 | |
| Vermont | 7000 | 1220000 | 174 | |
| Virginia | 47300 | 8050000 | 170 | |
| Washington | 39500 | 14800000 | 375 | |
| West Virginia | 23000 | 3650000 | 159 | |
| Wisconsin | 78000 | 15200000 | 195 | |
| Wyoming | 11000 | 30200000 | 2745 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment