Web,MediaArt
Published
Edited
Nov 20, 2020
2 forks
md`# Scatter Plot`
url = "https://gist.githubusercontent.com/sugi2000/a80f234bc484064f8988d15179ef39cd/raw/8189375af8c3c796c4e81fb85cd5b6c556c2a46f/random-xyz.csv"
dataset = d3.csv(url, d3.autoType)
{
const width = 500;
const height = 500;
const margin = { top: 50, right: 50, bottom: 50, left: 50 };
const svg = d3
.create('svg')
.attr('width', width)
.attr('height', height);
const xScale = d3
.scaleLinear()
.domain([0, 100])
.range([margin.left, width - margin.right]);
const yScale = d3
.scaleLinear()
.domain([0, 100])
.range([height - margin.bottom, margin.top]);
const xAxis = d3
.axisBottom()
.scale(xScale)
.ticks(10);
const yAxis = d3
.axisLeft()
.scale(yScale)
.ticks(10);
svg
.selectAll('circle')
.data(dataset)
.join('circle')
.attr('cx', d => xScale(d.x))
.attr('cy', d => yScale(d.y))
.attr('r', 6)
.attr('fill', '#dd33dd');
svg
.append('g')
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis);
svg
.append('g')
.attr('transform', `translate(${margin.left}, 0)`)
.call(yAxis);
return svg.node();
}
d3 = require('d3@6')
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.
