Published
Edited
Aug 2, 2021
md`# Just Wandering`
data = [
{name: "Joanna", children:2},
{name: "Huang", children:3},
{name: "a", children:3},
{name: "b", children:8},
{name: "c", children:5}
]
d3 = require("d3@6")
data.map(d => d.name)
data.map(d => d.children)
width = 800
height = 200
margin = ({top: 40, right: 10, bottom: 0, left: 60})
import {legend} from "@d3/color-legend"
x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.children)])
.range([margin.left, width - margin.right])
y = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.top, height - margin.bottom])
.padding(0.1)
.round(true)
{
const x = d3.scaleLinear();
x.domain([0, d3.max(data, d => d.children)]);
x.range([margin.left, width - margin.right]);
return x;
}
x.range()
x.domain()
y.bandwidth()
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
svg.append("g")
.attr("transform", `translate(0, ${margin.top})`)
.call(d3.axisTop(x))
return svg.node()
}
yAxis = g => g
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y))
xAxis = g => g
.attr("transform", `translate(0, ${margin.top})`)
.call(d3.axisTop(x))
firstChart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.attr("fill", "pink")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(0) )
.attr("y", d => y(d.name) )
.attr("height", y.bandwidth() )
.attr("width", d => x(d.children) - x(0) )
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
md`## isotype graph`
isotype = {
//number of circles to color in to visualize percent
var percentNumber = 21;
//variables for the font family, and some colors
var iconFill = "#BF5F8B";
var iconFillActive = "#D4CB82";
var svgBackgroundColor = '#EFEFEF';
//width and height of the SVG
const width = 500;
const height = 500;
var svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style('background-color', svgBackgroundColor)
//10 rows and 10 columns
var numRows = 5;
var numCols = 10;
var x = d3.scaleBand()
.range([0, 150])
.domain(d3.range(numCols))
var y = d3.scaleBand()
.range([0,75])
.domain(d3.range(numRows))
var data = d3.range(numRows*numCols)
var icon = svg.append("defs")
.append("g")
.attr("id","iconCustom")
.append("path")
.attr("d","M3.5,2H2.7C3,1.8,3.3,1.5,3.3,1.1c0-0.6-0.4-1-1-1c-0.6,0-1,0.4-1,1c0,0.4,0.2,0.7,0.6,0.9H1.1C0.7,2,0.4,2.3,0.4,2.6v1.9c0,0.3,0.3,0.6,0.6,0.6h0.2c0,0,0,0.1,0,0.1v1.9c0,0.3,0.2,0.6,0.3,0.6h1.3c0.2,0,0.3-0.3,0.3-0.6V5.3c0,0,0-0.1,0-0.1h0.2c0.3,0,0.6-0.3,0.6-0.6V2.6C4.1,2.3,3.8,2,3.5,2z")
.attr("transform", "translate(0,0) scale(1.8)");
var box = svg.append("g")
.attr("transform", "translate(135,130)");
box.selectAll("use")
.data(data)
.enter().append("use")
.attr("xlink:href", "#iconCustom")
.attr("id", function(d){return "id"+d;})
.attr('x', function(d){return x(d%numCols);})
.attr('y', function(d){return y(Math.floor(d/numCols));})
.attr('fill', function(d){return d < percentNumber ? iconFillActive : iconFill;})
return svg.node();
}
20%10
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.
