Unlisted
Edited
Mar 1, 2024
1 star
Erin's Years
sqPath = 'M 0 0 L 20 0 L 20 20 L 0 20 L 0 0'
brTriPath = "M 20 0 L 20 20 L 0 20"
uTriPath = "M 0 0 L 20 0 L 10 20"
triPath = 'M 10 0 L 20 20 L 0 20'
tCircPath = "M 20 15 A 1 1 0 0 0 0 15"
blTriPath = "M 0 0 L 20 20 L 0 20"
rCircPath = "M 15 0 A 1 1 0 0 0 15 20"
diamPath = "M 10 0 L 20 10 L 10 20 L 0 10"
rTriPath = "M 0 0 L 20 10 L 0 20"
lCircPath = "M 5 20 A 1 1 0 0 0 5 0"
lTriPath = "M 0 10 L 20 0 L 20 20"
circPath = "M 0 10 A 1 1 0 0 0 20 10 C 20 10 20 10 20 10 A 1 1 0 0 0 0 10"
myPaths = [lTriPath, lCircPath, circPath, blTriPath, brTriPath, uTriPath, diamPath, triPath, tCircPath, sqPath, rCircPath, rTriPath]
d3 = require('d3')
_ = require('lodash')
jsonURL = "https://gist.githubusercontent.com/ewilzon/7e655fa3138fce7194786381a53adb99/raw/feac012cc0767eccdbb1fce23fcb9cf9dde2c9ea/Erins%2520Years"
data = d3.json(jsonURL).then(data => _.values(data));
{
/////// 1. CONSTANTS
const width=500;
const height=800;
const space= 25;
const startMonth = 5;
const svg = DOM.svg(width,height);
//////// 2. CALCULATIONS
// Find distinct cities in our dataset
const distinctCities = [...new Set(data.map(d=> d.place))]
// console.log(distinctCities)
// Function to get city into an index
var findCityIndex = d3.scaleBand()
.domain(distinctCities)
.range([0,distinctCities.length])
//////// 3. TRANSFORM DATA TO BE D3 FRIENDLY
var myBuildData = _.map(data, d => {
var xPos = ( d.month - startMonth + 1) * space // we want 5 = 1
var yPos = (d.year - 1993) * space // we want 1994 = 1
if(d.month < startMonth){
xPos = (d.month + 12 - startMonth + 1) * space
yPos = (d.year - 1994) * space
}
var placeIndex = findCityIndex(d.place)
return {
xPos,
yPos,
placeIndex }
})
console.log(myBuildData)
//////// 4. DRAWING
const myDrawing = d3.select(svg)
.selectAll('g')
.data(myBuildData)
.enter()
.append('path')
.attr("d", d => `${myPaths[d.placeIndex]}`)
.attr("transform", d => `translate(${d.xPos},${d.yPos})`)
.attr("fill", d => `${d3.interpolateYlOrBr(d.placeIndex/9 + .2)}`)
return svg
}
{
/////// 1. CONSTANTS
const width=500;
const height=300;
const svg = DOM.svg(width,height);
//////// 2. CALCULATIONS
// Find distinct places in our file
const distinctCities = [...new Set(data.map(d=> d.place))]
console.log(distinctCities) // returns array of 9 cities we have in the file
// Creating a function that takes the city and returns an index
var findCityIndex = d3.scaleBand()
.domain(distinctCities)
.range([0,distinctCities.length])
//////// 2b. ASSEMBLE DATA
var keyData = _.map(distinctCities, (d,i) => {
var xPos = 5
var yPos = i*25
const placeIndex = findCityIndex(d)
return{
xPos,
yPos,
placeIndex
}
})
// console.log(myBuildData)
//////// 3. DRAW
const myObjects = d3.select(svg)
.selectAll('g')
.data(keyData)
.enter()
.append('path')
.attr('d', d => `${myPaths[d.placeIndex]}`)
.attr("transform", d => `translate(${d.xPos},${d.yPos})`)
.attr("fill", d => `${d3.interpolateYlOrBr(d.placeIndex/9 + .2)}`)
return svg
}
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.
