search

CSCI-4830-002-2014 / challenge-week-8

0 stars 14 forks source link

Issue merging JSFiddle with standard HTML #2

Open kornpow opened 10 years ago

kornpow commented 10 years ago

Anyone else having a lot of issues doing the very first checkpoint? My code worked for week one, but an exact copy of it does not work for the HTML document. After some modifications I got it to display, but incorrectly. I do not know where to go from here besides continuing to mess with the code until I can find out whats wrong.

kornpow commented 10 years ago

image The output of d3.max, unlike in jsFiddle, is not the max? Any ideas of a cause of this madness?

indiesquidge commented 10 years ago

You can't just copy over the JavaScript directly from JSFiddle. You need to create an actual structured html document, include d3.js as a scripting source, and then put all of your actual JavaScript inside of a custom script like this:

<script type='text/javascript'>
    <!-- your js code here -->
</script>
kornpow commented 10 years ago

I am aware of this, everything is in a nice structured document, with script and style tags and whatnot. The code just is not working as it should. Look at the picture above, it is saying the max is 8936 instead of 22527.

kornpow commented 10 years ago

Its in an external js file, but that is included in the main html doc. image

kornpow commented 10 years ago

If its unkosher to have these images, let me know please. I think the real challenge shouldnt be putting it into a file like this, so I am guessing I have screwed something up somewhere.

alne4294 commented 10 years ago

I hardly know anything about JS/HTML/CSS so I can't help debug your issue, but the following structure worked for me when moving from JSFiddle to a single .html file.

<!DOCTYPE html>
<html>
    <head>
        //Scripting source?
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>

    //The following line was in the html box of my JSFiddle
    <svg class="chart"></svg>

    <style>
        //My CSS code
    </style>

    <script>
        //My Javascript code
    </script>

</html>
kornpow commented 10 years ago

I got it to work using the CDN pointed to by this weeks tutorial, as suggested,

. I'd recommend not using external js or css because that is what gave me these issues. Oh well there's like 3-4 hours down the drain.
nfejes commented 10 years ago

@sako0938 Sounds like you are sorting the values as strings instead of numbers. Try d3.max(data, function(d) { return +d.population }) instead, the + sign converts any string to a number.