Public
Edited
Jan 13
4 stars
//To render HTML in Observable, type html with the code enclosed in backticks
//Preceeding the curly brackets with a $ allows access to the circleData binding from the previous cell
html`<svg height='120' width='120'><circle ${circleData}></svg>`
getData = {
const dataUrl = 'https://raw.githubusercontent.com/nytimes/covid-19-data/master/live/us-counties.csv';
const dataFetch = d3.csv(dataUrl, d3.autoType);
return dataFetch;
}
getData[1280]
michiganData = {
let michArray = [], x;
for (x = 0; x < getData.length; x++){
getData[x].state == 'Michigan' ? michArray.push(getData[x]) : '';
};
return michArray;
}
// using the d parameter convention from d3, though it could be anything i.e. sandwich or penguin...
michigan = getData.filter(d => d.state == 'Michigan');
data = {
let allRegData = [];
//define functions, get current cases for each region
const getRegionCases = (countyNames,regLabel) => {
let regCases = {'region':regLabel,'type':'cases','label':regLabel,'val':0,'color':'orange'};
for (const county of michigan) {
const matchName = (item, index) => regCases.val=item==county.county?(regCases.val+county.cases): regCases.val;
countyNames.forEach(matchName);
};
return (regCases);
}
//get current dths for each regions
const getRegionDths = (countyNames,regLabel) => {
let regDths = {'region':regLabel,'type':'deaths','label':'','val':0,'color':'red'};
for (const county of michigan) {
const matchName = (item, index) => regDths.val=item==county.county?(regDths.val+county.deaths): regDths.val;
countyNames.forEach(matchName);
};
return (regDths);
}
//forEach function to iterate over each region in state object
const getRegions = (item,index) => {
allRegData.push(getRegionCases(item[1],item[0]));
allRegData.push(getRegionDths(item[1],item[0]));
}
//calls the getRegions function for each of the state regions
Object.entries(stateRegions).forEach(getRegions);
return allRegData
}
data[0]
getMinMax = (typeVal) => {
const casesArray = data.filter(d => d.type == typeVal)
const minMax = d3.extent(casesArray, d => +d.val);
return minMax;
}
chart1 = {
const x = 120, y = 120;
const xLoc = [x,x,x*2,x*2,x*3,x*3,x*4,x*4,x,x,x*2,x*2,x*3,x*3,x*4,x*4];
const yLoc = [y,y,y,y,y,y,y,y,y*2,y*2,y*2,y*2,y*2,y*2,y*2,y*2,];
const svg = d3.create("svg")
.attr("width",600)
.attr("height",360);
const circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d,i) => xLoc[i])
.attr("cy", (d,i) => yLoc[i]);
const circleAttributes = circles
.attr("cx", (d,i) => xLoc[i])
.attr("cy", (d,i) => yLoc[i])
.attr('r', d => d.val/1000)
.attr('stroke',d => 'deepskyblue')
.attr('fill', d => 'aquamarine')
.attr('stroke-width', d => 2)
.style('opacity', d => 0.8)
return svg.node();
}
radiusScaleLinear = d3.scaleLinear().domain(getMinMax('cases')).range([10, 160]);
radiusScaleLinear(50000)
radiusScaleSqrt = d3.scaleSqrt().domain(getMinMax('cases')).range([10, 160]);
radiusScaleSqrt(50000)
colorReturn = {
let colorValues = [];
const colorScale = d3.scaleSqrt().domain(getMinMax('cases')).range([0, 1]);
data.forEach((item,index) => colorValues.push(d3.interpolateTurbo(colorScale(item.val))));
return colorValues;
};
viewof b1 = button({value: "REPLAY"})
function miCovidChart() {
const radValCases = d3.scaleSqrt().domain(getMinMax('cases')).range([10, 160]);
const radValDths = d3.scaleSqrt().domain([getMinMax('deaths')[0],getMinMax('cases')[1]]).range([2, 160]);
const caseScale = d3.scaleSqrt().domain(getMinMax('cases')).range([.5, .9]);
const x = 150, y = 150;
const xLoc = [x,x,x*2,x*2,x*3,x*3,x*4,x*4,x,x,x*2,x*2,x*3,x*3,x*4,x*4];
const yLoc = [y,y,y,y,y,y,y,y,y*2,y*2,y*2,y*2,y*2,y*2,y*2,y*2,];
const svg = d3.create("svg")
.attr("width",700)
.attr("height",400);
const circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", (d,i) => xLoc[i])
.attr("cy", (d,i) => yLoc[i])
.transition()
.duration(6000)
const circleAttributes = circles
.attr("cx", (d,i) => xLoc[i])
.attr("cy", (d,i) => yLoc[i])
.attr("r", d => (d.type == 'cases' ? radValCases(d.val):radValDths(d.val)))
.style('opacity', d => d.type=='cases'? 0.6:0.7)
.attr('stroke', d => d.type=='cases'?'#520691':'black')
.attr('stroke-width', d => d.type=='cases'? 4 : 0)
.style("stroke-dasharray", d => d.type=='cases'?("10,10"):'')
.attr('fill', d => (d.type == 'cases' ? d3.interpolateTurbo(caseScale(d.val)):'#5c5c5c'))
const text = svg.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("x", (d,i) => (xLoc[i]-23))
.attr("y", (d,i) => (yLoc[i]+60))
.attr("font-size", "3px")
.transition()
.duration(3000)
const textLabels = text
.attr("x", (d,i) => (xLoc[i]-50))
.attr("y", (d,i) => (yLoc[i]+70))
.text(d => (`${d.label}`))
.attr("font-family", "palatino linotype")
.attr("font-size", "15px")
svg.append("text")
.attr("x", (width / 2))
.attr("y", 35)
.style("font-size", "10px")
.transition()
.duration(2000)
.attr("text-anchor", "middle")
.style("font-size", "22px")
.attr("font-family", "palatino linotype")
.text("Michigan Regions Covid Data")
svg.append("text")
.attr("x", (width / 2))
.attr("y", 55)
.style("font-size", "5px")
.transition()
.duration(2000)
.attr("x", (width / 2))
.attr("y", 60)
.attr("text-anchor", "middle")
.style("font-size", "15px")
.attr("font-family", "palatino linotype")
.text("Cases = Outer Circle - Deaths = Inner Circle");
svg.append("text")
.attr("x", (width / 2))
.attr("y", 72)
.style("font-size", "3px")
.transition()
.duration(2000)
.attr("x", (width / 2))
.attr("y", 77)
.attr("text-anchor", "middle")
.style("font-size", "11px")
.attr("font-family", "palatino linotype")
.text("(Data NOT Normalized for Population)");
return svg.node();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.