jamesleesaunders/README.md

## README.md

      
    Raw
  

              README.md
            
          
    d3-ez : Showcase

Generated using d3-ez D3 Reusable Chart Library
Click on graphs to interact.

  
## fruitsurvey.json
[
  {
    "key": "Jim",
    "values": [
      {
        "key": "Apples",
        "value": 6
      },
      {
        "key": "Oranges",
        "value": 4
      },
      {
        "key": "Pears",
        "value": 3
      },
      {
        "key": "Bananas",
        "value": 0
      },
      {
        "key": "Kiwi",
        "value": 2
      }
    ]
  },
  {
    "key": "Claire",
    "values": [
      {
        "key": "Apples",
        "value": 2
      },
      {
        "key": "Oranges",
        "value": 4
      },
      {
        "key": "Pears",
        "value": 1
      },
      {
        "key": "Bananas",
        "value": 3
      },
      {
        "key": "Kiwi",
        "value": 3
      }
    ]
  },
  {
    "key": "Beth",
    "values": [
      {
        "key": "Apples",
        "value": 5
      },
      {
        "key": "Oranges",
        "value": 2
      },
      {
        "key": "Pears",
        "value": 1
      },
      {
        "key": "Bananas",
        "value": 4
      },
      {
        "key": "Kiwi",
        "value": 3
      }
    ]
  },
  {
    "key": "Grace",
    "values": [
      {
        "key": "Apples",
        "value": 3
      },
      {
        "key": "Oranges",
        "value": 3
      },
      {
        "key": "Pears",
        "value": 1
      },
      {
        "key": "Bananas",
        "value": 5
      },
      {
        "key": "Kiwi",
        "value": 4
      }
    ]
  }
]

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

<head>
  <title>d3-ez : Showcase</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="chartholder1"></div>
  <div id="chartholder2"></div>
  <div id="chartholder3"></div>
  <div id="chartholder4"></div>
  <div id="chartholder5"></div>
  <div id="chartholder6"></div>
  <div id="chartholder7"></div>
  <div id="chartholder8"></div>

  <script src="data/random_data.js"></script>
  <script type="text/javascript">
    // Generate some sample data
    var request = new XMLHttpRequest();
    request.open("GET", "fruitsurvey.json", false);
    request.send(null);
    var data = JSON.parse(request.responseText);
    console.log(data);

    // Setup chart components
    myChart1 = d3.ez.component.htmlTable()
      .width(400)
      .on("customSeriesClick", function(d) {
        update5(data);
        update2(d);
        update3(d);
        update4(d);
      });

    myChart2 = d3.ez.chart.barChartVertical()
      .width(400)
      .height(200)
      .on("customValueMouseOver", function(d) {
        console.log(d);
      });

    myChart3 = d3.ez.chart.donutChart()
      .width(400)
      .height(200)
      .innerRadius(40);

    myChart4 = d3.ez.chart.polarAreaChart()
      .width(400)
      .height(200);

    myChart5 = d3.ez.chart.barChartClustered()
      .width(400)
      .height(200)
      .yAxisLabel("Fruit")
      .on("customSeriesClick", function(d) {
        update2(d);
        update3(d);
        update4(d);
      });

    myChart6 = d3.ez.chart.heatMapRadial()
      .width(400)
      .height(200)
      .innerRadius(5);

    myChart7 = d3.ez.chart.heatMapTable()
      .width(400)
      .height(200);

    myChart8 = d3.ez.chart.punchCard()
      .width(400)
      .height(200)
      .minRadius(2)
      .useGlobalScale(true)
      .maxRadius(18)
      .on("customValueMouseOver", function(d) {
        console.log(d);
      });

    // Functions to add charts to page and update charts
    function update1(data) {
      // htmlTable
      d3.select("#chartholder1")
        .datum(data)
        .call(myChart1);
    }

    function update2(data) {
      // barClustered
      d3.select("#chartholder2")
        .datum(data)
        .call(myChart2);
    }

    function update3(data) {
      // barVertical
      d3.select("#chartholder3")
        .datum(data)
        .call(myChart3);
    }

    function update4(data) {
      // donutChart
      d3.select("#chartholder4")
        .datum(data)
        .call(myChart4);
    }

    function update5(data) {
      // polarArea
      d3.select("#chartholder5")
        .datum(data)
        .call(myChart5);
    }

    function update6(data) {
      // heatMapRadial
      d3.select("#chartholder6")
        .datum(data)
        .call(myChart6);
    }

    function update7(data) {
      // heatMapTable
      d3.select("#chartholder7")
        .datum(data)
        .call(myChart7);
    }

    function update8(data) {
      // punchCard
      d3.select("#chartholder8")
        .datum(data)
        .call(myChart8);
    }

    update1(data);    // htmlTable
    update2(data[0]); // verticalBar
    update3(data[0]); // donutChart
    update4(data[0]); // polarArea
    update5(data);    // barClustered
    update6(data);    // heatMapRadial
    update7(data);    // heatMapTable
    update8(data);    // punchCard
  </script>
</body>

</html>
	[
	{
	"key": "Jim",
	"values": [
	{
	"key": "Apples",
	"value": 6
	},
	{
	"key": "Oranges",
	"value": 4
	},
	{
	"key": "Pears",
	"value": 3
	},
	{
	"key": "Bananas",
	"value": 0
	},
	{
	"key": "Kiwi",
	"value": 2
	}
	]
	},
	{
	"key": "Claire",
	"values": [
	{
	"key": "Apples",
	"value": 2
	},
	{
	"key": "Oranges",
	"value": 4
	},
	{
	"key": "Pears",
	"value": 1
	},
	{
	"key": "Bananas",
	"value": 3
	},
	{
	"key": "Kiwi",
	"value": 3
	}
	]
	},
	{
	"key": "Beth",
	"values": [
	{
	"key": "Apples",
	"value": 5
	},
	{
	"key": "Oranges",
	"value": 2
	},
	{
	"key": "Pears",
	"value": 1
	},
	{
	"key": "Bananas",
	"value": 4
	},
	{
	"key": "Kiwi",
	"value": 3
	}
	]
	},
	{
	"key": "Grace",
	"values": [
	{
	"key": "Apples",
	"value": 3
	},
	{
	"key": "Oranges",
	"value": 3
	},
	{
	"key": "Pears",
	"value": 1
	},
	{
	"key": "Bananas",
	"value": 5
	},
	{
	"key": "Kiwi",
	"value": 4
	}
	]
	}
	]
	<!DOCTYPE html>
	<html>

	<head>
	<title>d3-ez : Showcase</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="chartholder1"></div>
	<div id="chartholder2"></div>
	<div id="chartholder3"></div>
	<div id="chartholder4"></div>
	<div id="chartholder5"></div>
	<div id="chartholder6"></div>
	<div id="chartholder7"></div>
	<div id="chartholder8"></div>

	<script src="data/random_data.js"></script>
	<script type="text/javascript">
	// Generate some sample data
	var request = new XMLHttpRequest();
	request.open("GET", "fruitsurvey.json", false);
	request.send(null);
	var data = JSON.parse(request.responseText);
	console.log(data);

	// Setup chart components
	myChart1 = d3.ez.component.htmlTable()
	.width(400)
	.on("customSeriesClick", function(d) {
	update5(data);
	update2(d);
	update3(d);
	update4(d);
	});

	myChart2 = d3.ez.chart.barChartVertical()
	.width(400)
	.height(200)
	.on("customValueMouseOver", function(d) {
	console.log(d);
	});

	myChart3 = d3.ez.chart.donutChart()
	.width(400)
	.height(200)
	.innerRadius(40);

	myChart4 = d3.ez.chart.polarAreaChart()
	.width(400)
	.height(200);

	myChart5 = d3.ez.chart.barChartClustered()
	.width(400)
	.height(200)
	.yAxisLabel("Fruit")
	.on("customSeriesClick", function(d) {
	update2(d);
	update3(d);
	update4(d);
	});

	myChart6 = d3.ez.chart.heatMapRadial()
	.width(400)
	.height(200)
	.innerRadius(5);

	myChart7 = d3.ez.chart.heatMapTable()
	.width(400)
	.height(200);

	myChart8 = d3.ez.chart.punchCard()
	.width(400)
	.height(200)
	.minRadius(2)
	.useGlobalScale(true)
	.maxRadius(18)
	.on("customValueMouseOver", function(d) {
	console.log(d);
	});

	// Functions to add charts to page and update charts
	function update1(data) {
	// htmlTable
	d3.select("#chartholder1")
	.datum(data)
	.call(myChart1);
	}

	function update2(data) {
	// barClustered
	d3.select("#chartholder2")
	.datum(data)
	.call(myChart2);
	}

	function update3(data) {
	// barVertical
	d3.select("#chartholder3")
	.datum(data)
	.call(myChart3);
	}

	function update4(data) {
	// donutChart
	d3.select("#chartholder4")
	.datum(data)
	.call(myChart4);
	}

	function update5(data) {
	// polarArea
	d3.select("#chartholder5")
	.datum(data)
	.call(myChart5);
	}

	function update6(data) {
	// heatMapRadial
	d3.select("#chartholder6")
	.datum(data)
	.call(myChart6);
	}

	function update7(data) {
	// heatMapTable
	d3.select("#chartholder7")
	.datum(data)
	.call(myChart7);
	}

	function update8(data) {
	// punchCard
	d3.select("#chartholder8")
	.datum(data)
	.call(myChart8);
	}

	update1(data); // htmlTable
	update2(data[0]); // verticalBar
	update3(data[0]); // donutChart
	update4(data[0]); // polarArea
	update5(data); // barClustered
	update6(data); // heatMapRadial
	update7(data); // heatMapTable
	update8(data); // punchCard
	</script>
	</body>

	</html>