D3 Dot Graph

Size
4,139 Kb
Views
26,312

How do I make an d3 dot graph?

What is a d3 dot graph? How do you make a d3 dot graph? This script and codes were developed by Alexius M Wronka I I on 19 September 2022, Monday.

D3 Dot Graph Previews

D3 Dot Graph - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>d3 Dot Graph</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bubble-graph"><h1>D3 graph</h1></div>
<div class="data-box"> <div id="container"></div><div id="data-container"><div class="data-piece">Data Set</div></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3 Dot Graph - Script Codes CSS Codes

body { padding-bottom: 20px; font-size: 11px; font-family: verdana;
}
svg:hover { font-weight: bold;
}
.axis path, .axis line { fill: none; shape-rendering: crispEdges;
}
.bubble-graph { text-align: center; background-color: lightgrey; border-radius: 10px; margin: 0px 40% 0px 40%; padding: 1px; color: white;
}
.data-box { width: 100%;
}
.data-box #container { width: 650px; float: left;
}
.data-box #data-container { float: left;
}
.data-box #data-container .data-piece { text-align: center; width: 200px; height: 20px; background-color: steelblue; font-size: 14px; font-family: arial; font-weight: 100; color: white; margin: 3px 0px; padding: 3px 0px; border-radius: 10px;
}

D3 Dot Graph - Script Codes JS Codes

var w = 650;
var h = window.innerHeight-100;
var margin = { top: 10, right: 20, bottom: 20, left: 40};
var radius = 10;
var dataBox = document.getElementById("data-container")
var svg = d3.select('#container').append('svg').attr({ width: w, height: h
});
var data = [ { x:100, y: 110 }, { x:83, y: 43 }, { x:92, y: 28 }, { x:49, y: 74 }, { x:51, y: 10 }, { x:25, y: 98 }, { x:77, y: 30 }, { x:20, y: 83 }, { x:11, y: 63 }, { x:4, y: 55 }, { x:22, y: 12 }, { x:85, y: 100 }, { x:60, y: 40 }, { x:70, y: 80 }, { x:10, y: 20 }, { x:40, y: 50 }, { x:25, y: 31 }
];
var xScale = d3.scale.linear() .domain([0, d3.max(data, function(d) { return d.x; } ) + 10]) .range([margin.left, w - margin.right]);
var yScale = d3.scale.linear() .domain([ d3.max(data, function(d) { return d.y; } ) + 10,0]) .range([margin.top, h - margin.bottom]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient('left');
// This describes a circle at top left corner with radius of 1
var circleInitialAttrs = { cx: function(d){return xScale(d)}, cy: yScale(0), r: 1, fill: 'red'
};
var randomColors = function(){ var k = Math.floor(Math.random()*10) if(k >=8) return "lightblue"; if(k < 8 &&k > 5) return "darkblue"; if(k <= 5 && k > 2) return "blue"; if(k <= 2) return 'aquamarine'}
var circleAttrs = { cx: function(d) { return xScale(d.x); }, cy: function(d) { return yScale(d.y); }, r: function(d){return Math.floor(Math.random()*10+10)}, fill: function(){return randomColors()}
};
var mouseOverHandler = function(d, i) { d3.select(this).attr({ fill: 'red', r: radius * 2 }); svg.append('text') .attr({ id: 't' + d.x + '-' + d.y + '-' + i, x: function() { return xScale(d.x) - 30 ; }, y: function() { return yScale(d.y) - 15 ; } }) .text(function() { return [d.x, d.y]; });
};
var mouseOutHandler = function(d, i) { d3.select(this).attr({ fill: function(){return randomColors()}, r: function(d){return Math.floor(Math.random()*10+10)} }); d3.select('#t' + d.x + '-' + d.y + '-' + i).remove();
};
var xAxisGroup = svg.append('g').attr({ 'class': 'axis', transform: 'translate(' + [0, h-margin.bottom] + ')'
}).call(xAxis);
var yAxisGroup = svg.append('g').attr({ 'class': 'axis', transform: 'translate(' + [margin.left, 0] + ')'
}).call(yAxis);
var circles = svg.selectAll('circle') .data(data) .enter() .append('circle') .attr(circleInitialAttrs) .on('mouseover', mouseOverHandler) .on('mouseout', mouseOutHandler);
// Now transition all the circles to their new positions
// Pass a function to delay to stagger the transitions,
// (otherwise circles all bounce at once and look like they're attached)
circles.transition() .delay(function(d, i) { // first circle will be not delayed (0*100=0) // second circle will be delayed by 100ms (1*100=100) // third circle will be delayed by 2*100=200ms // etc. return i * 100; }) .duration(1000) .ease('bounce') .attr(circleAttrs); svg.on('click', function() { var coords = d3.mouse(this); var newData = { x: Math.round(xScale.invert(coords[0])), // every scale has invert method to put things "backwards" y: Math.round(yScale.invert(coords[1])) }; data.push(newData); var dataPiece = document.createElement("div"); dataPiece.innerHTML="x: " + newData.x+" y: "+newData.y; dataBox.appendChild(dataPiece) dataPiece.classList.add("data-piece") xScale.domain([0, d3.max(data, function(d) { return d.x; } ) + 10]); yScale.domain([ d3.max(data, function(d) { return d.y; } ) + 10,0]); // After the scales are updated with new domains, // will also need to update the axes, circles, and text xAxisGroup.transition().call(xAxis); yAxisGroup.transition().call(yAxis); // For the newly created circle, transition it from // a starting to ending point. // Assign this expression to a variable 'c', so it can be transitioned later var c = svg.selectAll('circle').data(data); // Animate circles that were already placed to their new positions relative to new axes c.transition() .ease('elastica') .attr(circleAttrs); c.enter() .append('circle') .attr(circleInitialAttrs) .on('mouseover', mouseOverHandler) .on('mouseout', mouseOutHandler); // Transition the attributes from 0,0 to new attributes // Use duration method to control timing of the transition c.transition() // .delay(500) // from the time transition is triggerred, pause .5s before start transition .duration(1000) // 1000ms = 1s .ease('elastic') // bounce in effect .attr(circleAttrs); });
for(var i =0; i< data.length; i++){ var dataPiece = document.createElement("div"); dataPiece.innerHTML="x: " + data[i].x+" y: "+data[i].y; dataBox.appendChild(dataPiece); dataPiece.classList.add("data-piece")
}
D3 Dot Graph - Script Codes
D3 Dot Graph - Script Codes
Home Page Home
Developer Alexius M Wronka I I
Username awronka
Uploaded September 19, 2022
Rating 3
Size 4,139 Kb
Views 26,312
Do you need developer help for D3 Dot Graph?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alexius M Wronka I I (awronka) Script Codes
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!