Solved

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

Posted on 2016-10-14
4
34 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
  • 2
  • 2
4 Comments
 
LVL 32

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 32

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to count occurrences of each item in an array.

747 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now