Guest User

Untitled

a guest
Feb 19th, 2018
83
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.67 KB | None | 0 0
  1. var dataSet = [
  2. {county: "021", county_name: "Franklin", county_TR_code: "53021", year: "2015", value: 7.5},
  3. {county: "023", county_name: "Garfield", county_TR_code: "53023", year: "2015", value: 6.1},
  4. {county: "025", county_name: "Grant", county_TR_code: "53025", year: "2015", value: 7.1},
  5. {county: "027", county_name: "Grays Harbor", county_TR_code: "53027", year: "2015", value: 8.9},
  6. {county: "029", county_name: "Island", county_TR_code: "53029", year: "2015", value: 6},
  7. {county: "031", county_name: "Jefferson", county_TR_code: "53031", year: "2015", value: 7.1}]
  8.  
  9. // Retrieve data from API
  10. var rawData = dataSet
  11.  
  12. // Define funcitons to find min and max of data set
  13. var minValue = getMin(rawData)
  14. var maxValue = getMax(rawData)
  15. var step = (maxValue-minValue)/7
  16.  
  17.  
  18. // create color range based on Min,Max and Step Value
  19. var employment_domain = [minValue,0,0,0,0,0,0,0];
  20. for(var i=1; i< employment_domain.length; i++){
  21. var tmp = (employment_domain[i-1] + step)
  22. employment_domain[i]= tmp
  23. }
  24. console.log('domain', employment_domain)
  25.  
  26. var employment_color = d3.scaleThreshold()
  27. .domain(employment_domain)
  28. .range(d3.schemeBlues[7])
  29.  
  30.  
  31. var svg = d3.select("svg");
  32. var path = d3.geoPath();
  33.  
  34. // Create variable to hold data
  35. // Dictionary of key value pairs {id: value} --> {censusBlockID: value}
  36. var employmentData = d3.map();
  37.  
  38. // used to asynchronously load topojson maps and data
  39. d3.queue()
  40. .defer(d3.json, "../maps/wa_counties.json") // load in topoJSON map data
  41. //
  42. .defer(rawData, function(d){
  43. console.log('d',d)
  44. employmentData.set(d.county_TR_code, +d.value) // (first refers to county code, second refers to employment value)
  45. } ) // load in data
  46. .await(ready) // create callback function
  47.  
  48. // Callback function
  49. function ready(error, data){
  50. if (error) throw error;
  51.  
  52. // if no error returned retrieve data from topojson file
  53. // used to refer to the features of the county data
  54. var county_data = topojson.feature(data, {
  55. type:"GeometryCollection",
  56. geometries: data.objects.tl_2016_53_tract.geometries
  57. });
  58.  
  59. // identify projection and path
  60. var projection = d3.geoAlbersUsa()
  61. .fitExtent([[20,20], [460, 580]], county_data) // assigns ([padding], [width and height], dataObject)
  62.  
  63. // define path
  64. var geoPath = d3.geoPath()
  65. .projection(projection)
  66.  
  67. // draw map
  68. d3.select("svg.main_data_point").selectAll("path")
  69. .data(county_data.features) //pass in data
  70. .enter()
  71. .append("path")
  72. .attr("d", geoPath) // pass in geoPath object created
  73. .attr("fill", function(d){
  74. return employment_color(d.value = employmentData.get(d.properties.GEOID)); // pass in employement value and ID from topoJSON map
  75. }) // fill in the data
  76.  
  77.  
  78. }
Add Comment
Please, Sign In to add comment