D3 Dot Graph
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 - 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")
}
Developer | Alexius M Wronka I I |
Username | awronka |
Uploaded | September 19, 2022 |
Rating | 3 |
Size | 4,139 Kb |
Views | 26,312 |
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!
Name | Size |
Animated Drop Down | 3,066 Kb |
A Pen by Alexius M Wronka I I | 2,375 Kb |
List React | 3,155 Kb |
Transition button | 4,112 Kb |
React Test | 1,232 Kb |
React Calc | 6,046 Kb |
Angular Calc | 3,707 Kb |
Guage | 3,480 Kb |
Angular 2 forms | 1,244 Kb |
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!
Name | Username | Size |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
Glitchy Text Effect | Kescoe | 2,208 Kb |
Svg animation draw | SzymonDziewonski | 5,545 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!