Traffic Test / Rob Stave

Rob Stave

Workspace

Published

Edited

Jul 1, 2020

md`# Traffic Test

Look at some metrics and see how to display them

Data represents message counts for users in a pipeline of microservices.

Ideally, the same piece of data works its way down.

traffic = d3.json("https://gist.githubusercontent.com/robstave/953cd88cfc47af90066731308d36945f/raw/8b6213962a64907dc2c8066229b7f8e2a619365b/traffic.json")

trafficHourlySum= d3.json("https://gist.githubusercontent.com/robstave/3451b015cea9b8826b7f840a7ab90338/raw/eba39ef3bd731b7e4217d1dbf7b073753ab751ba/trafficHourSum7")

`Lets find the min/ max...note the unity operator +string`

[d3.min(traffic.data, d => +d.sum), d3.max(traffic.data, d => +d.sum) ]

d3.extent(traffic.data, d => d.customer)

d3.extent(traffic.data.filter(function(d) { return d.customer == 'MC000012' && d.service=='enrichment' }), (d,i) => i)

x = d3.scaleLinear()

.domain(d3.extent(

traffic.data

.filter(function(d) {return d.customer == 'MC000012' && d.service=='enrichment' }),

(d,i) => i))

.range([margin.left, width - margin.right])

y = d3.scaleLinear()

.domain([0, d3.max(traffic.data, d => +d.sum)])

.range([height - margin.bottom, margin.top])

line = d3.line()

.x((d,i) => x(i))

.y(d => y(d.sum))

xAxis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))

yAxis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y).ticks(height / 40))

.call(g => g.select(".domain").remove())

html`<svg viewBox="0 0 ${width} ${height}">

<path d="${line(traffic.data

.filter(function(d) { return d.customer == 'MC000012' && d.service=='enrichment' }))}" fill="none" stroke="steelblue" stroke-width="1.5" stroke-miterlimit="1"></path>

<path d="${line(traffic.data

.filter(function(d) { return d.customer == 'MC000012' && d.service=='correlation' }))}" fill="none" stroke="steelblue" stroke-width="1.5" stroke-miterlimit="1"></path>

<path d="${line(traffic.data

.filter(function(d) { return d.customer == 'MC000012' && d.service=='store' }))}" fill="none" stroke="steelblue" stroke-width="1.5" stroke-miterlimit="1"></path>

${d3.select(svg`<g>`).call(xAxis).node()}

${d3.select(svg`<g>`).call(yAxis).node()}

</svg>`

md`# hourly counts`

x2 = d3.scaleUtc()

.domain(d3.extent(

trafficHourlySum.data

.filter(function(d) {return d.service=='store' }),

(d,i) => i))

.range([margin.left, width - margin.right])

y2 = d3.scaleLinear()

.domain([0, d3.max(trafficHourlySum .data, d => +d.sum)])

.range([height - margin.bottom, margin.top])

line2 = d3.line()

.x((d,i) => x2(i))

.y(d => y2(d.sum))

x2Axis = g => g

.attr("transform", `translate(0,${height - margin.bottom})`)

.call(d3.axisBottom(x2).ticks(width / 80).tickSizeOuter(0))

y2Axis = g => g

.attr("transform", `translate(${margin.left},0)`)

.call(d3.axisLeft(y2).ticks(height / 40))

.call(g => g.select(".domain").remove())

html`<svg viewBox="0 0 ${width} ${height}">

<path d="${line2(trafficHourlySum.data

.filter(function(d) { return d.service=='enrichment' }))}" fill="none" stroke="steelblue" stroke-width="1.5" stroke-miterlimit="1"></path>

<path d="${line2(trafficHourlySum.data

.filter(function(d) { return d.service=='correlation' }))}" fill="none" stroke="steelblue" stroke-width="1.5" stroke-miterlimit="1"></path>

<path d="${line2(trafficHourlySum.data

.filter(function(d) { return d.service=='store' }))}" fill="none" stroke="steelblue" stroke-width="1.5" stroke-miterlimit="1"></path>

${d3.select(svg`<g>`).call(x2Axis).node()}

${d3.select(svg`<g>`).call(y2Axis).node()}

</svg>`

md`# Required`

d3 = require("d3@5")

margin = ({top: 20, right: 30, bottom: 30, left: 40})

height = 600

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