First Commit
This commit is contained in:
LeviM0323 committed
commit
d861a1a02c
36 files changed
+2996
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 511 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
@@ -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!")
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
@@ -0,0 +1,256 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!--Import Google Icon Font-->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<!--Import materialize.css-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="stylesheet" href="main.css"/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Alatsi&family=Quicksand&display=swap" rel="stylesheet"> </head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col s3">
|
||||
<img src="./images/techit.png" alt="logo"/>
|
||||
</div>
|
||||
<div class="col s9">
|
||||
<h1>TECHIT Pattern Library</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s3 h-100">
|
||||
<ul class="tabs">
|
||||
<li><h6>General</h6></li>
|
||||
<li class="tab"><a href="#test1" class="active">Typography</a></li>
|
||||
<li class="tab"><a href="#test2">Color</a></li>
|
||||
<li class="tab"><a href="#test3">Page Layout</a></li>
|
||||
<li class="tab"><a href="#test4">Data Visualization</a></li>
|
||||
|
||||
<li><h6>Elements</h6></li>
|
||||
|
||||
<li class="tab"><a href="#test5">Buttons</a></li>
|
||||
<li class="tab"><a href="#test6">Form</a></li>
|
||||
<li class="tab"><a href="#test7">Notifications</a></li>
|
||||
<li class="tab"><a href="#test8">Tables</a></li>
|
||||
<li class="tab"><a href="#test9">Stat/Data</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col s9">
|
||||
<div id="test1" class="col s12">
|
||||
<h3>Typography</h3>
|
||||
|
||||
<div>
|
||||
<h4>Headings</h4>
|
||||
<div class="row heading-typogrpahy">
|
||||
<div class="col m3 typeface">
|
||||
<p>Aa</p>
|
||||
</div>
|
||||
<div class="col m9">
|
||||
<p>Typeface | Alatsi</p>
|
||||
<p>font-family | 'Alatsi', sans-serif</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="headings">
|
||||
<h1>TECHIT Brand Heading One</h1>
|
||||
<hr>
|
||||
<p>56px | normal | Alatsi </p>
|
||||
</div>
|
||||
<div class="headings">
|
||||
<h2>TECHIT Brand Heading Two Alatsi</h2>
|
||||
<hr>
|
||||
<p>50px | normal | Alatsi </p>
|
||||
</div>
|
||||
<div class="headings">
|
||||
<h3>TECHIT Brand Heading Three Alatsi</h3>
|
||||
<hr>
|
||||
<p>44px | normal | Alatsi </p>
|
||||
</div>
|
||||
<div class="headings">
|
||||
<h4>TECHIT Brand Heading Four Alatsi</h4>
|
||||
<hr>
|
||||
<p>38px | normal | Alatsi </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Contents</h4>
|
||||
<div class="row content-typogrpahy">
|
||||
<div class="col m3 typeface-content">
|
||||
<p>Aa</p>
|
||||
</div>
|
||||
<div class="col m9">
|
||||
<p>Typeface | Quicksand</p>
|
||||
<p>font-family | 'Quicksand', sans-serif</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<p class="main-content">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
|
||||
</p>
|
||||
<hr>
|
||||
<p>18px | normal | Quicksand | 150% </p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<p class="main-content">
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
|
||||
</p>
|
||||
<hr>
|
||||
<p>18px | normal | Quicksand | 150% </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="test2" class="col s12">
|
||||
<h3>Color</h3>
|
||||
|
||||
<div class="card-panel">
|
||||
<h5>Brand Color</h5>
|
||||
<div class="row">
|
||||
<div class="col s12 m2">
|
||||
<div class="card">
|
||||
<div class="card-image main-color">
|
||||
<p class="card-title">#1995ad</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Glacier Blue</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m2">
|
||||
<div class="card">
|
||||
<div class="card-image second-color">
|
||||
<p class="card-title">#a1d6e2</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Ice</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Functional Color</h5>
|
||||
<div class="row">
|
||||
<div class="col s12 m2">
|
||||
<div class="card">
|
||||
<div class="card-image functional-color-first">
|
||||
<p class="card-title">#f1f1f2</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Overcast</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m2">
|
||||
<div class="card">
|
||||
<div class="card-image functional-color-second">
|
||||
<p class="card-title">#bcbabe</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Warm Gray</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m2">
|
||||
<div class="card">
|
||||
<div class="card-image functional-color-third">
|
||||
<p class="card-title">#0c090a</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Night</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m2">
|
||||
<div class="card">
|
||||
<div class="card-image functional-color-fourth">
|
||||
<p class="card-title">#c1e1dc</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Baby Blue</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Feedback Color</h5>
|
||||
<div class="row">
|
||||
<div class="col s12 m2">
|
||||
<div class="card">
|
||||
<div class="card-image feedback-color-first">
|
||||
<p class="card-title">#fa6e59</p>
|
||||
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Watermeon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m2">
|
||||
<div class="card">
|
||||
<div class="card-image feedback-color-second">
|
||||
<p class="card-title">#ffdb5c</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Banana</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m2">
|
||||
<div class="card">
|
||||
<div class="card-image feedback-color-third">
|
||||
<p class="card-title">#52958b</p>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>Lichen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="test3" class="col s12">
|
||||
<h3>Page Layout</h3>
|
||||
</div>
|
||||
<div id="test4" class="col s12">
|
||||
<h3>Data Visualization</h3>
|
||||
</div>
|
||||
<div id="test5" class="col s12">
|
||||
<h3>Buttons</h3>
|
||||
</div>
|
||||
<div id="test6" class="col s12">
|
||||
<h3>Dialogs</h3>
|
||||
</div>
|
||||
<div id="test7" class="col s12">
|
||||
<h3>Notifications</h3>
|
||||
</div>
|
||||
<div id="test8" class="col s12">
|
||||
<h3>Tables</h3>
|
||||
</div>
|
||||
<div id="test9" class="col s12">
|
||||
<h3>Stat/Data</h3>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
M.AutoInit();
|
||||
});
|
||||
</script>
|
||||
<!--JavaScript at end of body for optimized loading-->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,169 @@
|
||||
/* body */
|
||||
body {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
/* navigation */
|
||||
.tabs {
|
||||
height: auto;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.tab {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.tabs li.tab {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tabs .tab a {
|
||||
padding: 0;
|
||||
color: #0c090a;
|
||||
}
|
||||
|
||||
.tabs .tab a:hover, .tabs .tab a.active {
|
||||
color:#0c090a;
|
||||
}
|
||||
|
||||
.tabs .tab a:focus, .tabs .tab a:focus.active {
|
||||
padding: 0;
|
||||
background: #c1e1dc;
|
||||
color:#0c090a;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
background: #fcfcfc;
|
||||
border:1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* h1 */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #333;
|
||||
font-family: 'Alatsi', sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 56px;
|
||||
margin-top: 65px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 44px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
|
||||
h6:nth-child(2) {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* typeface */
|
||||
.heading-typogrpahy {
|
||||
font-family: 'Alatsi', sans-serif;
|
||||
}
|
||||
|
||||
.typeface {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #1995ad;
|
||||
font-size: 140px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.typeface p, .typeface-content p {
|
||||
color: #f1f1f2
|
||||
}
|
||||
|
||||
.content-typogrpahy {
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
}
|
||||
|
||||
.typeface-content {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: #1995ad;
|
||||
font-size: 140px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
line-height: 150%;
|
||||
}
|
||||
/* color */
|
||||
.card-image {
|
||||
background: #1995ad;
|
||||
height: 80px;
|
||||
/* width: 120px; */
|
||||
}
|
||||
|
||||
.main-color {
|
||||
background: #1995ad;
|
||||
}
|
||||
.card .card-title {
|
||||
text-align:center;
|
||||
font-size: 12px
|
||||
}
|
||||
.card .card-content {
|
||||
text-align:center;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.second-color {
|
||||
background: #a1d6e2;
|
||||
}
|
||||
|
||||
.functional-color-first {
|
||||
background: #f1f1f2;
|
||||
}
|
||||
|
||||
.functional-color-second {
|
||||
background: #bcbabe
|
||||
}
|
||||
|
||||
.functional-color-third {
|
||||
background: #0c090a;
|
||||
}
|
||||
|
||||
.functional-color-fourth {
|
||||
background: #c1e1dc;
|
||||
}
|
||||
|
||||
.feedback-color-first {
|
||||
background: #fa6e59
|
||||
}
|
||||
|
||||
.feedback-color-first p {
|
||||
color: #FA4C39
|
||||
}
|
||||
|
||||
.feedback-color-second {
|
||||
background: #ffdb5c
|
||||
}
|
||||
|
||||
.feedback-color-third {
|
||||
background: #52958b
|
||||
}
|
||||
Reference in new issue
Block a user