javascript - graph the data from a csv file

This page needs to display a graph that reads the data from a CSV file.

I have been following a tutorial on TheCodingTutorials.

I'm also trying to follow the Multi-Column Data tutorial so that i can add the name to the graph. This is where i'm getting lost, the tutorial make it sound easy but i just don't get it. Every time i try to edit the code it errors out.

It works perfectly if you only want to read a single column csv file.

However I want to read a multiple columns csv file.

Also if there is something that could make it better please let me know.

    <html>
    <head>
    <script type="text/javascript" src=".v3.min.js"></script>
    <script type="text/javascript">

     <html>
<head>
<meta http-equiv="Expires" content="-1">
<script type="text/javascript" src=".v3.min.js"></script>
<script type="text/javascript">

function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
    {
  d3.text("data2.csv", function(unparsedData)
  {
   var data = d3.csv.parseRows(unparsedData);

   //Create the SVG graph.
   var svg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");


   var dataEnter = svg.selectAll("rect").data(data).enter();
   var graphHeight = 450;
   var barWidth = 20;
   var barSeparation = 10;
   var maxData = 105;
   var horizontalBarDistance = barWidth + barSeparation;
   var textYOffset = horizontalBarDistance / 2 - 12;
   var textXOffset = 20;
   var barHeightMultiplier = graphHeight / maxData;


   //Draw the bars.
   dataEnter.append("rect").attr("y", function(d, i)
   {
    return i * horizontalBarDistance;
   }).attr("x", function(d)
   {
    return 100;
   }).attr("height", function(d)
   {
    return barWidth;
   }).attr("width", function(d)
   {
    return d * barHeightMultiplier;
   });


   //Draw the text.
   dataEnter.append("text").text(function(d)
   {
    return d;
   }).attr("y", function(d, i)
   {
    return i * horizontalBarDistance + textXOffset;
   }).attr("x");
 });
 };
}
</script>
</head>
<body onLoad="JavaScript:timedRefresh(10000);"> 
</body>
</html>

My CSV file now looks like this

names,data
john,78
brad,105
amber,103
james,2
dean,74
pat,45
matt,6
andrew,18
ashley,15

==================================================================================

UPDATE

==================================================================================

Thanks to all your help this is my updated code.

<html>
<head>
<meta http-equiv="Expires" content="-1">

<script type="text/javascript" src=".\JavaScripts\d3.v3.min.js"></script>
<script type="text/javascript">setTimeout(function(){window.location.href='index2.html'},120000);

    d3.csv("./data/data.csv", function(data){

   //Create the SVG graph.
    var svg = d3.select("#graph").append("svg").attr("width", "1800").attr("height", "600");

    var dataEnter = svg.selectAll("rect").data(data).enter();
    var graphWidth = 800;
    var barWidth = 40;
    var barSeparation = 30;
    var maxData = 2;
    var horizontalBarDistance = barWidth + barSeparation;
    var textYOffset = 25;
    var barXOffset = 260;
    var barYOffset = 5;
    var numXOffset = 230;
    var barHeightMultiplier = graphWidth / maxData;
    var fontSize = "30px";

    var color = d3.scale.category10();


   //Draw the bars.
    dataEnter.append("rect")
    .attr("fill",function(d,i){return color(i);})
    .attr("y", function(d, i){return i * horizontalBarDistance - barYOffset;})
    .attr("x", barXOffset)
    .attr("height", function(d){return barWidth;}) 
    .attr("width", function(d){return d.data * barHeightMultiplier;});


   //Draw the text.
    dataEnter.append("text")
    .text(function(d){return d.Name;})
    .attr("font-size", fontSize)
    .attr("font-family", "sans-serif")
    .attr("y", function(d, i){return i * horizontalBarDistance + textYOffset;})
    .attr("x");

   //Draw the numbers.
    dataEnter.append("text")
    .text(function(d){return d.data;})
    .attr("font-size", fontSize)
    .attr("font-family", "sans-serif")
    .attr("y", function(d, i){return i * horizontalBarDistance + textYOffset;})
    .attr("x", numXOffset);

     //Draw the Target bar
    dataEnter.append("rect")
    .attr("fill", "red")
    .attr("y", function(d, i){return i * horizontalBarDistance;})
    .attr("x", barXOffset + graphWidth)
    .attr("height", 70) 
    .attr("width", 10);

});

</script>

<style type="text/css">
#title {
    font-family:sans-serif;
    font-size: 50px;
    color:#000;
    text-decoration: underline;
    text-align: center;
    width: 100%;
    position:relative;
    margin-top:20;
}
#graph {
    overflow:hidden;
    margin-top:40;
}
</style>

</head>
<body>
<div id="title">Graph 1</div>
<div id="graph"></div>
</body>
</html>

This page needs to display a graph that reads the data from a CSV file.

I have been following a tutorial on TheCodingTutorials.

It works perfectly if you only want to read a single column csv file.

However I want to read a multiple columns csv file.

Also if there is something that could make it better please let me know.

    <html>
    <head>
    <script type="text/javascript" src="http://d3js/d3.v3.min.js"></script>
    <script type="text/javascript">

     <html>
<head>
<meta http-equiv="Expires" content="-1">
<script type="text/javascript" src="http://d3js/d3.v3.min.js"></script>
<script type="text/javascript">

function timedRefresh(timeoutPeriod) {
    setTimeout("location.reload(true);",timeoutPeriod);
    {
  d3.text("data2.csv", function(unparsedData)
  {
   var data = d3.csv.parseRows(unparsedData);

   //Create the SVG graph.
   var svg = d3.select("body").append("svg").attr("width", "100%").attr("height", "100%");


   var dataEnter = svg.selectAll("rect").data(data).enter();
   var graphHeight = 450;
   var barWidth = 20;
   var barSeparation = 10;
   var maxData = 105;
   var horizontalBarDistance = barWidth + barSeparation;
   var textYOffset = horizontalBarDistance / 2 - 12;
   var textXOffset = 20;
   var barHeightMultiplier = graphHeight / maxData;


   //Draw the bars.
   dataEnter.append("rect").attr("y", function(d, i)
   {
    return i * horizontalBarDistance;
   }).attr("x", function(d)
   {
    return 100;
   }).attr("height", function(d)
   {
    return barWidth;
   }).attr("width", function(d)
   {
    return d * barHeightMultiplier;
   });


   //Draw the text.
   dataEnter.append("text").text(function(d)
   {
    return d;
   }).attr("y", function(d, i)
   {
    return i * horizontalBarDistance + textXOffset;
   }).attr("x");
 });
 };
}
</script>
</head>
<body onLoad="JavaScript:timedRefresh(10000);"> 
</body>
</html>

My CSV file now looks like this

names,data
john,78
brad,105
amber,103
james,2
dean,74
pat,45
matt,6
andrew,18
ashley,15

==================================================================================

UPDATE

==================================================================================

Thanks to all your help this is my updated code.

<html>
<head>
<meta http-equiv="Expires" content="-1">

<script type="text/javascript" src=".\JavaScripts\d3.v3.min.js"></script>
<script type="text/javascript">setTimeout(function(){window.location.href='index2.html'},120000);

    d3.csv("./data/data.csv", function(data){

   //Create the SVG graph.
    var svg = d3.select("#graph").append("svg").attr("width", "1800").attr("height", "600");

    var dataEnter = svg.selectAll("rect").data(data).enter();
    var graphWidth = 800;
    var barWidth = 40;
    var barSeparation = 30;
    var maxData = 2;
    var horizontalBarDistance = barWidth + barSeparation;
    var textYOffset = 25;
    var barXOffset = 260;
    var barYOffset = 5;
    var numXOffset = 230;
    var barHeightMultiplier = graphWidth / maxData;
    var fontSize = "30px";

    var color = d3.scale.category10();


   //Draw the bars.
    dataEnter.append("rect")
    .attr("fill",function(d,i){return color(i);})
    .attr("y", function(d, i){return i * horizontalBarDistance - barYOffset;})
    .attr("x", barXOffset)
    .attr("height", function(d){return barWidth;}) 
    .attr("width", function(d){return d.data * barHeightMultiplier;});


   //Draw the text.
    dataEnter.append("text")
    .text(function(d){return d.Name;})
    .attr("font-size", fontSize)
    .attr("font-family", "sans-serif")
    .attr("y", function(d, i){return i * horizontalBarDistance + textYOffset;})
    .attr("x");

   //Draw the numbers.
    dataEnter.append("text")
    .text(function(d){return d.data;})
    .attr("font-size", fontSize)
    .attr("font-family", "sans-serif")
    .attr("y", function(d, i){return i * horizontalBarDistance + textYOffset;})
    .attr("x", numXOffset);

     //Draw the Target bar
    dataEnter.append("rect")
    .attr("fill", "red")
    .attr("y", function(d, i){return i * horizontalBarDistance;})
    .attr("x", barXOffset + graphWidth)
    .attr("height", 70) 
    .attr("width", 10);

});

</script>

<style type="text/css">
#title {
    font-family:sans-serif;
    font-size: 50px;
    color:#000;
    text-decoration: underline;
    text-align: center;
    width: 100%;
    position:relative;
    margin-top:20;
}
#graph {
    overflow:hidden;
    margin-top:40;
}
</style>

</head>
<body>
<div id="title">Graph 1</div>
<div id="graph"></div>
</body>
</html>

Share Improve this question edited Sep 3, 2013 at 6:49 Paul 27.6k13 gold badges89 silver badges126 bronze badges asked Aug 20, 2013 at 23:22 Brad 331 gold badge1 silver badge5 bronze badges

What is the error you're getting. Can you link to some running code? – Scott Cameron Commented Aug 21, 2013 at 5:32
When i say it errors out i mean, It just doesn't work. i'm thinking this is because i have no idea how to separate the columns. i just need to change the code so the data refers to the number column. The coding tutorials's example displays all the data in text format. i need to put it into an array for the graph to use. – Brad Commented Aug 21, 2013 at 22:53
I see. I posted an answer that will hopefully help. – Scott Cameron Commented Aug 21, 2013 at 23:27

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

Because your data contains a header row as its first row, you should be using d3.csv.parse instead of d3.csv.parseRows. The CSV documentation explains the differences.

The result of parsing will be something that looks like this:

[
    {"names": "john", "data": 78},
    {"names": "brad", "data": 105},
    ...
]

So, when you use this data to create your rect elements, you get an object bound to each rect. Then when you use selection.attr or selection.style the d value you are passed will be the bound object. This means you will need to reference the property you want, either as d.names or d.data. Each column in the file will be a different property on the object (as shown above).

One other thing to consider is possibly replacing d3.text with d3.csv to retrieve the file and parse the data in one step.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - graph the data from a csv file - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)