D3 Examples - RFC 4180 compliant CSV file demo with quoted strings.

xxxxxxxxxx
 
<!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>
    