Solved

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

Posted on 2016-10-14
4
70 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 34

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 34

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

717 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