The avatar for @razpudding
Laurens
Teacher, developer and a lot of other things. The projects I share here are usual small scale and experimental in nature. More of my experiments on my codepen.
Published
Edited
Dec 9, 2018
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
y = d3.scaleLinear()
.domain(d3.extent(filteredData, d => d.totalIncome)).nice()
.range([height - margin.bottom, margin.top])
Insert cell
x = d3.scaleLinear()
.domain(d3.extent(filteredData, d => d.householdSize)).nice()
.range([margin.left, width - margin.right])
Insert cell
z = d3.scaleOrdinal(d3.schemeCategory10)
Insert cell
z.domain()
Insert cell
margin = ({top: 40, right: 30, bottom: 30, left: 80})
Insert cell
height = 600
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
d3 = require("d3@5")
Insert cell
md`Ideas for improvement:
- DONE: Plot the [Average and Mean values](http://learnjsdata.com/group_data.html) of each country in the graph as an optional view. (and maybe different regions when selecting a country?)
- DONE: Show different regions when selecting a country
- DONE: Add mouseover on circles to show household, region or country
- Make x and y dependent on variables the user selects themselves (other vars in the data)
- Add labels to axes
- Figure out how to have NON-reactive axes and freeze the y and maybe x axes
- Create a "settings" object which helps filter out false data like hhsize > 20, landArea > 30.000 etc.)
`
Insert cell

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