A ♥ for data visualization + interaction
// generates a rows x columns matrix, using values from a Perlin noise field.
matrix = d3.range(0, rows).map(i => {
return d3.range(0, columns).map(j => noise(i / resolution, j / resolution));
});
cellTypesMatrix = d3.range(0, rows - 1).map(i => {
return d3.range(0, columns - 1).map(j => { return {row: i, col: j, type: getCellType(i, j) }});
});
threshold = 0.15;
// returns 1 if the value is above the threshold, 0 otherwise.
function getIsoValue(value) {
// add your own code here ...
return 0;
}
/**
* Returns the type of a cell in the matrix (in decimal), based on what values sit on its corners.
* @param{i} row index
* @param{j} column index
*/
function getCellType(row, col) {
// add your own code here ...
return 0;
}
/**
* Renders a segment of the marching squares, from (x1, y1) to (x2, y2).
* @param{types} list of allowed type numbers (in decimal)
* @param{x1} starting x position
* @param{x2} starting y position
* @param{y1} ending x position
* @param{y2} ending y position
*/
function renderLineSegment(types, x1, x2, y1, y2) {
if (!(types instanceof Array)) {
throw new TypeError('Parameter "types" of must be an array');
}
const segments = canvas.selectAll("g.segment");
segments.filter(d => types.indexOf(d.type) > -1).append("line")
.attr("x1", x1 * spacing)
.attr("x2", x2 * spacing)
.attr("y1", y1 * spacing)
.attr("y2", y2 * spacing);
}
/**
* Renders the segments from the Marching Squares algorithm for each 2x2 neighborhood in the data, based on the
* type of each cell.
*/
function renderSegments() {
// replace the commented-out code below with your own solution
// diagonale top left
// renderLineSegment([...], x1, y1, x2, y2);
// diagonale top right
// renderLineSegment([...], x1, y1, x2, y2);
// diagonale bottom left
// renderLineSegment([...], x1, y1, x2, y2);
// diagonale bottom right
// renderLineSegment([...], x1, y1, x2, y2);
// vertical bar
// renderLineSegment([...], x1, y1, x2, y2);
// horizontal bar
// renderLineSegment([...], x1, y1, x2, y2);
}
// color of the line segments
segmentColor = "red";
function getIsolinePaths() {
// add your own code here ...
return [];
}
// specifies the gradient in the Perlin field. The lower, the steeper the local gradient.
resolution = 32
// number of levels that the Perlin noise can reach. The smaller, the "rougher" the appearance.
perlinOctaves = 16;
// number of columns of the matrix
columns = 100;
// number of rows of the matrix
rows = 50;
// if true, the type of each 2x2 neighborhood is rendered (mostly for debugging).
showGrid = false
// if true, renders the dots that represent the Perlin noise at a cell in the matrix.
showDots = true
// if true, renders the marching square lines.
showLines = true
// vertical size of the plot
height = 500;
// size of each dot in px
dotRadius = 3;
// size of the line segments
segmentWidth = 3;
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.