Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 122
  • Last Modified:

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

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
john a
Asked:
john a
  • 2
  • 2
1 Solution
 
ste5anSenior DeveloperCommented:
Exactly as you see it in index.html. Just add the css and script links. And of course a link to jQuery.
0
 
john aAuthor Commented:
I addedd the css and script links in index.html file , but it doesn't show the jsfiddle script .

how jOuery is added ?
0
 
john aAuthor Commented:
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
 
ste5anSenior DeveloperCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now