Solved

How do I put codes from jsfiddle.net into my website?

Posted on 2016-10-14
4
64 Views
Last Modified: 2016-10-24
I'm trying to put code from jsfiddle into an html page but I couldn't get it work.

how can I do this ?

I have attached the files

Regards
jsfiddle.js
index.html
css.css
0
Comment
Question by:john a
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 33

Expert Comment

by:ste5an
ID: 41843358
Exactly as you see it in index.html. Just add the css and script links. And of course a link to jQuery.
0
 

Author Comment

by:john a
ID: 41843375
I addedd the css and script links in index.html file , but it doesn't show the jsfiddle script .

how jOuery is added ?
0
 

Author Comment

by:john a
ID: 41843380
I have added the jsfiddle and jquery like this :


<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type = "text/javascript">
       
		 $(document).ready(function()
{

    var width = 900,
        height = 650;

    var radius = 30; /* radius of circles */
    var numCircles = 10; /* number of circles - you must update link source/target values to match changes in the number of circles */

    var d3color = d3.interpolateRgb("#BAE4B3", "#006D2C"); /* color range for flow lines */

    //A LIST OF LINKS BETWEEN CIRCLES
    var links = [
        {
            source: 0,
            target: 5,
            strength: Math.round(Math.random() * 10)},
        {
            source: 0,
            target: 2,
            strength: Math.round(Math.random() * 10)},
        {
            source: 1,
            target: 3,
            strength: Math.round(Math.random() * 10)},
        {
            source: 2,
            target: 4,
            strength: Math.round(Math.random() * 10)},
        {
            source: 3,
            target: 5,
            strength: Math.round(Math.random() * 10)},
        {
            source: 5,
            target: 0,
            strength: Math.round(Math.random() * 10)},
        {
            source: 2,
            target: 0,
            strength: Math.round(Math.random() * 10)},
        {
            source: 3,
            target: 1,
            strength: Math.round(Math.random() * 10)}
    ];

    function createDefs(defs) {
        var dropShadowFilter = defs.append('svg:filter').attr('id', 'dropShadow');
        dropShadowFilter.append('svg:feGaussianBlur').attr('in', 'SourceAlpha').attr('stdDeviation', 1);
        dropShadowFilter.append('svg:feOffset').attr('dx', 0).attr('dy', 1).attr('result', 'offsetblur');
        var feMerge = dropShadowFilter.append('svg:feMerge');
        feMerge.append('svg:feMergeNode');
        feMerge.append('svg:feMergeNode').attr('in', "SourceGraphic");
    }

    var drag = d3.behavior.drag().origin(Object).on("drag", function() {
        dragmove(this);
    });

    //RANDOMLY GENERATE COORDINATES FOR CIRCLES
    var circles = d3.range(numCircles).map(function(i, d) {
        return [Math.round(50 + (i / numCircles) * (width - 50)), Math.round(30 + Math.random() * (height - 80))];
    });

    //GLOBAL STRENGTH SCALE
    var strength_scale = d3.scale.linear().range([2, 10]) /* thickness range for flow lines */
        .domain([0, d3.max(links, function(d) {
            return d.strength;
        })]);

    var color_scale = d3.scale.linear().range([0, 1]).domain([0, d3.max(links, function(d) {
        return d.strength;
    })]);

    var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

    var g_lines = svg.append("g").attr("class", "lines");
    var g_circles = svg.append("g").attr("class", "circles");
    var g_midpoints = svg.append("g").attr("class", "midpoints");

    //SHADOW DEFINITION
    createDefs(svg.append('svg:defs'));


    $.each(circles, function(i, d) {
        g_circles.append("circle").attr('filter', 'url(#dropShadow)').attr("class", "circle").attr("id", "circle" + i).attr("r", radius).attr("cx", d[0]).attr("cy", d[1]).call(drag);
    });

    g_lines.selectAll(".link_line").data(links).enter().append("path").attr("class", "link_line").attr("fill", function(d) {
        return d3color(color_scale(d.strength));
    }).attr("id", function(i, d) {
        return "link_line" + d;
    }).attr("d", function(d) {
        return drawCurve(d);
    });

    function dragmove(dragged) {
        var x = d3.select(dragged).attr("cx");
        var y = d3.select(dragged).attr("cy");
        d3.select(dragged).attr("cx", Math.max(radius, Math.min(width - radius, +x + d3.event.dx))).attr("cy", Math.max(radius, Math.min(height - radius, +y + d3.event.dy)));
        $.each(links, function(i, link) {
            if (link.source == dragged.id.match(/\d+/)[0] || link.target == dragged.id.match(/\d+/)[0]) {
                d3.select('#link_line' + i).attr("d", function(d) {
                    return drawCurve(d);
                });
            }
        });
    }

    function drawCurve(d) {
        var slope = Math.atan2((+d3.select('#circle' + d.target).attr("cy") - d3.select('#circle' + d.source).attr("cy")), (+d3.select('#circle' + d.target).attr("cx") - d3.select('#circle' + d.source).attr("cx")));
        var slopePlus90 = Math.atan2((+d3.select('#circle' + d.target).attr("cy") - d3.select('#circle' + d.source).attr("cy")), (+d3.select('#circle' + d.target).attr("cx") - d3.select('#circle' + d.source).attr("cx"))) + (Math.PI / 2);

        var sourceX = +d3.select('#circle' + d.source).attr("cx");
        var sourceY = +d3.select('#circle' + d.source).attr("cy");
        var targetX = +d3.select('#circle' + d.target).attr("cx");
        var targetY = +d3.select('#circle' + d.target).attr("cy");

        var arrowOffset = 20;
        var points = [];
        points.push([sourceX + radius * Math.cos(slope) - strength_scale(d.strength) * Math.cos(slopePlus90), sourceY + radius * Math.sin(slope) - strength_scale(d.strength) * Math.sin(slopePlus90)]);
        points.push([sourceX + radius * Math.cos(slope), sourceY + radius * Math.sin(slope)]);
        points.push([targetX - radius * Math.cos(slope), targetY - radius * Math.sin(slope)]);
        points.push([targetX - (radius + arrowOffset) * Math.cos(slope) - strength_scale(d.strength + (arrowOffset / 2)) * Math.cos(slopePlus90), targetY - (radius + arrowOffset) * Math.sin(slope) - strength_scale(d.strength + (arrowOffset / 2)) * Math.sin(slopePlus90)]);
        points.push([targetX - (radius + arrowOffset) * Math.cos(slope) - strength_scale(d.strength) * Math.cos(slopePlus90), targetY - (radius + arrowOffset) * Math.sin(slope) - strength_scale(d.strength) * Math.sin(slopePlus90)]);
        return d3LineLinear(points) + "Z";
    }

});
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
	
</html>

Open in new window

0
 
LVL 33

Accepted Solution

by:
ste5an earned 500 total points
ID: 41843448
Basically like this:

<!-- saved from url=(0016)http://localhost -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Title</title>
		<style>
			svg {
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAdCAMAAACKeiw+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////9fb3h/JDwQAAABtJREFUeNpiYMQLGBgZ8IJR6VHpUWnKpAECDACcGgA72QxfPgAAAABJRU5ErkJggg==);
				border: solid 1px #ddd;
			}
			svg .circle {
				fill: steelblue;
				stroke: white;
				stroke-width: 2;
			}
			svg circle:hover{
				cursor: pointer;
			}
			svg circle:active{
				stroke: yellow;
			}
			svg .link_line {
				stroke: rgba(255,255,255,.5);
				stroke-width: 1.5;
			}	
		</style>		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js" type="text/javascript"></script>	
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.10/jquery.min.js" type="text/javascript"></script>	
		<script type="text/javascript">
			$(document).ready(function() {

				var width = 900,
					height = 650;

				var radius = 30; /* radius of circles */
				var numCircles = 10; /* number of circles - you must update link source/target values to match changes in the number of circles */

				var d3color = d3.interpolateRgb("#BAE4B3", "#006D2C"); /* color range for flow lines */

				//A LIST OF LINKS BETWEEN CIRCLES
				var links = [
					{
						source: 0,
						target: 5,
						strength: Math.round(Math.random() * 10)},
					{
						source: 0,
						target: 2,
						strength: Math.round(Math.random() * 10)},
					{
						source: 1,
						target: 3,
						strength: Math.round(Math.random() * 10)},
					{
						source: 2,
						target: 4,
						strength: Math.round(Math.random() * 10)},
					{
						source: 3,
						target: 5,
						strength: Math.round(Math.random() * 10)},
					{
						source: 5,
						target: 0,
						strength: Math.round(Math.random() * 10)},
					{
						source: 2,
						target: 0,
						strength: Math.round(Math.random() * 10)},
					{
						source: 3,
						target: 1,
						strength: Math.round(Math.random() * 10)}
				];

				function createDefs(defs) {
					var dropShadowFilter = defs.append('svg:filter').attr('id', 'dropShadow');
					dropShadowFilter.append('svg:feGaussianBlur').attr('in', 'SourceAlpha').attr('stdDeviation', 1);
					dropShadowFilter.append('svg:feOffset').attr('dx', 0).attr('dy', 1).attr('result', 'offsetblur');
					var feMerge = dropShadowFilter.append('svg:feMerge');
					feMerge.append('svg:feMergeNode');
					feMerge.append('svg:feMergeNode').attr('in', "SourceGraphic");
				}

				var drag = d3.behavior.drag().origin(Object).on("drag", function() {
					dragmove(this);
				});

				//RANDOMLY GENERATE COORDINATES FOR CIRCLES
				var circles = d3.range(numCircles).map(function(i, d) {
					return [Math.round(50 + (i / numCircles) * (width - 50)), Math.round(30 + Math.random() * (height - 80))];
				});

				//GLOBAL STRENGTH SCALE
				var strength_scale = d3.scale.linear().range([2, 10]) /* thickness range for flow lines */
					.domain([0, d3.max(links, function(d) {
						return d.strength;
					})]);

				var color_scale = d3.scale.linear().range([0, 1]).domain([0, d3.max(links, function(d) {
					return d.strength;
				})]);

				var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

				var g_lines = svg.append("g").attr("class", "lines");
				var g_circles = svg.append("g").attr("class", "circles");
				var g_midpoints = svg.append("g").attr("class", "midpoints");

				//SHADOW DEFINITION
				createDefs(svg.append('svg:defs'));


				$.each(circles, function(i, d) {
					g_circles.append("circle").attr('filter', 'url(#dropShadow)').attr("class", "circle").attr("id", "circle" + i).attr("r", radius).attr("cx", d[0]).attr("cy", d[1]).call(drag);
				});

				g_lines.selectAll(".link_line").data(links).enter().append("path").attr("class", "link_line").attr("fill", function(d) {
					return d3color(color_scale(d.strength));
				}).attr("id", function(i, d) {
					return "link_line" + d;
				}).attr("d", function(d) {
					return drawCurve(d);
				});

				function dragmove(dragged) {
					var x = d3.select(dragged).attr("cx");
					var y = d3.select(dragged).attr("cy");
					d3.select(dragged).attr("cx", Math.max(radius, Math.min(width - radius, +x + d3.event.dx))).attr("cy", Math.max(radius, Math.min(height - radius, +y + d3.event.dy)));
					$.each(links, function(i, link) {
						if (link.source == dragged.id.match(/\d+/)[0] || link.target == dragged.id.match(/\d+/)[0]) {
							d3.select('#link_line' + i).attr("d", function(d) {
								return drawCurve(d);
							});
						}
					});
				}

				function drawCurve(d) {
					var slope = Math.atan2((+d3.select('#circle' + d.target).attr("cy") - d3.select('#circle' + d.source).attr("cy")), (+d3.select('#circle' + d.target).attr("cx") - d3.select('#circle' + d.source).attr("cx")));
					var slopePlus90 = Math.atan2((+d3.select('#circle' + d.target).attr("cy") - d3.select('#circle' + d.source).attr("cy")), (+d3.select('#circle' + d.target).attr("cx") - d3.select('#circle' + d.source).attr("cx"))) + (Math.PI / 2);

					var sourceX = +d3.select('#circle' + d.source).attr("cx");
					var sourceY = +d3.select('#circle' + d.source).attr("cy");
					var targetX = +d3.select('#circle' + d.target).attr("cx");
					var targetY = +d3.select('#circle' + d.target).attr("cy");

					var arrowOffset = 20;
					var points = [];
					points.push([sourceX + radius * Math.cos(slope) - strength_scale(d.strength) * Math.cos(slopePlus90), sourceY + radius * Math.sin(slope) - strength_scale(d.strength) * Math.sin(slopePlus90)]);
					points.push([sourceX + radius * Math.cos(slope), sourceY + radius * Math.sin(slope)]);
					points.push([targetX - radius * Math.cos(slope), targetY - radius * Math.sin(slope)]);
					points.push([targetX - (radius + arrowOffset) * Math.cos(slope) - strength_scale(d.strength + (arrowOffset / 2)) * Math.cos(slopePlus90), targetY - (radius + arrowOffset) * Math.sin(slope) - strength_scale(d.strength + (arrowOffset / 2)) * Math.sin(slopePlus90)]);
					points.push([targetX - (radius + arrowOffset) * Math.cos(slope) - strength_scale(d.strength) * Math.cos(slopePlus90), targetY - (radius + arrowOffset) * Math.sin(slope) - strength_scale(d.strength) * Math.sin(slopePlus90)]);
					return d3LineLinear(points) + "Z";
				}

			});	
		</script>
	</head>
	<body>	
		Test
	</body>
</html>

Open in new window


But one problem is: You're also using d3.js, but which version?? The actual does not work..

btw, jsfiddle has on the left side a external files section. You need all those references. And last but least: can you post a link to the working one??
0

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remaiā€¦
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to count occurrences of each item in an array.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

731 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question