Heather's d3.js tutorial / hldawe

html`<svg>

</svg>

`

html`

</svg>

`

html`

</svg>

`

html`<svg width=200 height=200>

</g>

</svg>

`

d3 = require("d3@5", "d3-geo@^1.12")

{

const width = 500 //width of svg

const height = 250 //height of svg

const svg = d3.select(DOM.svg(width, height))

const ArrayofData = Array(25).fill().map(() => Math.round(Math.random() * 250))

svg.selectAll('rect')

.data(ArrayofData) //connect ArrayofData with DOM <rect/> elements

.enter() // returns the portion of the data which is new ("entering") and not yet bound to DOM elements

.append('rect') // for each data value, append a <rect/> to selected svg

.attr('x', (d, itemsIndexInArray) => itemsIndexInArray * 20)// For each, set x attr

.attr('y', d => height - d) // for each, set y attr

.attr('width', 15) // for each, set width attribute

.attr('height', arrayItemTypicallyNamed_d => arrayItemTypicallyNamed_d)

.attr('fill', 'red')

// Once we append the visualization elments to it, we return the DOM element for Observable to display above.

return svg.node()

}

{

// function to zip arrays

const zip = (arr1, arr2) => arr1.map((k, i) => [k, arr2[i]])

// generate two arrays of random data

const ArrayofX = Array(25).fill().map(() => Math.round(Math.random() * 500))

const ArrayofY = Array(25).fill().map(() => Math.round(Math.random() * 250))

const dataset = zip(ArrayofX,ArrayofY)

const width = 500

const height = 250

const svg = d3.select(DOM.svg(width, height))

svg.selectAll("circle")

.data(dataset)

.enter()

.append("circle")

.attr("cx", function(d) {

return d[0];

})

.attr("cy", function(d) {

return d[1];

})

.attr("r", 3)

.attr('fill', 'purple')

return svg.node()

}

{

// define an svg with given width and height

const width = 500

const height = 30

const svg = d3.select(DOM.svg(width, height))

// we want a margin to give us whitespace around the axis

const margin = { left: 30, top: 10, right: 10, bottom: 10 }

// Use d3 scaleLinear to split the width (- margins) = 460 and scale the 0-50 axis length we'd like to within

// these 460 width limits

const xScale = d3.scaleLinear()

.domain([0, 500])

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

// append it to the svg

svg.append('g').call(d3.axisBottom(xScale))

return svg.node()

}

{

const height = 250

const svg = d3.select(DOM.svg(60, height)) // Defining svg

const margin = { left: 30, top: 10, right: 10, bottom: 10 }

const yScale = d3.scaleLinear()

.domain([0, 250])

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

svg.append('g').call(d3.axisLeft(yScale))// Append it to svg

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

return svg.node()

}

{

// function to zip arrays

const zip = (arr1, arr2) => arr1.map((k, i) => [k, arr2[i]])

// generate two arrays of random data

const ArrayofX = Array(25).fill().map(() => Math.round(Math.random() * 500))

const ArrayofY = Array(25).fill().map(() => Math.round(Math.random() * 300))

const dataset = zip(ArrayofX,ArrayofY)

const width = 500

const height = 300

const padding = 20

const svg = d3.select(DOM.svg(width, height))

const margin = { left: 40, top: 20, right: 10, bottom: 40 }

const xScale = d3.scaleLinear()

.domain(d3.extent(ArrayofX))

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

svg.append('g')

.call(d3.axisBottom(xScale))

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

const yScale = d3.scaleLinear()

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

.domain(d3.extent(ArrayofY))

svg.append('g')

.call(d3.axisLeft(yScale))

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

svg.selectAll('circle')

.data(dataset)

.enter()

.append('circle')

.attr("cx", function(d) {

return xScale(d[0]);

})

.attr("cy", function(d) {

return yScale(d[1]);

})

.attr('r', 3)

.attr('fill', 'purple')

return svg.node()

}

{

// function to zip arrays

const zip = (arr1, arr2) => arr1.map((k, i) => [k, arr2[i]])

// generate two arrays of random data

const ArrayofX = Array(25).fill().map(() => Math.round(Math.random() * 500))

const ArrayofY = Array(25).fill().map(() => Math.round(Math.random() * 300))

const dataset = zip(ArrayofX,ArrayofY)

const width = 500

const height = 300

const padding = 20

const svg = d3.select(DOM.svg(width, height))

const margin = { left: 40, top: 20, right: 10, bottom: 40 }

const xScale = d3.scaleLinear()

.domain(d3.extent(ArrayofX))

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

svg.append('g')

.call(d3.axisBottom(xScale))

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

const yScale = d3.scaleLinear()

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

.domain(d3.extent(ArrayofY))

svg.append('g')

.call(d3.axisLeft(yScale))

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

svg.selectAll('circle')

.data(dataset)

.enter()

.append('circle')

.attr("cx", function(d) {

return xScale(d[0]);

})

.attr("cy", function(d) {

return yScale(d[1]);

})

.attr("r", function(d) {

return (Math.cbrt(d[1]));

})

.attr('fill', 'purple')

svg.append("text")

.attr("text-anchor", "middle")

.attr("transform", "translate("+ (width/2) +","+(height-padding/2)+")")

.attr('font-size', 12)

.attr('fill', 'steelblue')

.text("Random X Value")

svg.append("text")

.attr("text-anchor", "middle")

.attr("transform", "translate("+ (padding/2) +","+(height/2)+")rotate(-90)")

.attr('font-size', 12)

.attr('fill', 'steelblue')

.text("Random Y Value")

svg.append("text")

.attr("text-anchor", "middle")

.attr("transform", "translate("+ (width/2) +","+(padding/2)+")")

.attr('font-size', 14)

.text("Random Scatter Plot")

return svg.node()

}

geo_json = FileAttachment("ccgs_april_2016@1.json").json()

ccg_data = d3.csvParse(await FileAttachment("baby_birth_weight.csv").text(), d3.autoType)

{

const w = 600

const h = 600

const svg = d3.select(DOM.svg(w, h))

// set up the geometry

const projection = d3.geoConicConformal()

.center([1.9, 52.4])

.clipAngle(180)

.scale(4500)

.translate([w /1.25, h /1.9])

.precision(0.1);

const path = d3.geoPath().projection(projection);

var colour = d3.scaleThreshold()

.domain([0,1, 2, 3, 4])

.range(['#f2f0f7','#cbc9e2','#9e9ac8','#756bb1','#54278f']);

var matchset = [];

var reportset = [];

var opacityset = [];

var numDataPoints = ccg_data.length;

var mean = 0.029;

var opacity_value = 0;

for (var i = 0; i < numDataPoints; i++) {

if (ccg_data[i].Denominator==0) {

var indicator = 0;

}

else {

var indicator = ccg_data[i].Numerator/ccg_data[i].Denominator;

}

console.log(indicator)

if (indicator > 0.05) {

opacity_value = 4;

}

else if (indicator > 0.03) {

opacity_value = 3;

}

else if (indicator > 0.02) {

opacity_value = 2;

}

else if (indicator > 0.01) {

opacity_value = 1;

}

else {

opacity_value = 0;

}

var match = ccg_data[i].ONS_code;

matchset.push(ccg_data[i].ONS_code);

reportset.push(ccg_data[i].ONS_code);

opacityset.push(opacity_value);

}

i = 0;

for (var i = 0; i < (geo_json.features).length; i++) {

var ons = geo_json.features[i].properties.ccg16cd;

var index = matchset.indexOf(ons);

svg.append("path")

.datum(geo_json.features[i].geometry)

.attr("class", "border")

.attr("d", path)

.style("fill", function(d) { return colour(opacityset[index]);})

.attr("class", "border count-" + opacityset[index])

}

return svg.node();

}

Purpose-built for displays of data