Code Learner
Spend most days confused, reading open source docs until eyes bleed, Debugging efforts
Declare WTH! ...a lot!
Published
Edited
May 25, 2018
scatterPlot = {
return svg.node();
}
function getRandomDataset(start = 0, size = 200, xRange = 800, yRange = 800) { // set # data pts, max/min x/y ranges
const data = []; // initialise empty dataset
for (let i = 0; i < size; i++) {
let newNumber1 = Math.floor(Math.random() * xRange); // generate x-value
let newNumber2 = Math.floor(Math.random() * yRange); // generate y-value
data.push([newNumber1, newNumber2]); // add integer to database array
}
return data;
}
chartWidth = 650 - margin.left - margin.right
chartHeight = 400 - margin.top - margin.bottom
svg = d3.select(DOM.svg(chartWidth + margin.left + margin.right, chartHeight + margin.top + margin.bottom))
chartArea = svg.append("g").attr("transform","translate(" + margin.left + ", " + margin.top + ")")
xScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d[0]; })]) // input domain [start, xRange] from getRandomDataset
.range([0, chartWidth]) // output range of [chartArea origin x-coord, chartWidth]
yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d[1];})]) // input domain [start, max(yRange)] from getRandomDataset
.range([chartHeight, 0]) // output range of [chartHeight, chartArea origin y-coord]
xAxis = d3.axisBottom() // constructs bottom-oriented axis generator
.scale(xScale)
.ticks(5)
yAxis = d3.axisLeft() // constructs left-oriented axis generator
.scale(yScale)
.ticks(5)
chartArea.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + chartHeight + ")")
.call(xAxis) // passes transformed g selection to xAxis function
chartArea.append("g")
.attr("class", "y axis")
.attr("tranform", "translate(30, 0)")
.call(yAxis) // passes transformed g selection to yAxis function
chartArea.append("clipPath") // make a clip path
.attr("id", "chart-area") // assign an id
.append("rect") // within the clip path , append a new rect
.attr("x", 0) // sets x,y coords to the chartArea origin
.attr("y", 0)
.attr("width", chartWidth) // sets the width, height to the chartArea
.attr("height", chartHeight)
md` Create circles: `
allCircles = chartArea.append("g") // append a g element to end of chartArea
.attr("id", "circles") // give it an id
.attr("clip-path", "url(#chart-area)") // groups all circle elements within the g element clip path
.selectAll("circle") // re-select all circle elements
.data(data) // join data array with circle elements. Return update selection
.enter() // create placeholder nodes for each datum
.append("circle") // return selection of appended data
.attr("cx", function(d) { // set centre x, y coords to scaled x, y values
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", 2) // set radius to 2 pixels
.attr("fill", "black") // set circle colour
chartArea.append("text")
.text("Click 'HERE' To Add Some Colour")
.attr("x", 15)
.attr("y", -15)
.attr("font-family", "sans-serif")
.attr("fill", "blue")
.attr("font-size", "11px")
.style("cursor", "hand")
.on("click", function() {
allCircles.each(colorPlot); // set event-listener type: "click"
})
colorPlot = function(d, i) {
const colors = ["#3366cc",
"#dc3912",
"#ff9900",
"#109618",
"#990099",
"#0099c6",
"#dd4477",
"#66aa00",
"#b82e2e",
"#316395",
"#994499",
"#22aa99",
"#aaaa11",
"#6633cc",
"#e67300",
"#8b0707",
"#651067",
"#329262",
"#5574a6",
"#3b3eac"
];
const colorIndex = Math.round(Math.random() * 20);
const colorIndex2 = Math.round(Math.random() * 20);
d3.select(this)
.transition()
.delay(i * 25)
.duration(2000)
.ease(d3.easeElasticOut)
.style("fill", colors[colorIndex])
.style("stroke", colors[colorIndex2])
.attr("stroke-width", "2.0px")
.attr("r", 15);
}
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.
