javascript - How to get started with d3js examples using xampp?

I am deeply impressed by all the cool stuff that is possible with the modern javascript libraries such as protovis and d3js. As an ecologist I have plenty of data that would be perfect for these advanced visualization techniques. Sadly, I am lost already after downloading the d3js library. :(

I read on that one has to setup a localhost in order to get the examples running. I have a xampp system installed on a windows 7 system. Localhost/xampp tells me that everything is fine but still I cannot get most of the examples running. For example "albers" shows only a grey box. The example "bar" does run as it should (I suppose).

Could anyone give me a hint how to get started correctly on windows 7 ? Links to tutorials are much appreciated. If I find out the right way, I will make my own tutorial for the world.

I know that my question sounds boring and unpleasant since it is the absolute beginner question and I am very sorry for that but I really want to work with d3js because I have sooo many good (?) ideas.

thank you!

I read on http://d3js that one has to setup a localhost in order to get the examples running. I have a xampp system installed on a windows 7 system. Localhost/xampp tells me that everything is fine but still I cannot get most of the examples running. For example "albers" shows only a grey box. The example "bar" does run as it should (I suppose).

Could anyone give me a hint how to get started correctly on windows 7 ? Links to tutorials are much appreciated. If I find out the right way, I will make my own tutorial for the world.

thank you!

Share Improve this question asked Oct 3, 2012 at 10:38 Jens 2,4493 gold badges29 silver badges47 bronze badges

1 Not sure what you are doing wrong here. I just downloaded the zip file and unzipped it to C:\path\to\xampp\htdocs\d3examples, so that this folder now contains folders like src, lib, examples etc. Accessing http://localhost/d3examples/examples/albers/albers.html in Chrome and Firefox shows up the correct map. Did try to open the albers.html file directly by double-clicking and get a blank page. – mtariq Commented Oct 3, 2012 at 11:01
now it works, thank you very much for your good explanation! I was not aware to unzip into the htdocs. This means, for some of the examples it needs the "localhost/example.html" address. thanks! If I could, I would check your answer as the most correct. – Jens Commented Oct 3, 2012 at 20:24

Add a ment |

2 Answers 2

Sorted by: Reset to default 9

d3.js is a client side JavaScript library so you don't need any servers in the background. To begin use static files. Here is a short example:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first d3.js</title>
    <link href="style.css" rel="stylesheet">
  </head>

  <body>
    <div id="mySVG"></div>
    <script src="http://d3js/d3.v2.js"></script>
    <script>
      var svg = d3.select("#mySVG")
        .append("svg")
        .attr("width", 200)
        .attr("height", 200)

      svg.append("text")
        .attr("x", 50)
        .attr("y", 50)
        .attr("class", "text")
        .text("d3.js is awesome")
    </script>
  </body>

and a style.css for styling:

.text {
  fill: blue;
}

Open index.html in the browser and you should see a blue text saying "d3.js is awesome". More helpful tutorials are:

http://alignedleft./tutorials/d3/
http://christopheviau./d3_tutorial/
http://www.recursion/d3-for-mere-mortals/
http://www.janwillemtulp./2011/03/20/tutorial-introduction-to-d3/

and of course

https://github./mbostock/d3/wiki/Tutorials

Some of the examples in the d3 sample library may produce errors in certain browsers when you try to run static files locally. Mike suggests that you run python's simplehttpserver while browsing the samples.

See instructions here: https://github./mbostock/d3/wiki

python -m SimpleHTTPServer 8888

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

javascript - How to get started with d3js examples using xampp? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)