JSFiddle - React, Tailwind, and code Playground
by prateekbansal07
HTML
<head>
<meta charset="utf-8">
<title>California Counties: Mercator projection</title>
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="https://use.typekit.com/brf5jpj.js"></script>
<script src="//use.typekit.net/drk2sev.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<style type="text/css">
body {
margin: 0;
background-color: #48494B;
font-family: "proxima-nova", "Source Sans Pro", sans-serif;
}
#container {
width: 800px;
margin-left: 30px;
margin-right: auto;
margin-top: 30px;
padding: 30px;
background-color: white;
box-shadow: 3px 3px 7px #222;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 16px;
margin: 15px 0 10px 0;
}
a {
color: #799DCB;
text-decoration: none;
transition: color .3s, background .3s, border .3s;
}
a:hover {
color: #48494b;
background: #e7e8e9;
}
svg {
background-color: white;
padding-left: 20px;
}
path {
fill: #799dcb;
stroke: #fff;
}
path:hover {
fill:#48494b;
cursor:pointer;
}
#tooltip {
width: 150px;
height: auto;
padding: 5px;
background-color: #fff;
color: #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
pointer-events: none;
position: absolute;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-size: 14px;
line-height: 18px;
}
</style>
</head>
<body>
<body>
<div id="container">
<h1>Counties of California</h1>
<p>Source: <a href="https://www.census.gov/geo/maps-data/data/cbf/cbf_counties.html" target="new">U.S. Census...