jwang1616/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This is a simple bar graph  written using d3.js v4.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
forked from d3noob's block: Simple bar graph in v4

  
## Feature_weight.csv

          
            name
            value

            
              age
              0.007082093

            
              job
              0.007840191

            
              marital
              0.001205471

            
              education
              0.002783403

            
              default
              0.00333051

            
              housing
              8.14E-05

            
              loan
              0.000143174

            
              contact
              0.010500696

            
              month
              0.024659585

            
              day_of_week
              6.21E-05

            
              duration
              0.071981167

            
              campaign
              0.00405809

            
              pdays
              0.031962447

            
              previous
              0.02165597

            
              poutcome
              0.032553206

            
              emp_var_rate
              0.051046624

            
              cons_price_idx
              0.0587008

            
              cons_conf_idx
              0.063090774

            
              euribor3m
              0.057162201

            
              nr_employed
              0.059345819

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

<head>
    <meta charset='utf-8' />
    <title>Simple Bar chart</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
        body {
            font-family: "Arial", sans-serif;
        }

        .bar {
            fill: #5f89ad;
        }

        .axis {
            font-size: 13px;
        }

        .axis path,
        .axis line {
            fill: none;
            display: none;
        }

        .label {
            font-size: 13px;
        }
    </style>

</head>

<body>

    <div id="graphic"></div>

    <script>

   d3.csv("Feature_weight.csv", function(error, data) {
  	if (error) throw error;

        //sort bars based on value
        data = data.sort(function (a, b) {
            return d3.ascending(a.value, b.value);
        })

        //set up svg using margin conventions - we'll need plenty of room on the left for labels
        var margin = {
            top: 15,
            right: 25,
            bottom: 15,
            left: 60
        };

        var width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        var svg = d3.select("#graphic").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var x = d3.scale.linear()
            .range([0, width])
            .domain([0, d3.max(data, function (d) {
                return d.value;
            })]);

        var y = d3.scale.ordinal()
            .rangeRoundBands([height, 0], .1)
            .domain(data.map(function (d) {
                return d.name;
            }));

        //make y axis to show bar names
        var yAxis = d3.svg.axis()
            .scale(y)
            //no tick marks
            .tickSize(0)
            .orient("left");

        var gy = svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)

        var bars = svg.selectAll(".bar")
            .data(data)
            .enter()
            .append("g")

        //append rects
        bars.append("rect")
            .attr("class", "bar")
            .attr("y", function (d) {
                return y(d.name);
            })
            .attr("height", y.rangeBand())
            .attr("x", 0)
            .attr("width", function (d) {
                return x(d.value);
            });

        //add a value label to the right of each bar
        bars.append("text")
            .attr("class", "label")
            //y position of the label is halfway down the bar
            .attr("y", function (d) {
                return y(d.name) + y.rangeBand() / 2 + 4;
            })
            //x position is 3 pixels to the right of the bar
            .attr("x", function (d) {
                return x(d.value) + 3;
            })
            .text(function (d) {
                return d.value;
            });
   });
    </script>

</body>

</html>

## sales.csv

          
            salesperson
            sales

            
              Bob
              33

            
              Robin
              12

            
              Anne
              41

            
              Mark
              16

            
              Joe
              59

            
              Eve
              38

            
              Karen
              21

            
              Kirsty
              25

            
              Chris
              30

            
              Lisa
              47

            
              Tom
              5

            
              Stacy
              20

            
              Charles
              13

            
              Mary
              29
	name	value
	age	0.007082093
	job	0.007840191
	marital	0.001205471
	education	0.002783403
	default	0.00333051
	housing	8.14E-05
	loan	0.000143174
	contact	0.010500696
	month	0.024659585
	day_of_week	6.21E-05
	duration	0.071981167
	campaign	0.00405809
	pdays	0.031962447
	previous	0.02165597
	poutcome	0.032553206
	emp_var_rate	0.051046624
	cons_price_idx	0.0587008
	cons_conf_idx	0.063090774
	euribor3m	0.057162201
	nr_employed	0.059345819
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset='utf-8' />
	<title>Simple Bar chart</title>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	body {
	font-family: "Arial", sans-serif;
	}

	.bar {
	fill: #5f89ad;
	}

	.axis {
	font-size: 13px;
	}

	.axis path,
	.axis line {
	fill: none;
	display: none;
	}

	.label {
	font-size: 13px;
	}
	</style>

	</head>

	<body>

	<div id="graphic"></div>

	<script>

	d3.csv("Feature_weight.csv", function(error, data) {
	if (error) throw error;

	//sort bars based on value
	data = data.sort(function (a, b) {
	return d3.ascending(a.value, b.value);
	})

	//set up svg using margin conventions - we'll need plenty of room on the left for labels
	var margin = {
	top: 15,
	right: 25,
	bottom: 15,
	left: 60
	};

	var width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select("#graphic").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x = d3.scale.linear()
	.range([0, width])
	.domain([0, d3.max(data, function (d) {
	return d.value;
	})]);

	var y = d3.scale.ordinal()
	.rangeRoundBands([height, 0], .1)
	.domain(data.map(function (d) {
	return d.name;
	}));

	//make y axis to show bar names
	var yAxis = d3.svg.axis()
	.scale(y)
	//no tick marks
	.tickSize(0)
	.orient("left");

	var gy = svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)

	var bars = svg.selectAll(".bar")
	.data(data)
	.enter()
	.append("g")

	//append rects
	bars.append("rect")
	.attr("class", "bar")
	.attr("y", function (d) {
	return y(d.name);
	})
	.attr("height", y.rangeBand())
	.attr("x", 0)
	.attr("width", function (d) {
	return x(d.value);
	});

	//add a value label to the right of each bar
	bars.append("text")
	.attr("class", "label")
	//y position of the label is halfway down the bar
	.attr("y", function (d) {
	return y(d.name) + y.rangeBand() / 2 + 4;
	})
	//x position is 3 pixels to the right of the bar
	.attr("x", function (d) {
	return x(d.value) + 3;
	})
	.text(function (d) {
	return d.value;
	});
	});
	</script>

	</body>

	</html>
	salesperson	sales
	Bob	33
	Robin	12
	Anne	41
	Mark	16
	Joe	59
	Eve	38
	Karen	21
	Kirsty	25
	Chris	30
	Lisa	47
	Tom	5
	Stacy	20
	Charles	13
	Mary	29