Zach's Sol Lewitt Challenge / Zach Pino

Zach Pino

Workspace

Public

Edited

Sep 3, 2024

Fork of Zach's Sol Lewitt Challenge

F24 Communication Systems: Data Viz

Week 2: Data-Driven Imagery

Zach's Sol Lewitt Challenge

Week 3 : Intro to Javascript for Visualization Zach's Hello World Map Challenge Week 4: Data Capture and Interactivity Zach's 2x2 Example Week 5 : Data Access and APIs Week 6 : D3 Scales, Statistics, and Charts Language Scatter Plot Coding Challenge: 2D Heatmap Birth Heatmap Data Joining Events, Animation, and Interactivity Working with Geo Data

Also listed in…

ID Fall 2022 Communication Systems Workshop

'<path d="M 400,0 Q250,100 400,200 Q550,300 400,400" fill="none" stroke="blue" stroke-width="20" opacity="0.8" />'

`<path d="M 400,0 L250,100 400,200 L550,300 400,400" fill="none" stroke="magenta" stroke-width="2" opacity="1" stroke-dasharray="4 8"/>`

</svg>

</svg>

{

//svg variables

const height = 500;

//create SVG artboard

const svg = d3.create("svg").attr("width", width).attr("height", height);

//visualization variables

const spacing = 20;

const strokeMinimum = 1;

const strokeVariation = 100;

const curvinessMinimum = 10;

const curvinessVariation = 300;

//list of random colors to choose from

const colors = [

"red",

"blue",

"gold",

"black",

"beige",

"white"

];

//loop to make each path

for (let i = 0; i < width; i = i + spacing) {

//create random settings for each path

const curviness = Math.random() * curvinessVariation + curvinessMinimum;

const strokeThickness = Math.random() * strokeVariation + strokeMinimum;

//get random color from array

//Math.random() gives random number between 0 and 1

//(Math.random() * colors.length) will give a random number between 0 and the number of items in an array

//Math.floor() rounds decimal numbers down https://www.w3schools.com/Jsref/jsref_floor.asp

//We round down with Math.floor(), because arrays start at index 0

const randomIndex = Math.floor(Math.random() * colors.length);

//get random color from color array

const randomColorFromArray = colors[randomIndex];

//build s-shaped path

const curvyPath =

"M " +

i +

",0 Q" +

(i - curviness) +

"," +

height * 0.25 +

" " +

i +

"," +

height * 0.5 +

"Q " +

(i + curviness) +

"," +

height * 0.75 +

" " +

i +

"," +

height;

//draw path

svg

.append("path")

.attr("d", curvyPath)

.attr("fill", "none")

.attr("stroke", randomColorFromArray)

.attr("stroke-width", strokeThickness)

.attr("opacity", 0.8)

.attr("stroke-linecap", "round")

//https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap

.attr("stroke-miterlimit", 100);

//https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit

}

//show visualization in Observable

return svg.node();

}

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.

Learn more