Skip to content

Instantly share code, notes, and snippets.

@mbecica
Last active May 11, 2017 03:32
Show Gist options
  • Select an option

  • Save mbecica/eb3a4017fe6d3e38b1b0c5e93cb59002 to your computer and use it in GitHub Desktop.

Select an option

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment