delormev/README.md

## README.md

      
    Raw
  

              README.md
            
          
    # Learn D3js: Part 1 - Static graphic
Features:

overall structure and margins (see this example)
SVG objects (circles, paths, text)

Blog post coming soon!

  
## data-scientist.css
#chart .label {
    text-anchor: middle;
    alignment-baseline: middle;
}

#chart .typeAB {
    fill: #33CCFF;
    fill-opacity: 0.6;
}

#chart .labelAxis {
    font-family: sans-serif;
    font-size: 15px;
}

#chart .unicorns {
    fill: none;
    stroke: black;
    stroke-dasharray: 4;
}

#chart .dataScience {
    fill: lightgrey;
    fill-opacity: 0.6;
    stroke: none;
}

#chart {
    margin: 5px;
}

#chart .axis path, .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

#chart .labelDS {
    font-family: sans-serif;
    font-size: 14px;
    fill: grey;
}

#chart .labelU {
    font-family: sans-serif;
    font-size: 12px;
}

#chart .labelAB {
    font-family: sans-serif;
    font-size: 11px;
    fill: #0084B0;
}

#chart .axis text {
    font-family: sans-serif;
    font-size: 11px;
}

## data-scientist.js
//Width and height
var w = 400;
var h = 400;
var padding = 50;

// Set up CSV container
var svgContainer = d3.select("#chart").append("svg")
.attr("class", "container")
.attr("width", w + 2 * padding)
.attr("height", h + 2 * padding)
.append("g")
.attr("transform",
		"translate(" + padding + "," + padding + ")");

// Draw the Areas
var dataScience = svgContainer.append("path")
.attr("d", "M112,90 C50,20 100,20 180,20 L300,20 C380,20 380,20 380,100 L380,220 C380,300 380,350 310,288 L112,90 Z")
.attr("class", "dataScience");

var typeA = svgContainer.append("circle")
.attr("cx", 4*35)
.attr("cy", 4*(100-85))
.attr("r", 4*10)
.attr("class", "typeAB");

var typeB = svgContainer.append("circle")
.attr("cx", 4*85)
.attr("cy", 4*(100-35))
.attr("r", 4*10)
.attr("class", "typeAB");

var unicorns = svgContainer.append("circle")
.attr("cx", 4*80)
.attr("cy", 4*20)
.attr("r", 4*15)
.attr("class", "unicorns");

var appendLabelsA = svgContainer.append("text")
.attr("x", 140)
.attr("y", 52)
.text("Pure")
.attr("class", "labelAB label")
.append("tspan")
.attr("x", 140)
.attr("y", 69)
.text("Type A");

var appendLabelsB = svgContainer.append("text")
.attr("x", 340)
.attr("y", 253)
.text("Pure")
.attr("class", "labelAB label")
.append("tspan")
.attr("x", 340)
.attr("y", 270)
.text("Type B");

var appendLabelsU = svgContainer.append("text")
.attr("x", 320)
.attr("y", 75)
.text("Magical")
.attr("class", "labelU label")
.append("tspan")
.attr("x", 320)
.attr("y", 93)
.text("Unicorns");

var appendLabelsDS = svgContainer.append("text")
.attr("x", 250)
.attr("y", 155)
.text("Data")
.attr("class", "labelDS label")
.append("tspan")
.attr("x", 250)
.attr("y", 175)
.text("Science");

//Create the Scale we will use for the Axis
var axisScale = d3.scale.linear()
.domain([0, 100])
.range([0,400]);

var axisScaleY = d3.scale.linear()
.domain([100, 0])
.range([0,400]);

//Create the Axis
var xAxis = d3.svg.axis()
.orient("bottom")
.scale(axisScale);

var yAxis = d3.svg.axis()
.orient("left")
.scale(axisScaleY);

var xAxisGroup = svgContainer.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis)

var xAxisLabel = svgContainer.append("text")
.attr("class", "label labelAxis")
.attr("x", 200)
.attr("transform", "translate(0, " + (h + 30) + ")")
.text("% Proficiency in 'Building'");

var yAxisGroup = svgContainer.append("g")
.attr("class", "axis")
.call(yAxis);

var yAxisLabel = svgContainer.append("text")
.attr("class", "label labelAxis")
.attr("transform", "rotate(-90) translate(-200, -35)")
.text("% Proficiency in 'Analysis'");

## index.html
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="data-scientist.css">
    <!-- Load d3.js -->
    <script src="https://delormev.me/resources/d3/d3.min.js" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script src="data-scientist.js"></script>
  </body>
</html>
	#chart .label {
	text-anchor: middle;
	alignment-baseline: middle;
	}

	#chart .typeAB {
	fill: #33CCFF;
	fill-opacity: 0.6;
	}

	#chart .labelAxis {
	font-family: sans-serif;
	font-size: 15px;
	}

	#chart .unicorns {
	fill: none;
	stroke: black;
	stroke-dasharray: 4;
	}

	#chart .dataScience {
	fill: lightgrey;
	fill-opacity: 0.6;
	stroke: none;
	}

	#chart {
	margin: 5px;
	}

	#chart .axis path, .axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	#chart .labelDS {
	font-family: sans-serif;
	font-size: 14px;
	fill: grey;
	}

	#chart .labelU {
	font-family: sans-serif;
	font-size: 12px;
	}

	#chart .labelAB {
	font-family: sans-serif;
	font-size: 11px;
	fill: #0084B0;
	}

	#chart .axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	//Width and height
	var w = 400;
	var h = 400;
	var padding = 50;

	// Set up CSV container
	var svgContainer = d3.select("#chart").append("svg")
	.attr("class", "container")
	.attr("width", w + 2 * padding)
	.attr("height", h + 2 * padding)
	.append("g")
	.attr("transform",
	"translate(" + padding + "," + padding + ")");

	// Draw the Areas
	var dataScience = svgContainer.append("path")
	.attr("d", "M112,90 C50,20 100,20 180,20 L300,20 C380,20 380,20 380,100 L380,220 C380,300 380,350 310,288 L112,90 Z")
	.attr("class", "dataScience");

	var typeA = svgContainer.append("circle")
	.attr("cx", 4*35)
	.attr("cy", 4*(100-85))
	.attr("r", 4*10)
	.attr("class", "typeAB");

	var typeB = svgContainer.append("circle")
	.attr("cx", 4*85)
	.attr("cy", 4*(100-35))
	.attr("r", 4*10)
	.attr("class", "typeAB");

	var unicorns = svgContainer.append("circle")
	.attr("cx", 4*80)
	.attr("cy", 4*20)
	.attr("r", 4*15)
	.attr("class", "unicorns");

	var appendLabelsA = svgContainer.append("text")
	.attr("x", 140)
	.attr("y", 52)
	.text("Pure")
	.attr("class", "labelAB label")
	.append("tspan")
	.attr("x", 140)
	.attr("y", 69)
	.text("Type A");

	var appendLabelsB = svgContainer.append("text")
	.attr("x", 340)
	.attr("y", 253)
	.text("Pure")
	.attr("class", "labelAB label")
	.append("tspan")
	.attr("x", 340)
	.attr("y", 270)
	.text("Type B");

	var appendLabelsU = svgContainer.append("text")
	.attr("x", 320)
	.attr("y", 75)
	.text("Magical")
	.attr("class", "labelU label")
	.append("tspan")
	.attr("x", 320)
	.attr("y", 93)
	.text("Unicorns");

	var appendLabelsDS = svgContainer.append("text")
	.attr("x", 250)
	.attr("y", 155)
	.text("Data")
	.attr("class", "labelDS label")
	.append("tspan")
	.attr("x", 250)
	.attr("y", 175)
	.text("Science");

	//Create the Scale we will use for the Axis
	var axisScale = d3.scale.linear()
	.domain([0, 100])
	.range([0,400]);

	var axisScaleY = d3.scale.linear()
	.domain([100, 0])
	.range([0,400]);

	//Create the Axis
	var xAxis = d3.svg.axis()
	.orient("bottom")
	.scale(axisScale);

	var yAxis = d3.svg.axis()
	.orient("left")
	.scale(axisScaleY);

	var xAxisGroup = svgContainer.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis)

	var xAxisLabel = svgContainer.append("text")
	.attr("class", "label labelAxis")
	.attr("x", 200)
	.attr("transform", "translate(0, " + (h + 30) + ")")
	.text("% Proficiency in 'Building'");

	var yAxisGroup = svgContainer.append("g")
	.attr("class", "axis")
	.call(yAxis);

	var yAxisLabel = svgContainer.append("text")
	.attr("class", "label labelAxis")
	.attr("transform", "rotate(-90) translate(-200, -35)")
	.text("% Proficiency in 'Analysis'");
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="data-scientist.css">
	<!-- Load d3.js -->
	<script src="https://delormev.me/resources/d3/d3.min.js" charset="utf-8"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	</head>
	<body>
	<div id="chart"></div>
	<script src="data-scientist.js"></script>
	</body>
	</html>