Skip to content

Instantly share code, notes, and snippets.

View jgoodie's full-sized avatar

John Goodman jgoodie

4 followers · 16 following
  • San Diego
View GitHub Profile
@jgoodie
jgoodie / iris.csv
Created August 8, 2022 03:22
The famous Iris data set: https://archive.ics.uci.edu/ml/datasets/iris
sepal_length sepal_width petal_length petal_width species
5.1 3.5 1.4 0.2 Iris-setosa
4.9 3.0 1.4 0.2 Iris-setosa
4.7 3.2 1.3 0.2 Iris-setosa
4.6 3.1 1.5 0.2 Iris-setosa
5.0 3.6 1.4 0.2 Iris-setosa
5.4 3.9 1.7 0.4 Iris-setosa
4.6 3.4 1.4 0.3 Iris-setosa
5.0 3.4 1.5 0.2 Iris-setosa
4.4 2.9 1.4 0.2 Iris-setosa
@jgoodie
jgoodie / index.html
Created August 8, 2022 03:32
Basic index.html file for D3 projects
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Iris Scatter Plots</title>
<!-- Bootstrap -->
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
@jgoodie
jgoodie / irisscatterbasic.js
Created August 8, 2022 05:01
A basic scatter plot using the Iris data set
// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 40, left: 70},
width = 800 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
@jgoodie
jgoodie / marginsAndDimensions.js
Created August 8, 2022 05:15
Define the margins and dimensions of the plot
// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 40, left: 70},
width = 800 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
@jgoodie
jgoodie / appendSvgBody.js
Created August 8, 2022 05:20
Append the svg object to the body of the page
// append the svg object to the body of the page
const svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
@jgoodie
jgoodie / readCsv.js
Created August 8, 2022 06:09
Read a CSV and output to console
d3.csv("data/iris.csv").then( function(data) {
console.log(data)
})
@jgoodie
jgoodie / readCsv2.js
Created August 8, 2022 19:12
simple js file to read iris data and format the numbers
// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 40, left: 70},
width = 800 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
@jgoodie
jgoodie / cleanIris.js
Created August 8, 2022 19:15
forEach Statement to fix/clean the data
d3.csv("data/iris.csv").then( function(data) {
// clean/fix the data
data.forEach(function(d) {
d.sepal_width = +Number(d.sepal_width);
d.sepal_length = +Number(d.sepal_length);
d.petal_width = +Number(d.petal_width);
d.petal_length = +Number(d.petal_length);
});
console.log(data)
})
@jgoodie
jgoodie / scales.js
Created August 8, 2022 19:37
how to declare a scale object
// Add X axis
const x = d3.scaleLinear()
.domain([1.5, 5])
.range([ 0, width ]);
// Add Y axis
const y = d3.scaleLinear()
.domain([3, 8.5])
.range([ height, 0]);
@jgoodie
jgoodie / AddAxes.js
Created August 8, 2022 20:16
Add an X and Y axis to the plot
// Add X axis
const x = d3.scaleLinear()
.domain([1.5, 5])
.range([ 0, width ]);
svg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x));
// Add Y axis
const y = d3.scaleLinear()