D3 test
How do I make an d3 test?
Playing around with d3. What is a d3 test? How do you make a d3 test? This script and codes were developed by Rob on 30 August 2022, Tuesday.
D3 test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>d3 test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="test1" class="mypiechart"></svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/moment-range/1.0.5/moment-range.min.js'></script>
<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='https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js'></script> <script src="js/index.js"></script>
</body>
</html>
D3 test - Script Codes CSS Codes
text { font: 12px sans-serif;
}
svg { display: block; float: left; height: 350px !important; width: 350px !important;
}
html, body { margin: 0px; padding: 0px; height: 100%; width: 100%;
}
D3 test - Script Codes JS Codes
var testdata = [ {key: "One", y: 5, color: "#5F5"}, {key: "Two", y: 2}, {key: "Three", y: 9}, {key: "Four", y: 7}, {key: "Five", y: 4}, {key: "Six", y: 3}, {key: "Seven", y: 0.5}
];
var testdata2 = [ {key: "One", y: 5}, {key: "Two", y: 2}, {key: "Three", y: 9}, {key: "Four", y: 7}, {key: "Five", y: 4}, {key: "Six", y: 3}, {key: "Seven", y: 0.5}
];
var height = 350;
var width = 350;
nv.addGraph(function() { var chart = nv.models.pieChart() .x(function(d) { return d.key }) .y(function(d) { return d.y }) .width(width) .height(height); d3.select("#test1") .datum(testdata2) .transition().duration(1200) .attr('width', width) .attr('height', height) .call(chart); // update chart data values randomly setInterval(function() { testdata2[0].y = Math.floor(Math.random() * 10); testdata2[1].y = Math.floor(Math.random() * 10); chart.update(); }, 4000); return chart;
});
nv.addGraph(function() { var chart = nv.models.pieChart() .x(function(d) { return d.key }) .y(function(d) { return d.y }) //.labelThreshold(.08) //.showLabels(false) .color(d3.scale.category20().range().slice(8)) .growOnHover(false) .labelType('value') .width(width) .height(height); // make it a half circle chart.pie .startAngle(function(d) { return d.startAngle/2 -Math.PI/2 }) .endAngle(function(d) { return d.endAngle/2 -Math.PI/2 }); // MAKES LABELS OUTSIDE OF DONUT //chart.pie.donutLabelsOutside(true).donut(true); d3.select("#test2") .datum(testdata) .transition().duration(1200) .attr('width', width) .attr('height', height) .call(chart); // disable and enable some of the sections var is_disabled = false; setInterval(function() { chart.dispatch.changeState({disabled: {2: !is_disabled, 4: !is_disabled}}); is_disabled = !is_disabled; }, 3000); return chart; });
Developer | Rob |
Username | rowinf |
Uploaded | August 30, 2022 |
Rating | 3 |
Size | 2,395 Kb |
Views | 42,504 |
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 |
Bootstrap test | 1,906 Kb |
Get combo box item value | 1,981 Kb |
Foundation Off-Canvas menu test | 2,424 Kb |
Filter inputs | 1,721 Kb |
Html5 form validation | 2,090 Kb |
Table filters | 1,727 Kb |
Site Layout | 3,219 Kb |
Nav Menu with Chevron | 1,966 Kb |
Responsive Calendar | 2,460 Kb |
Flash Cards | 3,086 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 |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Base64 SVG Me | MrBambule | 44,786 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
Spin | Elalemanyo | 8,262 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Geildanke typography | Fischaela | 3,249 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!