Scales and Axes / Sumant Pattanaik

Sumant Pattanaik

Workspace

Published

Edited

Jan 14, 2021

{

let svgElement = DOM.svg(width,height);

let svg = d3.select(svgElement);

let chart = svg.append('g')

.attr("transform",`translate(10,${height/2-10})`)

.attr("stroke","black")

.attr("fill","none")

.attr("font-size", 12)

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

.attr('alignment-baseline', 'middle')

let data = [4000, 8000, 20000, 40000, 80000]

const sqrt=d3.scaleSqrt().domain([1, 100000]).range([1,width/10-2]).nice();

chart.selectAll("circle")

.data(data)

.join("circle")

.attr("cx",d=>sqrt(d))

.attr("r",d=>sqrt(d))

chart.selectAll("text")

.data(data)

.join("text")

.attr("x",d=>sqrt(d)*2)

.attr("r",d=>sqrt(d))

.style("fill", "black")

.style("stroke", "none")

.text(d=>d3.format(".0s")(d))

return svgElement

}

height = 250

md`### External Libraries`

import {select} from "@jashkenas/inputs"

import {columns} from "@bcardiff/observable-columns"

d3 = require("d3")

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