One chart a day - First Attempt in creating a Rank Chart / Rich

Rich

@richdayandnight

Workspace

Published

One Chart a Day

Edited

Jul 9, 2020

1 fork

data = {

const text = await FileAttachment("combined_happiness_dataset@1.csv").text();

return d3.csvParse(text, (d) => ({

country: d.Country,

region: d.Region,

year_2015: +d.year_2015,

year_2016: +d.year_2016,

year_2017: +d.year_2017,

year_2018: +d.year_2018,

year_2019: +d.year_2019,

year_2020: +d.year_2010,

}));

}

{

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

const circle_radius = 12;

const collide_radius = 17;

const x = d3.scaleLinear()

.domain([0, d3.max(data, d => d.year_2015)]).nice()

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

const y = d3.scaleLinear()

.domain([0, d3.max(data, d => d.year_2015)]).nice()

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

let simulation = d3.forceSimulation().nodes(data)

.force('center', d3.forceCenter(width/2,height/2))

.force('charge', d3.forceManyBody().strength(2))

.force('collision', d3.forceCollide().radius( d => collide_radius))

.on('tick',ticked)

let selection = svg.selectAll('g').data(data)

let enterSelection = selection.enter().append('g')

let circles = enterSelection.append('circle')

.attr('fill-opacity', 0)

.attr('stroke', d => colorScale(d.year_2015))

.attr('r', circle_radius)

let text = enterSelection.append('text')

.text(d => d.country).attr('dy', '.25em')

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

.attr('fill', d => colorScale(d.year_2015))

selection = selection.merge(enterSelection)

simulation.nodes(data)

.force('x', d3.forceX( ).x( d => x(d.year_2015)))

.force('y', d3.forceY( ).y( d => y(d.year_2015)))

function ticked(){

selection.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")" });

}

return svg.node( )

}

html`

margin = ({top: 150, right: 150, bottom: 150, left: 150})

d3 = require("d3@5")

width = 1250 - margin.left - margin.right;

height = 1500 - margin.top - margin.bottom;

colorScale = d3.scaleLinear().domain([1,139]).range(d3.interpolateCool)

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