dataviz, R obsessed, learning D3 with #100daysofD3
Twitter: @W_R_Chase
Published
Edited
Jun 29, 2019
1 fork
1 star
chart = {
const svg = d3.select(DOM.svg(width, height));
const g = svg.append("g");
g.selectAll('circle')
.data(before.features)
.join("circle")
.attr("r", 10)
.attr("cx", d => timeScaleBefore(d.properties.day))
.attr("cy", d => height - margin.bottom - (d.properties.id_day * 20))
.style("fill", "black");
svg.append("g")
.call(xAxisBefore);
svg.append("g")
.append("line")
.attr("x1", width/2 + margin.right)
.attr("x2", width/2 + margin.right)
.attr("y1", 0)
.attr("y2", height - margin.bottom)
.style("stroke", "red")
.style("stroke-width", 5);
const g2 = svg.append("g").attr("transform", `translate(${width/2}, 0)`);
g2.selectAll('circle')
.data(triggered.features)
.join("circle")
.attr("r", 10)
.attr("cx", d => timeScaleTriggered(d.properties.day))
.attr("cy", d => height - margin.bottom - (d.properties.id_day * 20))
.style("fill", "black");
svg.append("g")
.call(xAxisTriggered);
return svg.node();
}
timeScaleBefore = d3.scaleTime()
.domain(d3.extent(before.features, d => d.properties.day))
.range([margin.left, width/2 - margin.right/2]);
timeScaleTriggered = d3.scaleTime()
.domain(d3.extent(triggered.features, d => d.properties.day))
.range([margin.left, width/2 - margin.right/2]);
xAxisBefore = g => g
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(timeScaleBefore)
.tickFormat(d3.timeFormat("%b %d"))
.tickSizeOuter(0));
xAxisTriggered = g => g
.attr("transform", `translate(${width/2}, ${height - margin.bottom})`)
.call(d3.axisBottom(timeScaleTriggered)
.tickFormat(d3.timeFormat("%b %d"))
.tickSizeOuter(0));
timeParse = d3.timeParse("%Y-%m-%d %H:%M:%S");
margin = ({top:100, right:20, bottom: 70, left: 50})
height = 800
width = 800
function clean(data) {
for (const d of data.features) {
const date = timeParse(d.properties.time);
d.properties.date = date;
d.properties.day = d3.timeDay(date);
}
return data;
}
before = clean(await d3.json("https://gist.githubusercontent.com/will-r-chase/375d6366e6c32caf3862d1f6154f87a0/raw/f632753fc5940ac57e55276f38bca2262cb87907/landers_before2.geojson"))
triggered = clean(await d3.json("https://gist.githubusercontent.com/will-r-chase/b510d63e4cfabe7c52a053a50a9faeac/raw/a463bddcac56aa827e15a96d372e19854c99373d/landers_triggered2.geojson"))
d3 = require("d3")
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.
