xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Trying D3.js</title> <script src="https://d3js.org/d3.v4.min.js"></script><!-- Tutorials: https://alignedleft.com/tutorials/d3 --> <style> div.barChart { display: inline-block; width: 20px; height: 75px; background-color: powderblue; margin-right: 10px; }; .axis path, .axis line { fill: none; stroke: powderblue; shape-rendering: crispEdges; } .axis text { font-family: monospace; font-size: 1rem; } </style> </head> <body> <script>////////////////////////////////////////////////////////// // # Exercise 3: Scaling the Scatterplot, and Adding axes var svgW3 = 600; var svgH3 = 400; var dataset3 = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [1000, 150] ]; var dynamicDataset = []; var numDataPoints = 50; var xRange = Math.random() * 1000; var yRange = Math.random() * 1000; for (var i = 0; i < numDataPoints; i++) { var newNumber1 = Math.round(Math.random() * xRange); var newNumber2 = Math.round(Math.random() * yRange); dynamicDataset.push([newNumber1, newNumber2]); } // 1. create scales function var padding = 30; // *** In D3 v4 it is no longer named d3.scale.linear(). Use d3.scaleLinear() instead. var xScale = d3.scaleLinear() .domain([0, d3.max(dynamicDataset, function(d){ return d[0]; })]) .range([padding, svgW3 - padding * 3]); var yScale = d3.scaleLinear() .domain([0, d3.max(dynamicDataset, function(d){ return d[1]; })]) .range([svgH3 - padding, padding]); var rScale = d3.scaleLinear() .domain([0, d3.max(dynamicDataset, function(d){ return d[1]; })]) .range([2, 5]) var svg3 = d3.select("body") .append("svg") .attr("width", svgW3) .attr("height", svgH3); svg3.selectAll("circle") .data(dynamicDataset) .enter() .append("circle") // 2. after setting up the domain and range, let's fix this: .attr("cx", function(d){ return xScale(d[0]); }) .attr("cy", function(d){ return yScale(d[1]); }) .attr("r", function(d){ return rScale(d[1]); }); //labeling! svg3.selectAll("text") .data(dynamicDataset) .enter() .append("text") .text(function(d){ return d[0] + "," + d[1]; }) // 3. then fix the position (x & y) .attr("x", function(d){ return xScale(d[0]); }) .attr("y", function(d){ return yScale(d[1]); }) .attr("font-family", "monospace") .attr("font-size", "1rem") .attr("fill", "lightsalmon"); //** Adding Axes // X Axis var xAxis = d3.axisBottom() .scale(xScale) .ticks(6); //set rough # of ticks svg3.append("g") .attr("class", "axis") //assign "axis" class .attr("transform", "translate(0, "+ (svgH3 - padding) +")") .call(xAxis); //Y Axis var yAxis = d3.axisLeft() .scale(yScale) .ticks(8); svg3.append("g") .attr("class", "axis") .attr("transform", "translate("+ padding +", 0)") .call(yAxis); //** One more thing: Formatting Tick Labels var formatAsPercentage = d3.format(".1%"); xAxis.tickFormat(formatAsPercentage); ////////////////////////////////////////////////////////// // # Exercise 2: Making a scatterplot //*Each of those “point” elements will be another array, with just two values: one for the x value, and one for y. //*With the row [5, 20], for example, we’ll use 5 as the x value, and 20 for the y.// var dataset2 = [// [5, 20], // [480, 90],// [250, 50],// [100, 33],// [330, 95],// [410, 12],// [475, 44],// [25, 67],// [85, 21],// [220, 88]// ]; // var svgW2 = 500;// var svgH2 = 100; // var svg2 = d3.select("body")// .append("svg")// .attr("width", svgW2)// .attr("height", svgH2); // svg2.selectAll("circle")// .data(dataset2)// .enter()// .append("circle")// .attr("cx", function(d){// return d[0]; //the x in [x, y]// })// .attr("cy", function(d){// return d[1]; //the y in [x, y]// })// .attr("r", function(d){// return Math.sqrt(svgH2 - d[1]);// }); // //*labeling!// svg2.selectAll("text")// .data(dataset2)// .enter()// .append("text")// .text(function(d){// return d[0] + "," + d[1];// })// .attr("x", function(d){// return d[0];// })// .attr("y", function(d){// return d[1];// }) // .attr("font-family", "monospace")// .attr("font-size", "1rem")// .attr("fill", "coral"); ////////////////////////////////////////////////////////// // # Exercise 1: Types of Data + Making a bar chart // var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13,// 11, 12, 15, 20, 18, 17, 16, 18, 23, 25]; // d3.select("body").selectAll("div")// .data(dataset)// .enter()// .append("div")// .attr("class", "barChart")// .style("height", function(d) {// var barHeight = d * 5;// return barHeight + "px";// }); // //*create SVG element!// var svgW = 500;// var svgH = 200;// var barPadding = 1; // var svg = d3.select("body")// .append("svg")// .attr("width", svgW)// .attr("height", svgH); // //*Weird, yes, but stay with me. With D3, you always have to first select whatever it is you’re about to act on, even if that selection is momentarily empty.// //*create bars!// svg.selectAll("rect")// .data(dataset)// .enter()// .append("rect")// .attr("x", function(barHeight, barOrder){ //usually people write it as (d, i)// // return barOrder * 21; //Bar width of 20 plus 1 for padding// return barOrder * (svgW / dataset.length);// })// .attr("y", function(barHeight){// return svgH - (barHeight * 4);// })// .attr("width", svgW / dataset.length - barPadding)// .attr("height", function(barHeight){// return barHeight * 4;// })// .attr("fill", function(barColor){// return "rgb(255, 200, " + (barColor * 10) +")";// }); // //*create labels!// svg.selectAll("text")// .data(dataset)// .enter()// .append("text")// .text(function(d){// return d;// })// .attr("x", function(d, i){// return i * (svgW / dataset.length) + (svgW / dataset.length - barPadding) / 2;// })// .attr("y", function (d){// return svgH - (d * 4) + 14;// })// .attr("font-family", "monospace")// .attr("font-size", "1rem")// .attr("fill", "cornsilk")// //*centering the text in the label, then changing x and y// .attr("text-anchor", "middle"); ////////////////////////////////////////////////////////// // # An SVG Primer + Drawing SVGs// var w = 500;// var h = 50; // var svvg = d3.select("body")// .append("svg")// .attr("width", w)// .attr("height", h); // var dataset = [5, 10, 15, 20, 25]; // var circles = svvg.selectAll("circle")// .data(dataset)// .enter()// .append("circle"); // circles.attr("cx", function(d, i){// return (i * 50) + 25;// })// .attr("cy", h/2)// .attr("r", function(d){// return d;// })// .attr("fill", "powderblue")// .attr("stroke", "peachpuff")// .attr("stroke-width", function(d) {// return d * 0.5;// }); //////////////////////////////////////////////////////////// // # The Power of data()// // for example, random data:// var dataset = [];// for (var i = 0; i < 25; i++) {// var newNumber = Math.round(Math.random() * 30);// dataset.push(newNumber);// }; // d3.select("body").selectAll("div")// .data(dataset)// .enter()// .append("div")// .attr("class", "barChart")// .style("height", function(d){// var d2 = d * 5;// return d2 + "px";// }); //////////////////////////////////////////////////////////// ### Checking Point:// 1. Preparing the data// 2. d3 and select and selectAll// 3. enter() — magic!// 4. append() --> create the element you want// 5. attr(), and / or style() it. //////////////////////////////////////////////////////////// // # Drawing divs// var AMADataset = [45, 10, 15, 20, 25, 34, 2, 44, 32];// // *Remember: yes, "div" doesn't exist (yet). // // *Because we have enter(), a truly magical method.// d3.select("body").selectAll("div")// .data(AMADataset)// .enter()// .append("div")// .attr("class", "barChart")// .style("height", function(LetsGetANewHeight){// var andGetHigher = LetsGetANewHeight * 5;// return andGetHigher + "px";// }); //////////////////////////////////////////////////////////// // # Using your data// var dataset = [5, 10, 15, 20, 25]; // d3.select("body").selectAll("p")// .data(dataset)// .enter()// .append("p")// // *anonymous function// .text(function(showMeTheData) {// return "Meowy, " + showMeTheData;// }) // // *The reason for this syntax is that .text(), attr(), and many other D3 methods take a function as an argument. // // and it's not only text()...// // you can change the color like this:// // .style("color", "salmon");// // or this:// .style("color", function(showMeTheData){// if (showMeTheData > 15) {// return "salmon";// } else {// return "gold";// }// }); //////////////////////////////////////////////////////////// // # Binding Data// var dataset = [5, 10, 15, 20, 25]; // d3.select("body").selectAll("p")// .data(dataset)// .enter()// .append("p")// .text("I am a new paragraph!:3"); ////////////////////////////////////////////////////////// // // # Try it out // d3.select("body")// .append("p")// .text("I am so new!")// .style("color", "salmon"); </script> </body></html> https://d3js.org/d3.v4.min.js