gujc71

## chart1.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var dataset = [9, 19, 29, 39, 29, 19, 9];

var svg = d3.select("svg");

## chart1_1.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var dataset = [9, 19, 29, 39, 29, 19, 9];

var svg = d3.select("svg");

## chart2.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var dataset = [9, 19, 29, 39, 29, 19, 9];

var svg = d3.select("svg");

svg.selectAll("bar")

## chart2_1.html
<!DOCTYPE html>
<meta charset="utf-8">
<svg width="500" height="300"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var dataset = [9, 19, 29, 39, 29, 19, 9];

var svg = d3.select("svg");

## chart3.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
    fill: skyblue;
}

.bar:hover {
    fill: blue;
}

## chart3_1.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
    fill: skyblue;
    fill-opacity: 0.3;
    stroke: skyblue;
}

.bar:hover {

## chart4.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
    fill: skyblue;
}

.bar:hover {
    fill: blue;
}

## chart4_1.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
    fill: skyblue;
}

.bar:hover {
    fill: blue;
}

## bar1.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
    border: 1px solid;
}
.bar {
    fill: skyblue;
}

## bar2.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
    border: 1px solid;
}
.bar {
    fill: skyblue;
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<svg width="500" height="300"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	var dataset = [9, 19, 29, 39, 29, 19, 9];

	var svg = d3.select("svg");
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.bar {
	fill: skyblue;
	}

	.bar:hover {
	fill: blue;
	}