新的d3js课程

forrany · Mar 19, 2019 · 33d8391 · 33d8391
1 parent 8766354
commit 33d8391
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 0 deletions.
diff --git a/D3js可视化/2.Making a Bar Chat/data.csv b/D3js可视化/2.Making a Bar Chat/data.csv
@@ -0,0 +1,11 @@
+country,population
+China,1415046
+India,1354052
+United States,326767
+Indonesia,266795
+Brazil,210868
+Pakistan,200814
+Nigeria,195875
+Bangladesh,166368
+Russia,143965
+Mexico,130759
diff --git a/D3js可视化/2.Making a Bar Chat/index.html b/D3js可视化/2.Making a Bar Chat/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Making a Bar Chat</title>
+</head>
+<body>
+    <svg width="960" width="500"></svg>
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/D3js可视化/2.Making a Bar Chat/index.js b/D3js可视化/2.Making a Bar Chat/index.js
@@ -0,0 +1,3 @@
+const data = d3.csv('./data.csv').then(data => {
+    console.log(data)
+})
diff --git a/d3Practice/lesson1.html b/d3Practice/lesson1.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+    <p>Hello World 1 </p>
+    <p>Hello World 2 </p>
+    <p>Apple</p>
+    <p>Pear</p>
+    <p>Banana</p>
+<script src="https://d3js.org/d3.v5.min.js"></script>
+<script>
+    array = ['I like dog','I like cat','I like elephant']
+/*     d3.select('body')
+        .selectAll('p')
+        .text('高闻灿')
+        .style('color','red')
+        .style('font-size','72px') */
+
+/*         var p = d3.select('body')
+            .selectAll('p');
+        p.data(array).text(function (d, i) {
+                return d;
+            }) */
+
+/*             var width = 300;
+            var height = 300;
+            var dataset = [250, 210, 170, 130, 90];  //数据（表示矩形的宽度）
+            var rectHeight = 25;
+
+            var svg = d3.select('body')
+                        .append('svg')
+                        .attr('width',width)
+                        .attr('height',height);
+            svg.selectAll('rect')
+                .data(dataset)
+                .enter()
+                .append('rect')
+                .attr('x',20)
+                .attr('y',function(d,i) {
+                    return i * rectHeight;
+                })
+                .attr('width',function(d,i) {
+                    return d;
+                })
+                .attr('height',rectHeight-5)
+                .attr('fill','steelblue'); */
+        /********* 比例尺与坐标轴**********/
+         var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];
+        var height = 300;
+        var width = 300;
+        var rectHeight = 25;
+        var linear = d3.scaleLinear()
+                        .domain([0,d3.max(dataset)])
+                        .range([0,250]);
+        // 这里注意先行比例尺的表示方法，与课件不太相同，新版使用scaleLinear直接定义，domain和range的输入是两个数组               
+        var svg = d3.select('body')
+                    .append('svg')
+                    .attr('height',height)
+                    .attr('width',width);
+        svg.selectAll('rect')
+            .data(dataset)
+            .enter()
+            .append('rect')
+            .attr('x',20)
+            .attr('y',function(d,i) {
+                return i * rectHeight;
+            })
+            .attr('height',rectHeight - 5)
+            .attr('width',function(d,i) {
+                return linear(d);
+            })
+            .attr('fill','steelblue')
+        var axis = d3.axisBottom(linear).ticks(7);
+        svg.append('g')
+        .attr('transform', 'translate(0,120)')
+        .call(axis) 
+
+
+        /********* 完整的柱状图 **********/
+/*         var svg = d3.select('body')
+                    .append('svg')
+                    .attr('width',300)
+                    .attr('height',300);
+        var padding = {
+            left:30,
+            right:30,
+            top:20,
+            bottom:20
+        }
+
+        //定义一个数组
+        var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
+        var xScale = d3.scaleOrdinal()
+                        .domain(d3.range(dataset.length)) */
+
+</script>
+</body>
+</html>