D3 intro

Developer
Tamo Tkhlashidze
Size
2,881 Kb
Views
10,120
  1. D3 intro Previews
  2. D3 intro HTML Codes
  3. D3 intro CSS Codes
  4. D3 intro JS Codes

How do I make an d3 intro?

What is a d3 intro? How do you make a d3 intro? This script and codes were developed by Tamo Tkhlashidze on 14 January 2023, Saturday.

D3 intro Previews
IQ Test

D3 intro - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>d3 intro</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg width="300" height="500"> <!--- <rect x="0" y="0" width="110" height="50"/> <circle cx="150" cy="25" r="25"/> <ellipse cx="250" cy="25" rx="50" ry="25"/> <line x1="0" y1="60" x2="500" y2="60" stroke="teal" stroke-width="5"/> <text x="200" y="100">Easy-peasy</text> <circle cx="25" cy="100" r="22" fill="yellow" stroke="orange" stroke-width="5"/> <rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>-->
<circle cx="25" cy="150" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="150" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="150" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="150" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="150" r="20" fill="rgba(255, 0, 0, 0.1)"/>
<circle cx="25" cy="200" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="75" cy="200" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
<circle cx="125" cy="200" r="20" fill="rgba(255, 255, 0, 0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/> <circle cx="25" cy="250" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="65" cy="250" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.5"/>
<circle cx="105" cy="250" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.2"/>
</svg>
<br/> <script src='https://d3js.org/d3.v3.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3 intro - Script Codes CSS Codes

div.bar { display: inline-block; width: 50px; height: 75px; /* We'll override this later */ background-color: teal; margin-right: 2px;
}

D3 intro - Script Codes JS Codes

"use strict";
/* d3.select("body").append("p").text("New paragraph!");
d3.select("p").text("new p text").append("h1").text("tamo");*/
var dataset = [25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10];
/*
d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d){return d;}).style("color", function(d) { if (d > 15) { //Threshold of 15 return "red"; } else { return "black"; }
});
d3.select("body").selectAll("div")	.data(dataset)	.enter()	.append("div") .attr("class", "bar")	.style("height", function(d) { var barHeight = d * 5; return barHeight + "px"; });
*/
//console.log(d3.selectAll("p"));
D3 intro - Script Codes
D3 intro - Script Codes
Home Page Home
Developer Tamo Tkhlashidze
Username Nagasaki1991
Uploaded January 14, 2023
Rating 3
Size 2,881 Kb
Views 10,120
Do you need developer help for D3 intro?

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!

Tamo Tkhlashidze (Nagasaki1991) Script Codes
Name
Csv to table
Sticky footer
Repeater
Audio test
Generate dic.dictionaryitems insert script from cvs file
A Pen by Tamo Tkhlashidze
D3 bar chart with svg
Two way binding
Svg
Custom stack class js
Create amazing sales emails 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!