Data graphics developer at Gapminder. Teacher at DIS Stockholm. Escaping flatland one chart at a time.
sqPath = 'M 0 0 L 20 0 L 20 20 L 0 20 L 0 0'
htl.html`<svg width=20 height=20><path d="${sqPath}" fill="black"</path></svg>`
triPath = "M 0 20 L 20 0 H 0 L 0 20"
htl.html`<svg width=20 height=20><path d="${triPath}" fill="black"</path></svg>`
heartPath = "M 8 20 C 23 4 11 -9 8 9 C 4 -14 -6 15 8 20"
htl.html`<svg width=20 height=20><path d="${heartPath}" fill="black"</path></svg>`
diamondPath = "M 10 0 L 16 10 L 10 20 L 4 10"
htl.html`<svg width=20 height=20><path d="${diamondPath}" fill="black"</path></svg>`
myPaths = [sqPath, triPath, heartPath, diamondPath]
d3 = require('d3')
_ = require('lodash')
jsonurl = "https://gist.githubusercontent.com/lilipriestaf/90670d8a7db9ab62d64dde965282342c/raw/357fbe67ad046cca45c42da86863d846fb965a07/Lili's%2520Years"
data = d3.json(jsonurl).then(data => _.values(data));
{
///// 1. CONSTANTS
const width = 500;
const height = 800;
const space = 25;
const svg = DOM.svg(width.height);
///// 2. CALCULATIONS
// Find distinct cities
const distinctCities = [...new Set(data.map(d=> d.place))];
console.log(distinctCities)
// Function to get city into an index
const findCityIndex = d3.scaleBand ()
.domain(distinctCities)
.range([0, distinctCities.length])
///// 3. TRANSFORMING DATA TO BE D3 READY
var myBuildData = _.map(data, d => { ///
var xPos = (d.month - 7 + 1) * space /// SHE WROTE START MONTH FOR &
var yPos = (d.Year - 2003) * space /// we want 2004 = 1
if(d.month < 7){ ///SHE WROTE START MONTH FOR 7
xPos = (d.month + 6) * space
yPos = (d.year - 2004) * space
}
var placeIndex = findCityIndex(d.place)
return
xPos,
yPos,
placeIndex
}
)
//// 4.DRAWING
var 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])')
return svg
}
{
///// 1. CONSTANTS
const width = 500;
const height = 800;
const space = 25;
const svg = d3.create("svg").attr("width",width).attr("height",800);
///// 2. CALCULATIONS
// Find distinct cities
const distinctCities = [...new Set(data.map(d=> d.place))];
console.log(distinctCities)
// Function to get city into an index
const findCityIndex = d3.scaleBand ()
.domain(distinctCities)
.range([0, distinctCities.length])
///// 3. TRANSFORMING DATA TO BE D3 READY
var myBuildData = _.map(data, d => { ///
var xPos = (d.month - 7 + 1) * space /// SHE WROTE START MONTH FOR &
var yPos = (d.year - 2003) * space /// we want 2004 = 1
if(d.month < 7){ ///SHE WROTE START MONTH FOR 7
xPos = (d.month + 6) * space
yPos = (d.year - 2004) * space
}
var placeIndex = findCityIndex(d.place)
return {
xPos,
yPos,
placeIndex
}
}
)
//// 4.DRAWING
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 + .4)}`)
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.
