Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
Public
Edited
Aug 26, 2023
1 fork
width = 800
height = width * 0.7
margin = ({"left":100, "right":100, "top":100, "bottom":50})
// create_node = (node) => {
// node.append('defs').append("clipPath") // define a clip path
// .attr("id", d => `circle-clip-${d.champion}`) // give the clipPath an ID
// .append("rect") // shape it as an ellipse
// .attr("x", v => r(v.data[curr_region].totalpickrate) - 1 * r(v.data[curr_region].totalpickrate) * 2 * calculate_circular_segment(v.data[curr_region].red_weight)) // position the x-centre
// .attr("y", v => {return (-r(v.data[curr_region].totalpickrate))}) // position the y-centre
// .attr("width", v => calculate_circular_segment(v.data[curr_region].red_weight) * r(v.data[curr_region].totalpickrate) * 2) // set the x radius
// .attr("height", v => r(v.data[curr_region].totalpickrate) * 2)
// node.append('circle').attr('r', v => r(v.data[curr_region].totalpickrate)).attr('fill', "#5496d0")
// node.append('circle').attr('r', v => r(v.data[curr_region].totalpickrate)).attr('clip-path', d => `url(#circle-clip-${d.champion})`).attr('fill', "#f51641")
// node.append('text').attr('text-anchor', 'middle').text(v => v.champion).attr('font-size', 15).attr('y', v => r(v.data[curr_region].totalpickrate) > 10 ? 0 : -12).attr('fill', "whitesmoke")
// node.attr('opacity', 0.9).attr("class", function(d,i) {return i == 0 ? "circle1" : "circle2";});mic
// }
{
const svg = d3.create('svg').attr('viewBox', [0,0,width, height]).style('background', "black")
const wrapper = svg.append('g').attr("transform", `translate(${margin.left},${margin.top})`)
let nodes = wrapper.selectAll('g').data(covid_ph).join('g').attr('transform', d => `translate(${x(d.date)}, ${innerHeight})`)
let lines = nodes.append('line').attr('fill', 'whitesmoke').attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2',0).attr('stroke-width', 2).attr('stroke', 'whitesmoke').attr('stroke-linecap', 'round').attr('stroke-dasharray', '1,30').attr('opacity', 0.7)
// )stroke-linecap="round" stroke-dasharray="1, 30"
nodes.append('circle').attr('r', parseInt(x.step())/2).attr('fill', 'white').attr('stroke-width', 1).attr('stroke', 'white').attr('class', 'main-circle')
// wrapper.append('g').call(xAxis)
// const node = wrapper.selectAll('g').data(lol_dataset.nodes).join('g').attr('transform', function(d) { return `translate(${d.x},${ d.y})`}).call(create_node)
nodes.transition().delay((d, i) => i*200).duration(500).ease(d3.easeLinear).attr('transform', d => `translate(${x(d.date)}, ${y(d.new_cases)})`)
lines.transition().delay((d, i) => i*200).duration(500).ease(d3.easeLinear).attr('x2', 0).attr('y2',d => innerHeight - y(d.new_cases))
// nodes.call(create_circle)
// nodes.call(create_line)
// // init simulation
// const simulation = d3.forceSimulation();
// simulation.nodes(lol_dataset.nodes);
// // annotations and descriptions
// const desc_group = svg.append('g').attr('transform', `translate(30,30)`)
// desc_group.append('text').text("Red side vs Blue Side Pick Rate, Patch(11.13 and 11.14)").attr('fill', "white")
// desc_group.append('text').attr('transform', `translate(${0}, ${30})`).text(`Region ${curr_region}`).attr('fill', "white").attr('font-size', 30)
// wrapper.append("g").attr('transform', `translate(${0},${margin.top})`).call(xAxis)
// wrapper.append('line')
// .attr('stroke', 'white')
// .attr('opacity', 0.8)
// .style('stroke-dasharray', '5,5')
// .attr('fill', 'white')
// .attr('x1', x(0.5))
// .attr('y1', 0)
// .attr('x2', x(0.5))
// .attr('y2', innerHeight)
// wrapper.append('text').attr('transform', `translate(${x(0.5)}, ${40})`).text('50% pickrate').attr('fill', 'white').attr('align-text', 'center')
// // simulation force
// simulation.force("charge", d3.forceManyBody())
// .force('y', d3.forceY().y(y('All')).strength(0.1))
// .force('x', d3.forceX().x(d => x(parseFloat(d.data[curr_region].red_weight))).strength(1))
// .force('collide',d3.forceCollide().radius(function(d) { return r(d.data[curr_region].totalpickrate) + 15}))
// simulation.alpha(1).alphaDecay(0.01).velocityDecay(0.36)
// simulation.on('tick', () => {
// node.transition().duration(700).ease(d3.easeLinear).attr('transform', function(d) {
// return `translate(${d.x},${ d.y})`})
// })
// innerHeight = height-margin.top-margin.bottom
// innerWidth = width-margin.left-margin.right
// x = d3.scaleLinear()
// .domain([0,1])
// .range([0, innerWidth])
// y = d3.scaleBand().domain(["All"]).range([0, innerHeight]).padding(1)
// xAxis = g => g
// .call(d3.axisTop(x).ticks(0))
// .call(g => g.select('.text').remove())
// .call(g => g.selectAll('.tick line').remove())
// .call(g => g.select('.domain').remove())
// .call(g => g.append('text')
// .attr('x', -10)
// .attr('y', 0)
// .attr('font-weight', 'bold')
// .attr('font-size', "0.65rem")
// .attr('fill', 'white')
// .attr('text-anchor', 'end')
// .text('← Blue Pick Rate'))
// .call(g => g.append('text')
// .attr('x', x(1)+10)
// .attr('y', 0)
// .attr('font-weight', 'bold')
// .attr('font-size', "0.65rem")
// .attr('fill', 'white')
// .attr('text-anchor', 'start')
// .text('Red Pick Rate →'))
// yAxis = g => g
// .call(d3.axisLeft(y) .tickFormat(d => `${d} `).ticks(0))
// .call(g => g.select('.text').remove())
// .call(g => g.append('text')
// .attr('x', 0)
// .attr('y', 0)
// .attr('font-weight', 'bold')
// .attr('font-size', "0.87rem")
// .attr('fill', 'white')
// .attr('text-anchor', 'start')
// .text('50% Pick Rate'))
return svg.node()
}
create_circle = (node) => {
// node.append('text').attr('text-anchor', 'middle').text(v => v.champion).attr('font-size', 15).attr('y', v => r(v.data[curr_region].totalpickrate) > 10 ? 0 : -12).attr('fill', "whitesmoke")
node.attr('opacity', 0.9)
}
create_line = (node) => {
node.append('line').attr('fill', '#000').attr('x1', 0).attr('y1', 0).attr('x2', 0).attr('y2', d => innerHeight - y(d.new_cases)).attr('stroke-width', 1).attr('stroke', 'red')
// node.append('text').attr('text-anchor', 'middle').text(v => v.champion).attr('font-size', 15).attr('y', v => r(v.data[curr_region].totalpickrate) > 10 ? 0 : -12).attr('fill', "whitesmoke")
// <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
node.attr('opacity', 0.9)
}
// // const node = wrapper.selectAll('g').data(lol_dataset.nodes).join('g').attr('transform', function(d) { return `translate(${d.x},${ d.y})`}).call(create_node)
// create_node = (node) => {
// node.append('defs').append("clipPath") // define a clip path
// .attr("id", d => `circle-clip-${d.champion}`) // give the clipPath an ID
// .append("rect") // shape it as an ellipse
// .attr("x", v => r(v.data[curr_region].totalpickrate) - 1 * r(v.data[curr_region].totalpickrate) * 2 * calculate_circular_segment(v.data[curr_region].red_weight)) // position the x-centre
// .attr("y", v => {return (-r(v.data[curr_region].totalpickrate))}) // position the y-centre
// .attr("width", v => calculate_circular_segment(v.data[curr_region].red_weight) * r(v.data[curr_region].totalpickrate) * 2) // set the x radius
// .attr("height", v => r(v.data[curr_region].totalpickrate) * 2)
// node.append('circle').attr('r', v => r(v.data[curr_region].totalpickrate)).attr('fill', "#5496d0")
// node.append('circle').attr('r', v => r(v.data[curr_region].totalpickrate)).attr('clip-path', d => `url(#circle-clip-${d.champion})`).attr('fill', "#f51641")
// node.append('text').attr('text-anchor', 'middle').text(v => v.champion).attr('font-size', 15).attr('y', v => r(v.data[curr_region].totalpickrate) > 10 ? 0 : -12).attr('fill', "whitesmoke")
// node.attr('opacity', 0.9)
// }
innerHeight = height - margin.top - margin.bottom
innerWidth = width - margin.left - margin.right
y = d3.scaleLinear().domain([0, 600000]).range([innerHeight, 0])
x = d3.scaleBand().domain(covid_ph.map(d => d.date)).range([0, innerWidth]).padding(1)
covid_ph
xAxis = g => g
.call(d3.axisBottom(x))
.call(g => g.selectAll('.tick text').remove())
.call(g => g.selectAll('.domain').remove())
// .call(g => g.selectAll('.tick line').remove())
yAxis = g => g
.call(d3.axisLeft(y))
// .call(g => g.select('.text').remove())
// .call(g => g.append('text')
// .attr('x', 0)
// .attr('y', 0)
// .attr('font-weight', 'bold')
// .attr('font-size', "0.87rem")
// .attr('fill', 'white')
// .attr('text-anchor', 'start')
// .text('50% Pick Rate'))
console.log(covid_ph)
covid_ph
covid_ph = FileAttachment("covid_ph@2.json").json()
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.
