Professor of Computer Science at Old Dominion University
barData
{
const container = d3.create('div');
const data = barData;
const barChart = container.selectAll('div')
/* ADDED: Add code here to generate the bar chart within the container. */
.data(data)
.join('div')
barChart
.style('background', 'steelblue') // Set the background color of the div to 'steelblue'
.style('border', '1px solid white') // Set the border of the div as 'white'
.style('font-size', 'small') // Set the text font size in the div to 'small'
.style('color', 'white') // Set the text font color to 'white'
.style('text-align', 'right') // Set the text alignment in the div to 'right'
.style('padding', '3px') // HINT: CSS styles require units, not just numbers
/* ADDED: Add code here to finish updating the visual properties of the bars */
.style('width', d => `${d.value}px`) // This makes short bars
// .style('width', d => `${(width/78) * d.value}px`)
// .style('width', d => `${xscale(d.value)}px`) // using xscale(), defined below
.text(d => d.value)
return container.node();
}
(width/78) * 78
(width/78)* 0
xscale = d3.scaleLinear()
.domain([0, d3.max(barData, d => d.value)])
.range([0, width]) // Observable's built-in width property!
d3.max(barData, d=>d.value)
xscale(78)
xscale(0)
height=150
color = d3.scaleOrdinal(d3.schemeTableau10); //.domain(barData.map(d => d.key));
yscale = d3.scaleBand()
.domain(barData.map(d => d.key))
.range([0, height]) // Try flipping this to [height, 0] and see the effect on the bars below.
.padding(0.1)
{
const container = d3.create('svg')
.attr('width', width)
.attr('height', height);
container.selectAll('rect') // bars
.data(barData)
.join('rect')
.attr('x', 0)
.attr('y', d => yscale(d.key)) // <-- Use yscale instead of manually positioning bars
.attr('width', d => xscale(d.value))
.attr('height', yscale.bandwidth()) // <-- Band scales split a pixel range into equal-sized bands
.style('fill', d => color(d.key))
.style('stroke', 'white');
container.selectAll('text') // labels
.data(barData)
.join('text')
.attr('x', d => xscale(d.value))
.attr('y', d => yscale(d.key)) // <-- Use yscale instead of manually positioning labels
.attr('dx', -20)
.attr('dy', '1.2em')
.attr('fill', 'white')
.style('font-size', 'small')
.text(d => d.value);
return container.node();
}
{
const width = 400;
const height = 200;
const container = d3.create('svg')
.attr('width', width)
.attr('height', height);
// Update the x scale here.
const xscale = d3.scaleBand()
.domain(barData.map(d => d.key))
.range([0,width])
.padding(0.1);
// Update the y scale here.
const yscale = d3.scaleLinear()
.domain([0, d3.max(barData, d => d.value)])
.range([0, height]);
container.selectAll('rect')
.data(barData)
.join('rect')
.attr('x', d => xscale(d.key)) // Update the x position
.attr('y', 0) // Update the y position
.attr('width', xscale.bandwidth()) // Update the width
.attr('height', d => yscale(d.value)) // Update the height
.style('fill', d => color(d.key))
.style('stroke', 'white');
container.selectAll('text')
.data(barData)
.join('text')
.attr('x', d => xscale(d.key)) // Update the x position
.attr('y', d => yscale(d.value)) // Update the y position
.attr('dx', '2.2em') // Update the x offset
.attr('dy', -20) // Update the y offset
.attr('fill', 'white')
.style('font-size', 'small')
.style('text-anchor', 'middle')
.text(d => d.value);
return container.node();
}
{
const width = 400;
const height = 200;
const container = d3.create('svg')
.attr('width', width)
.attr('height', height);
const xscale = d3.scaleBand()
.domain(barData.map(d => d.key))
.range([0,width]);
const yscale = d3.scaleLinear()
.domain([0, d3.max(barData, d => d.value)])
.range([height, 0]); // Update yscale range
container.selectAll('rect')
.data(barData)
.join('rect')
.attr('x', d => xscale(d.key))
.attr('y', d => yscale(d.value)) // Update the y position
.attr('width', xscale.bandwidth())
.attr('height', d => height - yscale(d.value)) // Update the height
.style('fill', d => color(d.key))
.style('stroke', 'white');
container.selectAll('text')
.data(barData)
.join('text')
.attr('x', d => xscale(d.key))
.attr('y', d => yscale(d.value))
.attr('dx', '2.2em')
.attr('dy', 20) // Update the y offset
.attr('fill', 'white')
.style('font-size', 'small')
.style('text-anchor', 'middle')
.text(d => d.value);
return container.node();
}
barData
//barData.push({"key":6, "value": 20})
//barData.push({"key":7, "value": 80})
// to remove the added items, just run this cell 2 times
//barData.pop()
import {data, line, xAxis as xAxisDate, yAxis as yAxisUpper, height as heightLine} from "@d3/learn-d3-shapes"
{
const svg = d3.create('svg')
.attr("viewBox", [0, 0, width, heightLine]);
svg.append('g')
.call(xAxisDate);
svg.append('g')
.call(yAxisUpper);
svg.append('path')
.datum(data)
.style('fill', 'none')
.style('stroke', 'steelblue')
.style('stroke-width', '1.5')
.style('stroke-miterlimit', '1')
.attr('d', line);
return svg.node();
}
import {area} from "@d3/learn-d3-shapes"
{
const svg = d3.create('svg')
.attr("viewBox", [0, 0, width, heightLine]);
svg.append('g')
.call(xAxisDate);
svg.append('g')
.call(yAxisUpper);
svg.append('path')
.datum(data)
.style('fill', 'steelblue')
.attr('d', area); // just changed 'line' to 'area'
return svg.node();
}
heightScatter = 600
//myWidth = Math.min(heightScatter, width); // don't override 'width' in an Observable notebook
myWidth = width;
margin = ({top: 25, right: 20, bottom: 35, left: 40})
x = d3.scaleLinear()
.range([margin.left, myWidth - margin.right])
y = d3.scaleLinear()
.range([heightScatter - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${heightScatter - margin.bottom})`)
.call(d3.axisBottom(x).ticks(myWidth / 80)) // replace
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, heightScatter])
.attr("width", myWidth)
.attr("max-width", myWidth);
// set the x and y domains based on our data
x.domain(d3.extent(diamonds, d => d.carat)).nice()
y.domain(d3.extent(diamonds, d => d.price)).nice()
// setup the x-axis and label
svg.append("g").call(xAxis)
.append("text")
.attr("x", myWidth)
.attr("y", margin.bottom)
.attr("fill", "currentColor")
.attr("text-anchor", "end")
.text("carat")
// setup the y-axis and label
svg.append("g").call(yAxis)
.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text("price ($)")
// draw the circles
svg.append("g")
.attr("stroke-width", 1)
.attr("fill", "none")
.selectAll("circle")
.data(diamonds)
.join("circle")
.attr("cx", d => x(d.carat))
.attr("cy", d => y(d.price))
.attr('stroke', d => colorScatter(d.cut))
.attr("r", 3);
return svg.node();
}
colorScatter = d3.scaleOrdinal(d3.schemeTableau10);
import {visualizeTicks} from "@d3/continuous-scales"
visualizeTicks(
d3.scaleLinear().domain(d3.extent(diamonds, d => d.carat)).nice()
)
visualizeTicks(
d3.scaleLinear().domain(d3.extent(diamonds, d => d.price)).nice()
)
import {toc} from "@harrystevens/toc"
diamonds = require('@observablehq/diamonds')
d3 = require("d3@6")
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.
