Last active
December 22, 2016 16:53
-
-
Save diggetybo/77469aa2acec38f1870197724ea671d6 to your computer and use it in GitHub Desktop.
US JSON Map
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
| // d3.tip | |
| // Copyright (c) 2013 Justin Palmer | |
| // | |
| // Tooltips for d3.js SVG visualizations | |
| // Public - contructs a new tooltip | |
| // | |
| // Returns a tip | |
| d3.tip = function() { | |
| var direction = d3_tip_direction, | |
| offset = d3_tip_offset, | |
| html = d3_tip_html, | |
| node = initNode(), | |
| svg = null, | |
| point = null, | |
| target = null | |
| function tip(vis) { | |
| svg = getSVGNode(vis) | |
| point = svg.createSVGPoint() | |
| document.body.appendChild(node) | |
| } | |
| // Public - show the tooltip on the screen | |
| // | |
| // Returns a tip | |
| tip.show = function() { | |
| var args = Array.prototype.slice.call(arguments) | |
| if(args[args.length - 1] instanceof SVGElement) target = args.pop() | |
| var content = html.apply(this, args), | |
| poffset = offset.apply(this, args), | |
| dir = direction.apply(this, args), | |
| nodel = d3.select(node), i = 0, | |
| coords | |
| nodel.html(content) | |
| .style({ opacity: 1, 'pointer-events': 'all' }) | |
| while(i--) nodel.classed(directions[i], false) | |
| coords = direction_callbacks.get(dir).apply(this) | |
| nodel.classed(dir, true).style({ | |
| top: (coords.top + poffset[0]) + 'px', | |
| left: (coords.left + poffset[1]) + 'px' | |
| }) | |
| return tip | |
| } | |
| // Public - hide the tooltip | |
| // | |
| // Returns a tip | |
| tip.hide = function() { | |
| nodel = d3.select(node) | |
| nodel.style({ opacity: 0, 'pointer-events': 'none' }) | |
| return tip | |
| } | |
| // Public: Proxy attr calls to the d3 tip container. Sets or gets attribute value. | |
| // | |
| // n - name of the attribute | |
| // v - value of the attribute | |
| // | |
| // Returns tip or attribute value | |
| tip.attr = function(n, v) { | |
| if (arguments.length < 2 && typeof n === 'string') { | |
| return d3.select(node).attr(n) | |
| } else { | |
| var args = Array.prototype.slice.call(arguments) | |
| d3.selection.prototype.attr.apply(d3.select(node), args) | |
| } | |
| return tip | |
| } | |
| // Public: Proxy style calls to the d3 tip container. Sets or gets a style value. | |
| // | |
| // n - name of the property | |
| // v - value of the property | |
| // | |
| // Returns tip or style property value | |
| tip.style = function(n, v) { | |
| if (arguments.length < 2 && typeof n === 'string') { | |
| return d3.select(node).style(n) | |
| } else { | |
| var args = Array.prototype.slice.call(arguments) | |
| d3.selection.prototype.style.apply(d3.select(node), args) | |
| } | |
| return tip | |
| } | |
| // Public: Set or get the direction of the tooltip | |
| // | |
| // v - One of n(north), s(south), e(east), or w(west), nw(northwest), | |
| // sw(southwest), ne(northeast) or se(southeast) | |
| // | |
| // Returns tip or direction | |
| tip.direction = function(v) { | |
| if (!arguments.length) return direction | |
| direction = v == null ? v : d3.functor(v) | |
| return tip | |
| } | |
| // Public: Sets or gets the offset of the tip | |
| // | |
| // v - Array of [x, y] offset | |
| // | |
| // Returns offset or | |
| tip.offset = function(v) { | |
| if (!arguments.length) return offset | |
| offset = v == null ? v : d3.functor(v) | |
| return tip | |
| } | |
| // Public: sets or gets the html value of the tooltip | |
| // | |
| // v - String value of the tip | |
| // | |
| // Returns html value or tip | |
| tip.html = function(v) { | |
| if (!arguments.length) return html | |
| html = v == null ? v : d3.functor(v) | |
| return tip | |
| } | |
| function d3_tip_direction() { return 'n' } | |
| function d3_tip_offset() { return [0, 0] } | |
| function d3_tip_html() { return ' ' } | |
| var direction_callbacks = d3.map({ | |
| n: direction_n, | |
| s: direction_s, | |
| e: direction_e, | |
| w: direction_w, | |
| nw: direction_nw, | |
| ne: direction_ne, | |
| sw: direction_sw, | |
| se: direction_se | |
| }), | |
| directions = direction_callbacks.keys() | |
| function direction_n() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.n.y - node.offsetHeight, | |
| left: bbox.n.x - node.offsetWidth / 2 | |
| } | |
| } | |
| function direction_s() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.s.y, | |
| left: bbox.s.x - node.offsetWidth / 2 | |
| } | |
| } | |
| function direction_e() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.e.y - node.offsetHeight / 2, | |
| left: bbox.e.x | |
| } | |
| } | |
| function direction_w() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.w.y - node.offsetHeight / 2, | |
| left: bbox.w.x - node.offsetWidth | |
| } | |
| } | |
| function direction_nw() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.nw.y - node.offsetHeight, | |
| left: bbox.nw.x - node.offsetWidth | |
| } | |
| } | |
| function direction_ne() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.ne.y - node.offsetHeight, | |
| left: bbox.ne.x | |
| } | |
| } | |
| function direction_sw() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.sw.y, | |
| left: bbox.sw.x - node.offsetWidth | |
| } | |
| } | |
| function direction_se() { | |
| var bbox = getScreenBBox() | |
| return { | |
| top: bbox.se.y, | |
| left: bbox.e.x | |
| } | |
| } | |
| function initNode() { | |
| var node = d3.select(document.createElement('div')) | |
| node.style({ | |
| position: 'absolute', | |
| opacity: 0, | |
| pointerEvents: 'none', | |
| boxSizing: 'border-box' | |
| }) | |
| return node.node() | |
| } | |
| function getSVGNode(el) { | |
| el = el.node() | |
| if(el.tagName.toLowerCase() == 'svg') | |
| return el | |
| return el.ownerSVGElement | |
| } | |
| // Private - gets the screen coordinates of a shape | |
| // | |
| // Given a shape on the screen, will return an SVGPoint for the directions | |
| // n(north), s(south), e(east), w(west), ne(northeast), se(southeast), nw(northwest), | |
| // sw(southwest). | |
| // | |
| // +-+-+ | |
| // | | | |
| // + + | |
| // | | | |
| // +-+-+ | |
| // | |
| // Returns an Object {n, s, e, w, nw, sw, ne, se} | |
| function getScreenBBox() { | |
| var targetel = target || d3.event.target, | |
| bbox = {}, | |
| matrix = targetel.getScreenCTM(), | |
| tbbox = targetel.getBBox(), | |
| width = tbbox.width, | |
| height = tbbox.height, | |
| x = tbbox.x, | |
| y = tbbox.y, | |
| scrollTop = document.documentElement.scrollTop || document.body.scrollTop, | |
| scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft | |
| point.x = x + scrollLeft | |
| point.y = y + scrollTop | |
| bbox.nw = point.matrixTransform(matrix) | |
| point.x += width | |
| bbox.ne = point.matrixTransform(matrix) | |
| point.y += height | |
| bbox.se = point.matrixTransform(matrix) | |
| point.x -= width | |
| bbox.sw = point.matrixTransform(matrix) | |
| point.y -= height / 2 | |
| bbox.w = point.matrixTransform(matrix) | |
| point.x += width | |
| bbox.e = point.matrixTransform(matrix) | |
| point.x -= width / 2 | |
| point.y -= height / 2 | |
| bbox.n = point.matrixTransform(matrix) | |
| point.y += height | |
| bbox.s = point.matrixTransform(matrix) | |
| return bbox | |
| } | |
| return tip | |
| }; |
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 | fxb | |
|---|---|---|
| Alabama | None | |
| Alaska | None | |
| Arizona | 100 | |
| Arkansas | None | |
| California | 88 | |
| Colorado | None | |
| Connecticut | 100 | |
| Delaware | None | |
| Florida | None | |
| Georgia | None | |
| Hawaii | None | |
| Iowa | None | |
| Idaho | 100 | |
| Illinois | None | |
| Indiana | None | |
| Kansas | 100 | |
| Kentucky | None | |
| Louisiana | 100 | |
| Massachusetts | 100 | |
| Maine | None | |
| Maryland | None | |
| Michigan | 100 | |
| Minnesota | 0 | |
| Mississippi | None | |
| Missouri | 100 | |
| Montana | None | |
| Nebraska | None | |
| North Carolina | None | |
| North Dakota | None | |
| New Hampshire | 100 | |
| New Jersey | 100 | |
| New Mexico | None | |
| Nevada | 100 | |
| New York | 93 | |
| Ohio | 100 | |
| Oklahoma | None | |
| Oregon | None | |
| Pennsylvania | 0 | |
| Rhode Island | 100 | |
| South Carolina | None | |
| South Dakota | 100 | |
| Tennessee | None | |
| Texas | 100 | |
| Utah | None | |
| Virginia | 100 | |
| Vermont | None | |
| Washington | 100 | |
| West Virginia | None | |
| Wisconsin | 100 | |
| Wyoming | 22 |
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> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="d3tip.js"></script> | |
| <style type="text/css"> | |
| /* On mouse hover, lighten state color */ | |
| path:hover { | |
| fill-opacity: .7; | |
| } | |
| .d3-tip { | |
| line-height: 1; | |
| font-weight: bold; | |
| font-size: 14px; | |
| padding: 12px; | |
| background: rgba(0, 0, 0, 0.6); | |
| color: #fff; | |
| position:relative; | |
| border-radius: .5px; | |
| pointer-events: none; | |
| } | |
| /* Creates a small triangle extender for the tooltip */ | |
| /* Style northward tooltips differently */ | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| img { | |
| position:relative; | |
| left:100px; | |
| } | |
| /* Legend Font Style */ | |
| body { | |
| font: 11px sans-serif; | |
| } | |
| /*svg { | |
| position:relative; | |
| top: 100px; | |
| }*/ | |
| /* Legend Position Style */ | |
| .legend { | |
| position:absolute; | |
| left:800px; | |
| top:350px; | |
| } | |
| </style> | |
| </head> | |
| <div id="tooltip-container"></div> | |
| <div id="bar-area"></div> | |
| <body> | |
| <script type="text/javascript"> | |
| //Width and height of map | |
| var width = 960; | |
| var height = 500; | |
| var margins = { left: 0, top: 100, right: 0, bottom: 0 }; | |
| // D3 Projection | |
| var projection = d3.geo.albersUsa() | |
| .translate([width/2, height/2]) // translate to center of screen | |
| .scale([1000]); // scale things down so see entire US | |
| // Define path generator | |
| var path = d3.geo.path() // path generator that will convert GeoJSON to SVG paths | |
| .projection(projection); // tell path generator to use albersUsa projection | |
| // Define linear scale for output | |
| var color = d3.scale.linear() | |
| .range(["#c3e2ff","#15198e"]); | |
| //Create SVG element and append map to the SVG | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height+margins.top); | |
| svg.append('text') | |
| .text('USA JSON Map') | |
| .attr('font-size','48px') | |
| .attr('transform', 'translate(' + 30 + ',' +70 + ')') | |
| .attr('font-family','Play'); | |
| svg.append('text') | |
| .text('Data as of 12/2016') | |
| .attr('font-size','24px') | |
| .attr('transform', 'translate(' + 35 + ',' +100 + ')') | |
| .attr('font-family','Play'); | |
| // Load in my states data! | |
| d3.tsv("fxb_util.tsv", function(data) { | |
| color.domain([0,100]); // setting the range of the input data | |
| // Load GeoJSON data and merge with states data | |
| d3.json("us-states.json", function(json) { | |
| for (var i = 0; i < data.length; i++) { | |
| // Grab State Name | |
| var dataState = data[i].state; | |
| // Grab data value | |
| var dataValue = data[i].fxb; | |
| // Find the corresponding state inside the GeoJSON | |
| for (var j = 0; j < json.features.length; j++) { | |
| var jsonState = json.features[j].properties.name; | |
| if (dataState == jsonState) { | |
| // Copy the data value into the JSON | |
| json.features[j].properties.fxb = dataValue; | |
| // Stop looking through the JSON | |
| break; | |
| } | |
| } | |
| } | |
| //var coordinates = d3.mouse(this); | |
| var tip = d3.tip() | |
| .attr('class', 'd3-tip') | |
| .offset([0, 0]) | |
| .html(function(d) { | |
| html = ""; | |
| html += "<span style='color:white'>" + d.properties.name + "</span>"; | |
| html += "</span><br>"; | |
| html += "<span style='color:white'>" + d.properties.fxb + "</span>"; | |
| html += d.properties.fxb >=0 ? "%":""; | |
| return html; | |
| }) | |
| svg.call(tip); | |
| // Bind the data to the SVG and create one path per GeoJSON feature | |
| svg.selectAll("path") | |
| .data(json.features) | |
| .enter() | |
| .append("path") | |
| .attr("d", path) | |
| .attr('transform', 'translate(' + margins.left + ',' + margins.top + ')') | |
| .on('mouseover', tip.show) | |
| .on('mouseout', tip.hide) | |
| .style("stroke", "#fff") | |
| .style("stroke-linejoin","round") | |
| .style("stroke-width", "1.5") | |
| .style("fill", function(d) { | |
| // Get data value | |
| var value = d.properties.fxb; | |
| if (value=='None') { | |
| return "#999999" | |
| } | |
| if (value) { | |
| //If value exists… | |
| return color(value); | |
| } else { | |
| //If value is undefined… | |
| return "#999999"; | |
| } | |
| }); | |
| //--------------------bars | |
| var values = data.fxb.sort(function(a, b) { | |
| return -(a - b); | |
| }); | |
| var name_value_array = json.features.name; | |
| var name_values = name_value_array.sort(function(a, b) { | |
| return -(a.value - b.value); | |
| }); | |
| var left_width = 150; | |
| var x = d3.scale.linear() | |
| .domain([0, d3.max(values)]) | |
| .range([0, width]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("top"); | |
| var gap = 2; | |
| var bar_height = 20; | |
| // redefine y for adjusting the gap | |
| var y = d3.scale.ordinal() | |
| .domain(names) | |
| .rangeBands([0, (bar_height + 2 * gap) * data.length]); | |
| var chart = d3.select("#bar-area") | |
| .append('svg') | |
| .attr('class', 'chart') | |
| .attr('width', left_width + width + 100) | |
| .attr('height', (bar_height + gap * 2) * data.length + 30) | |
| .append("g") | |
| .attr("transform", "translate(10, 20)"); | |
| chart.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(" + left_width + ", 0)") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("transform", "rotate(90) translate(10, " + (-width - 20) + ")") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "right") | |
| .text(d.id); | |
| chart.selectAll(".tick").append("line") | |
| .attr("x1", 0) | |
| .attr("x2", 0) | |
| .attr("y1", 0) | |
| .attr("y2", (bar_height + gap * 2) * data.length); | |
| chart.selectAll("rect") | |
| .data(name_values) | |
| .enter().append("rect") | |
| .attr("x", left_width) | |
| .attr("y", function(d) { return y(d.name) + gap; }) | |
| .attr("name", function(d, i) { | |
| return d.name; | |
| }) | |
| .attr("width", function(d, i) { | |
| return x(d.fxb); | |
| }) | |
| .attr("height", bar_height) | |
| .style("fill", function(d) { | |
| var i = quantize(d.fxb); | |
| var color = color(d.fxb); | |
| return color; | |
| }); | |
| //--------------------barsend | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment