I'm trying to build a simple example on Cloud 9 using node.js and D3, but having some issues rendering the chart.
I have a simple view in a chart.ejs file and have attempted to do an include of the d3.v3.js and d3.layout.js files. However, I keep getting Uncaught Syntax Error: Unexpected token < when the d3 include files are reached.
So a couple of questions:
Has anyone been able to use D3 with EJS? I've seen some Jade examples, but not EJS.
Is using the <script> tag the appropriate way to use D3 with EJS rendering?
Any good examples out there using D3 and node.js?
Would appreciate any thoughts / comments?
Disclaimer: I'm relatively new to node.js and D3, so I may need some basic direction.
EDIT: here's the chart.ejs code. It has something to do with the script include. When I try to include locally like below, it throws the unexpected token error. But when I refer to the include from a download location, it seems to work. It may be a C9 thing, not sure though. Curious if someone else has run across this in C9:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
</script>
</body>
</html>
Related
In ASP.NET MVC 5, is it possible to use BundleColletion.UseCdn and have it render with the HTML integrity attribute? For example, is there someway to make this:
bundles.UseCdn = true;
bundles.Add(
new ScriptBundle("~/bundles/jquery", "https://code.jquery.com/jquery-3.1.1.min.js")
.Include("~/Scripts/js/jquery/jquery-3.1.1.min.js")
);
render as this?
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
Partial answer.
To add crossorigin="anonymous" attribute you can use #Scripts.RenderFormat
#Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" crossorigin=\"anonymous\"></script>", "~/bundles/jquery")
You also can include integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" part in RenderFormat, but it does not look like a good solution.
I tried this way in our ASP.NET MVC 5 project when CDN fails
#Scripts.RenderFormat("<script src='{0}' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' crossorigin='anonymous'></script>", "~/bundles/bootstrapJS")
And this will generate (inside developer tool),
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
And From this answer we found that there is bug if script is fail to load from CDN
So we add script manually inside the tag.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>(window.jQuery) || document.write('<script src="/Scripts/jquery-1.12.4.min.js"><\/script>');</script>
</head>
<body></body>
</html>
You can have it like
<script src='#Scripts.Url("~/bundles/jquery")' crossorigin="anonymous" integrity="value"> </script>
I searched online about the problem of using d3.js SVG under IE8, and I find an ideal method is using R2D3, and I tried to do like that, but it still doesn't work yet.
I am not sure what I have tried is right, do I only need to import the library like that?
<html>
<head>
<title>R2D3 101</title>
<!--[if lte IE 8]><script src="r2d3.js" charset="utf-8"></script><![endif]-->
<!--[if gte IE 9]><!-->
<script src="d3.js"></script>
<!--<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
And other things don't need to change? If you are interested, I can show you a simple demo about my treemap function.
http://jsfiddle.net/srvikram13/cR35x/9/
At first, I am thinking about if it is the problem of the limitations using Transforms as mentioned in the github: https://github.com/mhemesath/r2d3/
But the thing is, I really write the function as the GOOD one:
// BAD
circles.transform('translate(20)');
// GOOD
circles.transform('translate(20,0)');
I am new to meteor and I am trying to do multi-page application where http://www.mydomain.com/page1 will result a totally different page from http://www.mydomain.com/page2.
By totally different I mean that I don't want the page to be rendered by the client.
I tried to use meteor-router but What I got is something like:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/myapp.css?9297ad4aa173c4e0c19aebd27c62a5c43242bb93">
<script type="text/javascript">
__meteor_runtime_config__ = {"ROOT_URL":"http://localhost:3000","serverId":"iMp4kgzzeqDtktJoY"};
</script>
<script type="text/javascript" src="/packages/underscore/underscore.js?6d71e6711255f43c0de8090f2c8b9f60534a699b"></script>
<script type="text/javascript" src="/packages/meteor/client_environment.js?07a7cfbe7a2389cf9855c7db833f12202a656c6b"></script>
<script type="text/javascript" src="/packages/meteor/helpers.js?2968aa157e0a16667da224b8aa48edb17fbccf7c"></script>
...
...MANY MANY MANY SCRIPTS.... ?!?
...
...
<script type="text/javascript" src="/myapp.js?2866dcdb5c828b129cdd3b2498a4bf65da9ea43f"></script>
<title>myapp</title>
</head>
<body>
</body>
</html>
And this is not what I want. I want page1 route will return me:
<!DOCTYPE html>
<html>
<head>
My meta tags
</head>
<body>
page1
</body>
</html>
And I want page2 to return different meta tags with different content.
In order to be clear, lets assume that my clients sometime doesn't have javascript. I don't asking about whether meteor is the right framework! I am asking only if can I do this with meteor.
Meteor works a bit different compared to the traditional LAMP stack. Basically it works by patching out the DOM to only where the changes are needed as opposed to re-downloading the whole web page. It makes for a very satisfying end user experience on modern web browsers.
To use meteor router you need to find a spot that you want to patch out with new data for different pages with {{renderPage}}. You can use something like
<head>
<title>xx</title>
</head>
<body>
{{renderPage}}
</body>
<template name="page1">
<h2>Hello!</h2>
</template>
<template name="page2">
<h2>Ola!</h2>
</template>
Now you need to define a router in your client side javascript:
Meteor.Router.add({
'/page1': 'page1',
'/page2': 'page2'
});
So if you load /page1 you would see Hello! and if you load /page2 you would see Ola! as defined in the <template name="page2">..</template>
With the meta tags you need to use javascript to create them. With something like
$('head').append("<meta...");
Again this depends on your preference, personally I find these type of apps load ridiculously fast between web pages as compared to other 'thin' based websites. (Have a look at meteor.com to see how fast you can swap between the pages). The browser does need javascript, however.
Of note is in production mode there will only be 1 script tag.
I have the following template:
<!DOCTYPE HTML>
<html>
<head>
<link href="css/style.css" rel="stylesheet"/>
<script type="text/javascript" src="/js/libs-0001.js" async="async"></script>
<script type="text/javascript" src="/js/app-0004.js" async="async"></script>
<script>
var name = {literal}<%= name %>{/literal};
var version = {literal}<%= version %>{/literal}};
</script>
</head><body></body></html>
Like in smarty, from php, I want to use {literal} declarations in the template, under the script session.
How to do this in locomotivejs views?
As far as I understand {literal}/{/literal}, everything between those tags isn't interpreted. EJS templates don't have something similar, although there are ways of circumventing that.
One way is to configure EJS to use different open/close tags, described here.
Another way is to use a different templating engine altogether, which isn't too difficult since LocomotiveJS isn't hardcoded to using EJS templates. I like the Swig templating engine myself, which has the {% raw %} tag that seems to do the same as {literal}.
After struggling for 2 days i am still not able to integrate node+express+boilerplate and a simple JQuery module (Date Picker).
As a final check, i cloned the fresh copy of this project and added the below 4 lines. It failed to show the date prompt which confirmed that the problem isn't at my end. The same 4 lines of code on normal html project works.
I decided to give up on this but there should be a reason why it is not working. I am still not able to figure it out.
Project to clone: https://github.com/mape/node-express-boilerplate
Add these 4 lines to layout.ejs under view directory to head element.
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="datepick"></p>
<script type="text/javascript">
$(function() {
$("#datepick").datepicker();
});
</script>
You added the paragraph html element to the element as well? If so, try moving that inside the <body> tag somewhere, like the views/index.ejs file.