First Commit
This commit is contained in:
LeviM0323 committed
commit
d861a1a02c
36 files changed
+2996
No files matched your search
@@ -0,0 +1,14 @@
|
||||
var data = [10, 20, 30, 40, 50];
|
||||
var svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", 400)
|
||||
.attr("height", 200);
|
||||
svg.selectAll("rect")
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", function(d, i) { return i * 40; })
|
||||
.attr("y", function(d) { return 200 - d * 2; })
|
||||
.attr("width", 30)
|
||||
.attr("height", function(d) { return d * 2; })
|
||||
.attr("fill", "purple");
|
||||
@@ -0,0 +1,3 @@
|
||||
First Name,Last Name
|
||||
John,Doe
|
||||
Harry,Potter
|
||||
|
@@ -0,0 +1,11 @@
|
||||
[{
|
||||
"name": "John",
|
||||
"age": 30,
|
||||
"city": "Toronto"
|
||||
},
|
||||
{
|
||||
"name": "Jane",
|
||||
"age": 10,
|
||||
"city": "London"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,9 @@
|
||||
var dataset = [100, 122];
|
||||
|
||||
d3.select('body')
|
||||
.selectAll('p')
|
||||
.data(dataset)
|
||||
.text('Added Paragraph!')
|
||||
.attr('style', 'color:red')
|
||||
.exit()
|
||||
.remove();
|
||||
@@ -0,0 +1,11 @@
|
||||
var dataset = [100, 122, 23, 54, 5, 360];
|
||||
|
||||
d3.select('body')
|
||||
.selectAll('p')
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append('p')
|
||||
.text((d, i) => {
|
||||
return d
|
||||
})
|
||||
.attr('style', 'color:red');
|
||||
@@ -0,0 +1,19 @@
|
||||
d3.csv("data/csvimport.csv")
|
||||
.then(function(data){
|
||||
console.log(data)
|
||||
d3.select('body')
|
||||
.selectAll('p')
|
||||
.data(data)
|
||||
.enter()
|
||||
.append('p')
|
||||
.text((d, i) => {
|
||||
return d['First Name'] + ' ' + d['Last Name']
|
||||
})
|
||||
.attr('style', 'color:red');
|
||||
|
||||
})
|
||||
|
||||
d3.json("data/jsonimport.json")
|
||||
.then(function(data){
|
||||
console.log(data)
|
||||
})
|
||||
@@ -0,0 +1,24 @@
|
||||
d3.select('body').append('h1');
|
||||
d3.select('h1').text('Hello World');
|
||||
d3.select('h1').style('color', 'pink');
|
||||
//d3.select('h1').attr('class', 'first-heading')
|
||||
d3.select('h1').attr('id', 'first-heading')
|
||||
d3.select('h1').classed("class-added", true)
|
||||
// d3.select('h1').remove();
|
||||
|
||||
// d3.select('body').append('p');
|
||||
// d3.select('p').text('Added First Paragraph');
|
||||
// d3.select('p').style('color', 'red');
|
||||
d3.select('body').append('p').text('Added First Paragraph with Method Chaning').style('color', 'red')
|
||||
d3.select('body').append('div').text('outerdiv text here').style('border', '1px solid blue')
|
||||
.append('div').text('Innerdiv text here').style('border', '1px solid green')
|
||||
|
||||
d3.select("body").append('p').text('First Message').text('Second Message')
|
||||
|
||||
d3.select('div').insert('div', 'div').text('inserted text')
|
||||
|
||||
d3.select('body').append('div').html('<a href="https://google.com">Click Here!</a>')
|
||||
|
||||
d3.select('body').append('div').classed("new-class", true).attr('id', 'new-id');
|
||||
d3.select('.new-class').text('select element with class').style('color', 'aqua');
|
||||
d3.select('#new-id').style("font-family", "sans-serif");
|
||||
@@ -0,0 +1,5 @@
|
||||
var paragraph = d3.select('p');
|
||||
console.log('select(): ', paragraph);
|
||||
|
||||
var paragraphs = d3.selectAll('p');
|
||||
console.log('selectAll(): ', paragraphs)
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://d3js.org/d3.v7.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>D3.js Examples</h1>
|
||||
<h2>Simple SVG Examples</h2>
|
||||
<svg width="300" height="300">
|
||||
<rect width="100" height="200" x="100" y="100"></rect>
|
||||
</svg>
|
||||
|
||||
<svg width="500" height="500">
|
||||
<line x1="0" y1="300" x2="400" y2="100" stroke="#ffffff"></line>
|
||||
</svg>
|
||||
|
||||
<svg width="500" height="500">
|
||||
<circle r="100" cx="100" cy="100"></circle>
|
||||
</svg>
|
||||
|
||||
<svg width="500" height="500">
|
||||
<ellipse rx="100" ry="150" cx="100" cy="150"></ellipse>
|
||||
</svg>
|
||||
|
||||
<svg width="500" height="500">
|
||||
<text x="250" y="25">Text Goes here</text>
|
||||
</svg>
|
||||
<hr>
|
||||
<h2>SVGs with text</h2>
|
||||
<svg width="500" height="500">
|
||||
<circle r="100" cx="250" cy="250"></circle>
|
||||
<text x="200" y="200" stroke="#fff">Text Goes Here</text>
|
||||
</svg>
|
||||
<svg width="500" height="500">
|
||||
<g>
|
||||
<rect width="300" height="100" x="100" y="200"></rect>
|
||||
<text x="200" y="250" stroke="#fff">Text Goes Here</text>
|
||||
</g>
|
||||
</svg>
|
||||
<h2>SVG with D3js (easier)</h2>
|
||||
<script src="./plainSVGwithD3.js"></script>
|
||||
<hr>
|
||||
<h2>Bar Graph (no labels)</h2>
|
||||
<script src="./barGraph.js"></script>
|
||||
<hr>
|
||||
<h2>Data Binding</h2>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<p></p>
|
||||
<script src="./dataBinding.js"></script>
|
||||
<hr>
|
||||
<h2>Data Binding 2</h2>
|
||||
<script src="./dataBinding2.js"></script>
|
||||
<hr>
|
||||
<h2>Data Loading (CSV)</h2>
|
||||
<script src="./dataLoading.js"></script>
|
||||
<hr>
|
||||
<h2>DOM Manipulation</h2>
|
||||
<script src="./domManipulation.js"></script>
|
||||
<hr>
|
||||
<h2>DOM Selection</h2>
|
||||
<p>Second Paragraph</p>
|
||||
<p>First Paragraph</p>
|
||||
<script src="./domSelection.js"></script>
|
||||
<hr>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
var width = 500;
|
||||
var height = 500;
|
||||
|
||||
var svg = d3.select('body')
|
||||
.append('svg')
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
|
||||
//1. rect
|
||||
// <svg width="300" height="300">
|
||||
// <rect width="100" height="200" x="100" y="100"></rect>
|
||||
// </svg>
|
||||
|
||||
// svg.append("rect")
|
||||
// .attr("x", 100)
|
||||
// .attr("y", 100)
|
||||
// .attr("width", 100)
|
||||
// .attr("height", 200)
|
||||
|
||||
//2. line
|
||||
// <svg width="500" height="500">
|
||||
// <line x1="0" y1="300" x2="400" y2="100" stroke="#ffffff"></line>
|
||||
// </svg>
|
||||
// svg.append('line')
|
||||
// .attr('x1', 0)
|
||||
// .attr('x2', 400)
|
||||
// .attr('y1', 300)
|
||||
// .attr('y2', 100)
|
||||
// .attr('stroke', '#000000')
|
||||
|
||||
//3. circle - try on your own!
|
||||
|
||||
//4. ellipse - try on your own!
|
||||
|
||||
//5. text - try on your own!
|
||||
|
||||
//6. Circle over text
|
||||
// <svg width="500" height="500">
|
||||
// <g>
|
||||
// <circle r="100" cx="250" cy="250"></circle>
|
||||
// <text x="200" y="200" stroke="#fff">Text Goes Here</text>
|
||||
// </g>
|
||||
// </svg>
|
||||
var group = svg.append('g')
|
||||
|
||||
var circle = group.append('circle')
|
||||
.attr('cx', 250)
|
||||
.attr('cy', 250)
|
||||
.attr('r', 100)
|
||||
.attr('fill', 'hotpink')
|
||||
.style('opacity', 0.8)
|
||||
group.append("text")
|
||||
.attr("x", 175)
|
||||
.attr("y", 200)
|
||||
.attr("stroke", "#fff")
|
||||
.attr("font-family", "Impact, sans-serif")
|
||||
.attr("font-size", '24px')
|
||||
.attr("fill", "red")
|
||||
.text("This is a circle!")
|
||||
Reference in new issue
Block a user