RFC 4180 compliant CSV file demo with quoted strings.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: Create SVG and Load CSV Data</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">

body {
				background-color: grey;
			}

svg {
				background-color: white;
			}
			
			.container{
				 max-width: 800px;
				 padding: 5px;
				 margin: 0 auto;
			}

</style>
	</head>
	<body>
				
		<script type="text/javascript">

//Width and height
			var w = 800;
			var h = 690;
			var barPadding = 1;
			
			var dataset = [
			{
				x: 3,
				y: 10,
				fill: "blue",
				text:"Delimit CSV fields with single character usually comma, pipe or tab."   
			},
			{
				x: 3,
				y: 80,
				fill: "orange",
				text:"Start new record in its own line but records can span mutiple lines if fields contains embedded newlines."
			},
			{
				x: 3,
				y: 150,
				fill: "purple",
				text:"Include headers in first line. Optional but makes file self documenting and fields independent of order."
			},
			{
				x: 3,
				y: 220,
				fill: "teal",
				text:"Quote field values when needed using double quotes and escape quotes with quotes."
			},
				{
				x: 3,
				y: 290,
				fill: "teal",
				text:"Quoting is required for embedded field delimiters, line delimiters, quotes or significant whitespaces."
			},
			{
				x: 3,
				y: 360,
				fill: "red",
				text:"Use a RFC4180 compliant parser rather than rolling your own CSV parser."
			},
			{
				x: 3,
				y: 430,
				fill: "red",
				text:"Even competent developers often fail to handle CSV quoted strings when using their own parsers."
			},
			{
				x: 3,
				y: 500,
				fill: "red",
				text:"Now check the console."
			}
			];
	
			//Create SVG element
			var svg = d3.select("body")
						.append("div")
						.attr("class","container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

svg.selectAll("rect")
			   .data(dataset)
			   .enter()
			   .append("rect")
			   .attr('height',45)
			   .attr('width',1)
			   .attr("fill","#fff")
			   .transition()
			   .delay(function(d,i){return i * 2000;})
			   .duration(2000)
			   .attr('width',780)
			   .attr("x", function(d) {
				   return d.x;
			   })
			   .attr("y", function(d) {
				   return d.y;
			   })
			   .attr("rx",15)
			   .attr("ry",15)
			   .attr("fill", function(d) {
				   return "teal";
			   });

svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d.text;
			   })
			   .attr("fill","white")
			   .transition()
			   .duration(2000)
			   .attr("fill","white")
			   .attr("x",15)
			   .attr("y", function(d) {
			   return d.y + 30;
			   });
			   
			   d3.csv("quoted.csv", function(data) {
				console.log(data);
				
			});

</script>
	</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js