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.
| 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 |
| <!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> |
| 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 |
| 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