Notebooks 2.0 is here.
Published
Edited
May 3, 2019
md`# OldInvisible Rectangles`
d3 = require("d3@5")
//// Food Industry = 38% (76)
// Info and Communications = 6% (12)
// - Clothing/Textiles = 16% (32)
// - Retail Trade = 11 % (22)
// Traveler Accommodations = 11 % (22)
// Leisure = 18% (36)
//Food 1 - 7 x 10
//Food 2 - 1 x 6
//Info/Comms 2 x 6
//Textiles 1 20 x 2
//Textiles 2 x 6
//Retail Trade 1 4 x 1
//Retail Trade 2 x 9
//Travelers 11 x 2
//Leisure 6 x 6
{
// Width and height of the SVG object
let w = 440;
let h = 305;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 650)
.attr("height", 500)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 70)
.attr("y", 50)
.attr("width", 100)
.attr("height", 140)
.attr("stroke","LimeGreen")
.attr("fill", "white");
var rectangle = svgContainer.append("rect")
.attr("x", 70)
.attr("y", 200)
.attr("width", 100)
.attr("height", 50)
//.attr("stroke","Tomato")
.attr("stroke","Magenta")
.attr("fill", "white");
var rectangle = svgContainer.append("rect")
.attr("x", 180)
.attr("y", 50)
.attr("width", 100)
.attr("height", 70)
//.attr("stroke","Coral")
.attr("stroke","LightSalmon")
.attr("fill", "white");
var rectangle = svgContainer.append("rect")
.attr("x", 180)
.attr("y", 130)
.attr("width", 100)
.attr("height", 120)
.attr("stroke","CornFlowerBlue")
.attr("fill", "white");
var rectangle = svgContainer.append("rect")
.attr("x", 290)
.attr("y", 50)
.attr("width", 100)
.attr("height", 30)
.attr("stroke","RebeccaPurple")
.attr("fill", "white");
var rectangle = svgContainer.append("rect")
.attr("x", 290)
.attr("y", 90)
.attr("width", 100)
.attr("height", 160)
.attr("stroke","Pink")
.attr("fill", "white");
return svgContainer.node();
}
//size rectangles according to the proportions of the industries owned by foreign born
//populate the rectangles with random points
// // add circles to svg
// svg.selectAll("circle")
// .data([aa,bb]).enter()
// .append("circle")
// .attr("cx", function (d) { console.log(projection(d)); return projection(d)[0]; })
// .attr("cy", function (d) { return projection(d)[1]; })
// .attr("r", "8px")
// .attr("fill", "red")
// });
// Your code here
function getRndInteger(max, min = 0) {
return Math.random() * (max - min) + min;
}
function generateRndPts(numPoints, xVals, yVals) {
let randPoints = []
for (var i=0; i < numPoints; i++) {
let xRand = getRndInteger(xVals.min, xVals.max)
let yRand = getRndInteger(yVals.min, yVals.max)
let currPoint = { x:xRand, y:yRand}
randPoints.push(currPoint)
}
return randPoints
}
//xVals and yVals are locations/bounds for plotting the point (from our data set actual values) and proportions of rectangles correspond
firstpoints = generateRndPts(500, xVals, yVals)
xVals = ({min:0, max:100}) //for each rectangle //this is the range of x dimension space that I am pulling my coordinates from
yVals = ({min:0, max:100})//for each rectangle //this is the range of y dimension space that I am pulling my coordinates from
{
let svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 200);
let data = [{x1: 20, x2: 60, y1: 30, y2: 50},
{x1: 50, x2: 80, y1: 100, y2: 150},
{x1: 200, x2: 400, y1: 10, y2: 100}];
let rects = svg.selectAll("foo")
.data(data)
.enter()
.append("rect")
.attr("x", d=> d.x1)
.attr("y", d=> d.y1)
.attr("width", d=> d.x2 - d.x1)
.attr("height", d=> d.y2 - d.y1)
.attr("fill", "teal");
}
//drawing circles
{
var circle = svg.selectAll("circle")
.data(firstpoints);
circle.enter().append("circle")
.attr("cy", 60)
.attr("cx", function(d, i) { return i * 100 + 30; })
.attr("r", function(d) { return Math.sqrt(d); });
circle.exit().remove();
}
xArray = [{min:0,max:40}, {min:40, max:100}, {min:100,max:120 }, {min:120,max:180}, {min:180,max:200},
{min:0,max:400},{min:40,max:90},{min:90,max:200},{min:100,max:200}]
//x values for rectangles
yArray = [{min:0,max:40}, {min:40, max:100}, {min:100,max:120 }, {min:120,max:180}, {min:180,max:200},
{min:0,max:400},{min:40,max:90},{min:90,max:200},{min:100,max:200}]
//y values for rectangles
XValsRect1 = ({min:0, max:40})
XValsRect1
rect1points = generateRndPts(100,
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
