Alan Smith alansmithy

## .block
license: mit

## README.md

      
              3 files
            
          
              1 fork
            
          
              0 comments
            
          
              0 stars
            
          
                alansmithy
                / README.md
            
            
              Last active
              June 21, 2019 19:39
            
              
                d3js - enter(), update() and exit()
              
          
    This is a simple example of enter/update/exit in d3js.
2 arrays - of differing length - are used to generate alternating sequences of bubbles.
.enter() creates the initial join of data to elements, creating one circle element for every data element in the array.
After the button is clicked, the alternative array is rejoined to the graphical elements.
Because each array is of a different length, this means we must use .exit() to remove any circle elements no longer needed and  create any new circle elements by using .enter().

  
## README.md

      
              4 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                alansmithy
                / README.md
            
            
              Last active
              August 29, 2015 14:19
            
              
                Using Pym.js to create a dynamic, responsive graphic
              
          
    Pym.js

Pym.js by NPR is a really useful tool for deploying responsive SVG graphics.
Pym.js works by creating dynamic iframes on a (parent) page which can transmit window-size changes to an embedded (child) page. The child can also send changes back to the parent if interaction causes the embedded item to change in height. Crucially, the child page can be set to redraw its content when a window is resized, allowing different content to be generated depending on the size of the iframe.
This playful (and artistically inept) example illustrates the concept by using d3 to draw different images (a 'landscape' landscape and a 'portrait' portrait) depending on the window width. To see it properly using bl.ocks.org, you'll need to launch into the new window view - then just resize the window by dragging the window in and out (the switch happens at 600px).
You can read more about using pym.js on the NPR Blog

  
## README.md

      
              4 files
            
          
              2 forks
            
          
              1 comment
            
          
              0 stars
            
          
                alansmithy
                / README.md
            
            
              Last active
              March 15, 2019 15:53
            
              
                Heatmap Calendar in d3js
              
          
    ###Calendar heatmap
A calendar heatmap using a simple csv file structure of date and value. These kinds of displays are good for highlighting patterns in time series data where there might be multiple time patterns present - i.e. daily/weekly/monthly/seasonal. A great implementation of this kind of graphic is the Wisconsin crash calendar.
This particular implementation produces just one svg element with a discrete group element for every year referenced in the data set.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>The Costner Effect</title>
<style>
    body{font-family:sans-serif;background-color:#dedede}

    #container {
				width: 800px;
				margin-left: auto;

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Tax credit changes and the low income family</title>
		<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<style type="text/css">

            body, text{font-family:metric,sans-serif;}
            h2{font-weight:500;font-size:21px;margin-bottom:-10px;}

## .block
license: mit

## .block
license: mit

## .block
license: mit

## .block
license: mit
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<title>The Costner Effect</title>
	<style>
	body{font-family:sans-serif;background-color:#dedede}

	#container {
	width: 800px;
	margin-left: auto;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Tax credit changes and the low income family</title>
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">

	body, text{font-family:metric,sans-serif;}
	h2{font-weight:500;font-size:21px;margin-bottom:-10px;}