Public
Edited
Mar 8
chart = {
var margin = { top: 20, right: 10, bottom: 20, left: 10 };
const width = 600 - margin.left - margin.right;
const height = 100 - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
var n = 5, m = 3;
var data = d3.range(m).map(function() {
return d3.range(n).map(Math.random);
});
console.log(data);
const c = d3.scaleOrdinal(d3.schemeCategory10).domain(d3.range(n));
const x = d3.scaleBand().domain(d3.range(m)).range([0, width]).paddingInner(.1);
const x2 = d3.scaleBand().domain(d3.range(n)).range([0, x.bandwidth()]).paddingInner(.1);
var y = d3.scaleLinear().domain([0, 1]).range([height, 0]);
svg.selectAll("g").data(data).enter()
.append("g")
.attr("transform", function(d, i) { return "translate(" + x(i) + ", 0)"; })
.selectAll("rect")
.data(function(d) { return d; }).enter()
.append("rect")
.style("stroke", "black")
.attr("fill", function(d, i) { return c(i); })
.attr("x", function(d, i) { return x2(i); })
.attr("y", function(d, i) { return y(d); })
.attr("width", function(d, i) { return x2.bandwidth(); })
.attr("height", function(d, i) { return height - y(d); });
return svg.node();
}
chart1 = {
var margin = { top: 20, right: 10, bottom: 20, left: 10 };
const width = 600 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let data = [10, 20, 30, 40, 50];
const x = d3.scaleBand().domain(d3.range(data.length)).range([0, width]).padding(0.1);
const y = d3.scaleLinear().domain([0, d3.max(data)]).range([height, 0]);
svg.selectAll("rect").data(data).enter().append("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d))
.attr("fill", "steelblue");
return svg.node();
};
chart2 = {
var margin = { top: 20, right: 10, bottom: 20, left: 10 };
const width = 600 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let data = Array.from({ length: 20 }, () => Math.random() * 100);
let x = d3.scaleLinear().domain([0, 100]).range([0, width]);
let histogram = d3.histogram().domain(x.domain()).thresholds(x.ticks(10));
let bins = histogram(data);
let y = d3.scaleLinear().domain([0, d3.max(bins, d => d.length)]).range([height, 0]);
svg.selectAll("rect").data(bins).enter().append("rect")
.attr("x", d => x(d.x0))
.attr("y", d => y(d.length))
.attr("width", d => x(d.x1) - x(d.x0))
.attr("height", d => height - y(d.length))
.attr("fill", "orange");
return svg.node();
};
chart3 = {
var margin = { top: 20, right: 10, bottom: 20, left: 10 };
const width = 600 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let data = [{x: 0, y: 10}, {x: 10, y: 30}, {x: 20, y: 20}, {x: 30, y: 40}];
let x = d3.scaleLinear().domain([0, 30]).range([0, width]);
let y = d3.scaleLinear().domain([0, 40]).range([height, 0]);
let line = d3.line().x(d => x(d.x)).y(d => y(d.y));
svg.append("path").datum(data).attr("d", line)
.attr("fill", "none").attr("stroke", "red");
return svg.node();
};
chart4 = {
var margin = { top: 20, right: 10, bottom: 20, left: 10 };
const width = 600 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let data = Array.from({ length: 10 }, () => ({ x: Math.random() * width, y: Math.random() * height }));
svg.selectAll("circle").data(data).enter().append("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 5)
.attr("fill", "green");
return svg.node();
};
chart1bis = {
var margin = { top: 40, right: 40, bottom: 40, left: 40 };
const width = 700 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let data = d3.range(10).map((d, i) => ({ x: i, y: Math.random() * height }));
let x = d3.scaleBand().domain(data.map(d => d.x)).range([0, width]).padding(0.2);
let y = d3.scaleLinear().domain([0, height]).range([height, 0]);
let group = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
group.selectAll("rect").data(data).enter().append("rect")
.attr("x", d => x(d.x))
.attr("y", d => y(d.y))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d.y))
.attr("fill", "url(#gradient)");
let defs = svg.append("defs");
let gradient = defs.append("linearGradient").attr("id", "gradient").attr("x1", "0").attr("y1", "0").attr("x2", "0").attr("y2", "1");
gradient.append("stop").attr("offset", "0%").attr("stop-color", "red");
gradient.append("stop").attr("offset", "100%").attr("stop-color", "yellow");
return svg.node();
};
chart3bis = {
var margin = { top: 60, right: 60, bottom: 60, left: 60 };
const width = 900 - margin.left - margin.right;
const height = 600 - margin.top - margin.bottom;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let data = d3.range(20).map(() => ({ x: Math.random() * width, y: Math.random() * height }));
let group = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
group.selectAll("line").data(data).enter().append("line")
.attr("x1", d => d.x).attr("y1", d => d.y)
.attr("x2", d => d.x + 10).attr("y2", d => d.y + 10)
.attr("stroke", "black").attr("stroke-width", 2);
return svg.node();
};
chart2bis = {
var margin = { top: 50, right: 50, bottom: 50, left: 50 };
const width = 800 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
let data = d3.range(10).map((d, i) => ({ x: i, y: Math.sin(i) * 50 + 100 }));
let x = d3.scaleLinear().domain([0, 9]).range([0, width]);
let y = d3.scaleLinear().domain([0, 200]).range([height, 0]);
let group = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`);
let line = d3.line().x(d => x(d.x)).y(d => y(d.y)).curve(d3.curveBasis);
group.append("path").datum(data).attr("d", line)
.attr("fill", "none").attr("stroke", "blue").attr("stroke-width", 3).attr("stroke-dasharray", "5,5");
return svg.node();
};
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.
