Published
Edited
Aug 24, 2020
createPosition = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, dimensions.width, dimensions.height]);
svg.append("g")
.selectAll("circle")
.data(data)
.join("circle")
.attr("r", 10)
.attr("fill", "red")
.attr('opacity', 0.5)
.attr('cx', (d,i) => chartXScale(i+1))
.attr('cy', (d) => chartYScale(d.y))
return svg;
}
drawPosition = {
return createPosition.node()
}
md `## Step 2: Create Simple Bar Chart`
function createSingleBarChart(barData) {
const barScale = getBarScale(barData)
const barValueScale = getBarValueScale(barData)
const svg = d3.create("svg")
.attr('width', dimensions.barChartWidth)
.attr('height', dimensions.barChartHeight)
svg.append("g")
.selectAll("rect")
.data(barData)
.join("rect")
.attr("fill", "#ccc")
.attr("x", 0)
.attr("y", (d,i) => barScale.step() * i)
.attr('width', (d,i) => barValueScale(d.value))
.attr('height', (d) => barScale.bandwidth())
return svg.node();
}
singleBar = {
const barData = data[0].barChart
return createSingleBarChart(barData)
}
postionChartsAtPoints = {
const svg = d3.create("svg")
.attr('width', dimensions.width)
.attr('height', dimensions.height)
const scales = []
const g = svg
.selectAll("g")
.data(data)
.join("g")
.attr('id',(d,i) => `pos-${i}`)
.attr('transform', (d, i) => `translate(${chartXScale(i+1)}, ${chartYScale(d.y)})`)
.each((d, i) => {
const barScale = d3.scaleBand()
.domain(d.barChart.map(accessor))
.range([ 0, dimensions.barChartHeight])
.padding(0.15)
const valueScale = d3.scaleLinear()
.domain([0, d3.max(d.barChart, accessor)]).nice()
.range([0, dimensions.barChartWidth])
d.barChart.map(node => {
node.barScale = barScale
node.valueScale = valueScale
})
})
g
.attr('class','other-element')
.append('circle')
.attr("r", 10)
.attr('cx', 0)
.attr('cy', 0)
.attr("fill", "red")
.attr('opacity', 0.5)
g.selectAll("rect")
.data((d,i) => d.barChart)
.join("rect")
.attr("fill", "#ccc")
.attr("x", 0)
.attr("y", (d,i) => d.barScale.step() * i)
.attr('width', (d,i) => d.valueScale(d.value))
.attr('height', (d) => d.barScale.bandwidth())
return svg.node()
}
accessor = d => d.value
chartYScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y)])
.range([dimensions.height - dimensions.margins.top, dimensions.margins.bottom * 2])
chartXScale = d3.scaleLinear()
.domain([0, data.length])
.range([dimensions.width - dimensions.margins.right, dimensions.margins.left])
function getBarScale(barData) {
return d3.scaleBand()
.domain(barData.map(accessor))
.range([ 0, dimensions.barChartHeight])
.padding(0.15)
}
function getBarValueScale(barData) {
return d3.scaleLinear()
.domain([0, d3.max(barData, accessor)]).nice()
.range([0, dimensions.barChartWidth])
}
createData = {
const data = []
for (let x=0; x<barChartNum; x++) {
const point = {};
point.y = Math.floor(Math.random() * 10);
point.barChart = [];
const barNum = Math.floor(Math.random() * 6) + 1
for (let y = 0; y <= barNum; y++) {
point.barChart[y] = {}
point.barChart[y].value = Math.floor(Math.random() * 500)
}
data.push(point)
}
return data
}
md `### Dimensions`
dimensions = ({
width: 800,
height: 400,
barChartWidth: 100,
barChartHeight: 50,
margins: {
top: 30,
right: 20,
bottom: 30,
left: 40}
})
d3 = require("d3@5")
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.
