CODEWITHSUNDEEP
javascriptd3.js
KornholioBeavis
KornholioBeavis

Reputation: 2442

d3 replacing semicolon with comma

Hoping someone way clever than me can quickly help solve this. I have csv files coming in with a semicolon seperator. it cant read the headings:

d3.csv("file.csv", function(error, data) {
   data.forEach(function(d) {
       d.date = parseDate(d.date);
       d.value2 = +d.value2;
       d.value1 = +d.value1;
   });

I've tried adding something like data.replace(/\s*;\s*/g, ",") but doesnt work.

Appreciate the help.

Upvotes: 7

Views: 9599

Answers (3)

Eric Burel
Eric Burel

Reputation: 4944

Old answer, check more recent answers

The following code works for me :

d3.dsv(';')("your_file.csv", function(error, data){
   ...
}

d3.dsv(separator) is a contructor that returns a function that works exactly as the d3.csv function. Actually, d3.csv is equivalent to d3.dsv(',')

Just for the precision, .csv with semi-colons are default in France for example (yeah after all, it is not as if csv meant "comma-separated values"). DSV stands for delimiter-separated values and are more general.

Upvotes: 6

Hitesh Sahu
Hitesh Sahu

Reputation: 45110

D3 V3+ or Higher Working Example

<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
            table {
                border-collapse: collapse;
                border: 2px black solid;
                font: 12px sans-serif;
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                width: 100%;
            }
        tr:first-child {
          padding-top: 12px;
          padding-bottom: 12px;
          text-align: left;
          background-color: #4CAF50;
          color: white;
          background-color: #4CAF50;
         }
      
         td {
            border: 1px black solid;
            padding: 5px;
            border: 1px solid #ddd;
            padding: 8px;
            }


         tr:nth-child(even){background-color: #f2f2f2;}

         tr:hover {background-color: #ddd;}

    </style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script type="text/javascript" charset="utf-8">
            d3.text("data.csv", function(data) {
                var parsedCSV = d3.dsv(';').parseRows(data);

                var container = d3.select("body")
                    .append("table")

                    .selectAll("tr")
                        .data(parsedCSV).enter()
                        .append("tr")

                    .selectAll("td")
                        .data(function(d) { return d; }).enter()
                        .append("td")
                        .text(function(d) { return d; });
            });

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

Reference: http://bl.ocks.org/ndarville/7075823

I have made the Table a bit styles and more readable.

Upvotes: 0

Pinguin Dirk
Pinguin Dirk

Reputation: 1433

Let's convert my comment to an answer, so it's not left unanswered:

Assuming that your values are separated by a semicolon (so technically it's not a CSV anymore), you might want to look at this: https://github.com/d3/d3-dsv

Upvotes: 8

Related Questions