svg`<svg width="100" height="500">
<rect x="10" y="400" height="100" width="20" fill="purple" />
<rect x="40" y="100" height="400" width="20" fill="green" />
<rect x="70" y="200" height="300" width="20" fill="red" />
</svg>`
{
const svg = d3.create('svg')
.attr('width', 100)
.attr('height', 500);
svg.append('rect')
.attr('x', 10)
.attr('y', 300)
.attr('fill','green')
.attr('height',200)
.attr('width',20);
return svg.node();
}
bardata = [
{xPos: 10, yPos: 50, width: 30, height: 50, color: 'blue'},
{xPos: 45, yPos: 20, width: 30, height: 80, color: 'red'},
{xPos: 80, yPos: 70, width: 30, height: 30, color: 'yellow'}
]
{
const svg = d3.create('svg')
.attr('
}
bars = [
{name: 'a', value: 5, color: 'blue'},
{name: 'b', value: 8, color: 'red'},
{name: 'c', value: 3, color: 'yellow'}
]
width = 300
height = 100
x = d3.scaleBand()
.domain(bars.map(d=>d.name)) // EDIT THIS LINE - need an array with the list of names
.range([0, width])
.padding(0.2)
y = d3.scaleLinear()
.domain([0, d3.max(bars, d=>d.value)]) // EDIT THIS LINE
.range([0, height])
{
const svg = d3.create('svg').attr("width", width).attr("height", height);
svg.selectAll('rect')
.data(bars)
.join('rect')
.attr('fill', d => d.color)
.attr('x', d => x(d.name)) // EDIT THIS LINE
.attr('y', d => height-y(d.value)) // EDIT THIS LINE (remember that 0 starts at the top)
.attr('width', x.bandwidth) // EDIT THIS LINE
.attr('height', d => y(d.value)); // EDIT THIS LINE
return svg.node();
}
d3 = require("d3@7")
import {solution} from "@nyuvis/d3-introduction"
import {chart as scaleDiagram} from "@uw-info474/animated-scale-diagram"
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.
