jamesleesaunders/README.md

## README.md

      
        
                
      Raw
    
  

        
        
          
            
          
          
            
              README.md
            
          
        
      
      
    d3-ez : HTML Table Example
Generated using d3-ez D3 Reusable Chart Library
Data Source: http://www.ukpolitical.info/2015.htm

  

  

## index.html
<!DOCTYPE html>
<html>

<head>
  <title>d3-ez : HTML Table Example</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script>
  <link rel="stylesheet" type="text/css" href="http://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>

<body>
  <div id="tableholder"></div>
  <br/>
  <div>Value: <span id="message"></span></div>

  <script type="text/javascript">

    d3.json("uk_elections.json").then(function(data) {
      // UK Election Results Source: http://www.ukpolitical.info/2015.htm

      // Create chart object
      var myTable = d3.ez.component.htmlTable()
        .width(600)
        .on("customValueMouseOver", function(d) {
          d3.select("#message").text(d.value);
        })
        .on("customSeriesClick", function(d) {
           console.log(d);
        });

      // Add to page
      d3.select("#tableholder")
        .datum(data)
        .call(myTable);
    });
  </script>
</body>

</html>

## uk_elections.json
[
	{
		"key": "1992",
		"values": [
			{
				"key": "Conservative",
				"value": 336
			},
			{
				"key": "Labour",
				"value": 271
			},
			{
				"key": "Liberal Democrat",
				"value": 20
			},
			{
				"key": "Scottish National",
				"value": 3
			}
		]
	},
	{
		"key": "1997",
		"values": [
			{
				"key": "Conservative",
				"value": 165
			},
			{
				"key": "Labour",
				"value": 418
			},
			{
				"key": "Liberal Democrat",
				"value": 46
			},
			{
				"key": "Scottish National",
				"value": 6
			}
		]
	},
  {
    "key": "2001",
    "values": [
      {
        "key": "Conservative",
        "value": 412
      },
      {
        "key": "Labour",
        "value": 166
      },
      {
        "key": "Liberal Democrat",
        "value": 52
      },
      {
        "key": "Scottish National",
        "value": 5
      }
    ]
  },
  {
    "key": "2005",
    "values": [
      {
        "key": "Conservative",
        "value": 356
      },
      {
        "key": "Labour",
        "value": 198
      },
      {
        "key": "Liberal Democrat",
        "value": 62
      },
      {
        "key": "Scottish National",
        "value": 6
      }
    ]
  },
  {
    "key": "2010",
    "values": [
      {
        "key": "Conservative",
        "value": 306
      },
      {
        "key": "Labour",
        "value": 258
      },
      {
        "key": "Liberal Democrat",
        "value": 57
      },
      {
        "key": "Scottish National",
        "value": 6
      }
    ]
  },
  {
    "key": "2015",
    "values": [
      {
        "key": "Conservative",
        "value": 331
      },
      {
        "key": "Labour",
        "value": 232
      },
      {
        "key": "Liberal Democrat",
        "value": 8
      },
      {
        "key": "Scottish National",
        "value": 56
      }
    ]
  }
]
	<!DOCTYPE html>
	<html>

	<head>
	<title>d3-ez : HTML Table Example</title>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script>
	<link rel="stylesheet" type="text/css" href="http://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
	</head>

	<body>
	<div id="tableholder"></div>
	<br/>
	<div>Value: <span id="message"></span></div>

	<script type="text/javascript">

	d3.json("uk_elections.json").then(function(data) {
	// UK Election Results Source: http://www.ukpolitical.info/2015.htm

	// Create chart object
	var myTable = d3.ez.component.htmlTable()
	.width(600)
	.on("customValueMouseOver", function(d) {
	d3.select("#message").text(d.value);
	})
	.on("customSeriesClick", function(d) {
	console.log(d);
	});

	// Add to page
	d3.select("#tableholder")
	.datum(data)
	.call(myTable);
	});
	</script>
	</body>

	</html>
	[
	{
	"key": "1992",
	"values": [
	{
	"key": "Conservative",
	"value": 336
	},
	{
	"key": "Labour",
	"value": 271
	},
	{
	"key": "Liberal Democrat",
	"value": 20
	},
	{
	"key": "Scottish National",
	"value": 3
	}
	]
	},
	{
	"key": "1997",
	"values": [
	{
	"key": "Conservative",
	"value": 165
	},
	{
	"key": "Labour",
	"value": 418
	},
	{
	"key": "Liberal Democrat",
	"value": 46
	},
	{
	"key": "Scottish National",
	"value": 6
	}
	]
	},
	{
	"key": "2001",
	"values": [
	{
	"key": "Conservative",
	"value": 412
	},
	{
	"key": "Labour",
	"value": 166
	},
	{
	"key": "Liberal Democrat",
	"value": 52
	},
	{
	"key": "Scottish National",
	"value": 5
	}
	]
	},
	{
	"key": "2005",
	"values": [
	{
	"key": "Conservative",
	"value": 356
	},
	{
	"key": "Labour",
	"value": 198
	},
	{
	"key": "Liberal Democrat",
	"value": 62
	},
	{
	"key": "Scottish National",
	"value": 6
	}
	]
	},
	{
	"key": "2010",
	"values": [
	{
	"key": "Conservative",
	"value": 306
	},
	{
	"key": "Labour",
	"value": 258
	},
	{
	"key": "Liberal Democrat",
	"value": 57
	},
	{
	"key": "Scottish National",
	"value": 6
	}
	]
	},
	{
	"key": "2015",
	"values": [
	{
	"key": "Conservative",
	"value": 331
	},
	{
	"key": "Labour",
	"value": 232
	},
	{
	"key": "Liberal Democrat",
	"value": 8
	},
	{
	"key": "Scottish National",
	"value": 56
	}
	]
	}
	]