Skip to content

Instantly share code, notes, and snippets.

@mbecica
Last active May 11, 2017 03:32
Show Gist options
  • Save mbecica/eb3a4017fe6d3e38b1b0c5e93cb59002 to your computer and use it in GitHub Desktop.
Save mbecica/eb3a4017fe6d3e38b1b0c5e93cb59002 to your computer and use it in GitHub Desktop.
US Fertility Clinics
height: 600
border: no
license: gpl-3.0
county count
01073 3
01089 1
01097 2
02122 1
04013 9
04019 4
05119 1
06001 2
06013 2
06019 1
06037 28
06041 2
06053 1
06059 15
06061 1
06065 1
06067 1
06071 1
06073 7
06075 3
06079 1
06081 1
06083 1
06085 5
06095 1
06097 1
06111 1
06113 1
08001 2
08005 4
08031 2
08035 4
08039 1
08041 2
08069 1
08123 1
09001 7
09003 1
09009 1
10003 2
11001 3
12001 1
12009 1
12011 4
12031 4
12033 1
12057 4
12071 2
12086 4
12095 4
12099 3
12101 1
12103 1
12115 1
12117 2
13051 1
13089 1
13121 4
13215 1
13245 2
15003 5
16001 1
16015 1
17007 1
17031 17
17043 8
17089 1
17093 2
17097 2
17143 1
17167 1
17197 3
17201 1
18011 1
18057 8
18095 1
18097 7
18163 1
18173 1
19049 1
19103 1
19153 1
20091 3
20173 1
21029 1
21049 1
21067 3
21111 3
22017 1
22033 1
22051 1
22055 1
22071 1
22103 1
23005 1
24005 4
24031 5
24510 1
25013 1
25017 4
25021 1
25025 4
26081 1
26093 1
26099 1
26125 8
26161 1
26163 1
27053 3
27109 1
27123 1
27163 1
28049 3
28121 2
29019 2
29027 2
29047 1
29095 1
29183 1
29189 3
29510 1
30003 1
30111 1
31055 2
31153 1
32003 4
32031 1
33009 1
34003 6
34005 4
34007 1
34013 2
34019 1
34021 2
34023 1
34025 2
34027 1
34029 1
34031 3
34035 2
34041 1
35001 1
36001 1
36027 1
36029 1
36047 2
36055 2
36059 5
36061 19
36067 2
36079 1
36081 1
36085 1
36103 1
36119 3
37025 1
37037 1
37051 1
37057 1
37063 3
37065 1
37067 2
37081 1
37119 3
37147 1
37183 5
38017 1
39017 1
39035 3
39041 1
39049 2
39061 3
39095 1
39113 2
39153 2
39165 1
40109 2
40143 1
41039 1
41051 3
42003 3
42011 1
42029 1
42043 1
42045 3
42075 1
42077 3
42091 5
42093 1
42095 1
42101 3
42133 1
44007 1
45019 2
45045 2
45063 1
46099 1
47019 1
47037 2
47065 2
47093 2
47105 1
47157 2
47171 1
47179 1
48027 1
48029 7
48085 5
48113 8
48121 5
48141 1
48167 1
48201 9
48215 1
48303 2
48339 1
48439 3
48453 5
49035 2
49049 2
50007 2
51003 1
51013 1
51041 2
51059 5
51069 1
51087 2
51600 1
51710 1
51760 2
51810 2
51840 1
53033 6
53045 1
53053 2
53063 2
53067 1
53073 1
54011 2
54039 1
54061 1
54099 1
55009 1
55025 2
55063 1
55079 2
55133 2
72021 1
72025 1
72031 1
72033 2
72061 1
72127 2
72139 1
<!DOCTYPE HTML>
<body>
<script src="http://d3js.org/d3.v4.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<style>
.bubble {
fill: rgb(52, 157, 82);
fill-opacity: .5;
stroke: rgb(52, 157, 82);
stroke-width: .5px;
}
.bubble :hover {
stroke: rgb(0, 68, 27);
}
.states {
stroke: #fff;
fill: none;
stroke-linejoin: round;
}
.land {
fill: #ddd;
}
.toolTip {
position: absolute;
display: none;
max-width: 300px;
height: auto;
background-color: rgba(1,1,1,.7);
border: 1px solid #111;
padding:3px 8px;
text-align: center;
font-size:11px;
color:#fff;
font-family:Arial,sans-serif;
line-height:1.4em;
border-radius:3px;
}
.toolTip .county {
color:#ddd;
}
</style>
<script>
var width = 960,
height = 600;
var path = d3.geoPath();
var radius = d3.scaleSqrt()
.domain([0, 500])
.range([0, 100]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var tooltip = d3.select("body").append("div").attr("class", "toolTip");
var countyIds = d3.map();
d3.queue()
.defer(d3.json, "us.json")
.defer(d3.csv, "county-counts.csv")
.await(ready);
function ready(error, s, c) {
if (error) { console.log(error) }
topojson.feature(s, s.objects.counties).features.forEach(function(d, i) {
countyIds.set(d.id, d);
});
svg.append("path")
.datum(topojson.feature(s, s.objects.nation))
.attr("class", "land")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(s, s.objects.states, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
svg.append("g")
.attr("class", "bubble")
.selectAll("circle")
.data(c
.filter(function(d) {return countyIds.has(d.county)})
.sort(function(a, b) { return b.count - a.count; })
)
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + path.centroid(countyIds.get(d.county)) + ")"; })
.attr("r", function(d) {return radius(d.count); })
.on("mousemove", function(d){
tooltip
.style("left", path.centroid(countyIds.get(d.county))[0] -55 + "px")
.style("top", d3.event.pageY - 50 + "px")
.style("display", "inline-block")
.html( "<span class='county'>" +
countyIds.get(d.county).properties.name +
"</span></br>" + d.count + " Fertility Clinics");
})
.on("mouseout", function(d){ tooltip.style("display", "none");});
}
</script>
</body>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment