lazarogamio/.block

## .block
license: mit
border: no
scrolling: no
height: 600

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: Maryland's 3rd District, 1789-2017

  
## base.css
html, body {
	font-family: sans-serif
}

#start {
	display: block;
}

.ticker-sub, .ticker-year {
	text-anchor: middle;
}

.ticker-year {
	font-size: 75px;
}

.ticker-sub {
	text-transform: uppercase;
	font-size: 20px;
	fill: #666;
}

.state-backdrop {
	fill: none;
	stroke: #999;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.district {
	transition: all .3s;
	fill-opacity: 0.05;
	fill: #667c84;
}

.district.current {
	fill: #a00;
	fill-opacity: 1;
}

## index.html
<html>
<head>
	<link href="base.css" rel="stylesheet" />
</head>
<body>

	<svg id="map"></svg>

	<button id="start">Start</button>
	<script src="maryland.js" type="text/javascript"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="md-chart.js" type="text/javascript"></script>
</body>


</html>

## maryland-3.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              maryland-3.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## maryland.js

      
    Raw
  

              maryland.js
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
        
    
## md-chart.js

      
    Raw
  

              md-chart.js
            
          
            View raw
              (Sorry about that, but we can’t show files that are this big right now.)
	html, body {
	font-family: sans-serif
	}

	#start {
	display: block;
	}

	.ticker-sub, .ticker-year {
	text-anchor: middle;
	}

	.ticker-year {
	font-size: 75px;
	}

	.ticker-sub {
	text-transform: uppercase;
	font-size: 20px;
	fill: #666;
	}

	.state-backdrop {
	fill: none;
	stroke: #999;
	stroke-linejoin: round;
	stroke-linecap: round;
	}

	.district {
	transition: all .3s;
	fill-opacity: 0.05;
	fill: #667c84;
	}

	.district.current {
	fill: #a00;
	fill-opacity: 1;
	}
	<html>
	<head>
	<link href="base.css" rel="stylesheet" />
	</head>
	<body>

	<svg id="map"></svg>

	<button id="start">Start</button>
	<script src="maryland.js" type="text/javascript"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="md-chart.js" type="text/javascript"></script>
	</body>


	</html>