CODEWITHSUNDEEP
javascriptcsvmultidimensional-arrayd3.js
Brad
Brad

Reputation: 33

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="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">

     <html>
<head>
<meta http-equiv="Expires" content="-1">
<script type="text/javascript" src="http://d3js.org/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>

Upvotes: 2

Views: 14307

Answers (1)

Scott Cameron
Scott Cameron

Reputation: 5333

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.

Upvotes: 1

Related Questions