mainXScale = d3.scaleBand()
.domain(data.map(d => d.x))
.range([mainMargin.left, width - mainMargin.right])
.paddingInner(0.4);
Published
Edited
Jun 26, 2020
8 stars
25 Apr 2020: First Bar Chart26 Apr 2020: Bar Chart Revisited27 Apr 2020: Finalising the Bar Chart28 Apr 2020: What Else I Learned From That Bar Chart29 Apr 2020: Setting up Observable30 Apr 2020: What Else Can I Do With This Bar Chart?1 May 2020: Formatting Numbers and Sorting a Bar Chart2 May 2020: Exploring More of Observable and Vega-Lite3 May 2020: Exploring More Vega-Lite4 May 2020: Vega-Lite Scatterplot and Heat Map, and More Posts on Getting Started With Data Viz5 May 2020: Vega-Lite Scatterplot continued6 May 2020: D3 Scatterplot7 May 2020: D3 Scatterplot with Legends8 May 2020: D3 Scatterplot with Tooltips9 May 2020: D3 Scatterplot with Voronoi Tooltips10 May 2020: Line charts11 May 2020: Vega-Lite Line Charts12 May 2020: D3 Line Chart13 May 2020: D3 Multi-Line Chart14 May 2020: D3 Multi-Line Chart with Annotations15 May 2020: D3 Multi-Line Chart with Shading16 May 2020: Donut Charts and Pie Charts17 May 2020: Pie Charts in Vega-Lite18 May 2020: Donut Chart in Vega-Lite19 May 2020: Donut Chart in D320 May 2020: Donut Chart in D3 with Footnotes21 May 2020: Donut Chart in D3 with Tooltips22 May 2020: Area Charts, Stacked Area Charts, Stream graphs and Ridgelines23 May 2020: Area Charts in Vega-Lite and CSV Parsing24 May 2020: Area Charts in D3 with Tooltips25 May 2020: Cumulative Area Chart in D3 with Tooltips26 May 2020: Histograms and Density Plots27 May 2020: Exploratory Histogram28 May 2020: D3 Histogram29 May 2020: D3 Histogram Styling30 May 2020: Data Tables31 May 2020: Wikipedia Data Tables1 June 2020: Wrangling Wikipedia List Data and Summary Statistics2 June 2020: Treemaps, Dendrograms, Sunbursts, Circle Packing, and Tree Diagrams3 June 2020: D3 Tree Diagram and D3 Hierarchy4 June 2020: D3 Clustered Dendrogram5 June 2020: D3 Radial Tidy Tree and Radial Dendrogram6 June 2020: D3 Collapsible Tidy Tree7 June 2020: D3 Collapsible Tidy Tree (Improved)8 June 2020: Designing for Touch Devices: Drag, Click, Hover, Focus, Scroll, Zoom, Delaunay, Voronoi9 June 2020: Designing for Small Screens: Responsive Data Viz, Resizing, and Aspect Ratios10 June 2020: Typography for Data Viz11 June 2020: Color in Data Viz12 June 2020: Styled Bar Chart13 June 2020: Accessible Bar Chart and Accessible Data Table14 June 2020: Line Chart with Points and Bar Chart15 June 2020: Network Diagrams16 June 2020: D3 Disjoint Force-Directed Graph17 June 2020: D3 Bar Chart with Textured Line18 June 2020: D3 Bar Chart Transitions19 June 2020: D3 Bar Chart Transitions (Improved)20 June 2020: Sketchy D3 Bar Chart Style21 June 2020: Brushing to Filter and Zoom Using D3 Brush23 June 2020: Linear Regression24 June 2020: Hatched Pattern Effect Bar Chart25 June 2020: Checkerboard Fill Effect Bar Chart26 June 2020: D3 Bar Chart Brush27 June 2020: Using Textures28 June 2020: Charting Typing Speed: Data and Exploration29 June 2020: Charting Typing Speed: Data and Exploration with Vega-Lite30 June 2020: Charting Typing Speed: Data and Exploration with Vega-Lite and Datawrapper1 July 2020: Charting Typing Speed: Data and Exploration with Vega-Lite Bubble Chart2 July 2020: Charting Typing Scores: Data and Exploration with Vega-Lite3 July 2020: Journal Updates and User Testing4 July 2020: About Heatmaps5 July 2020: Data Wrangling for a Heatmap6 July 2020: D3 Heatmap Without Sorting7 July 2020: D3 Heatmap With Sorting8 July 2020: D3 Heatmap with Legend9 July 2020: D3 Heatmap Styled10 July 2020: About Bubble Charts11 July 2020: D3 Bubble Chart12 July 2020: D3 Bubble Chart with Labels on Hover13 July 2020: D3 Bubble Chart with Voronoi Labels on Hover14 July 2020: D3 Bubble Chart with Voronoi Tooltips15 July 2020: About Population Pyramids16 July 2020: Data Wrangling for Population Pyramids17 July 2020: D3 Population Pyramid18 July 2020: About Sankey, Alluvial, Parallel Sets, and Parallel Coordinates19 July 2020: Data Wrangling for a Sankey Diagram20 July 2020: D3 Sankey Diagram21 July 2020: D3 Sankey Diagram with Hovers and Percentages22 July 2020: D3 Parallel Coordinates23 July 2020: D3 Parallel Coordinates (Updates)24 July 2020: About Slope Charts25 July 2020: Data Wrangling for a Slope Chart26 July 2020: D3 Slope Chart27 July 2020: D3 Slope Chart with Color28 July 2020: D3 Slope Chart with Highlight Color and Gray Context Lines29 July 2020: D3 Slope Chart Small Multiples (Work in Progress)30 July 2020: D3 Slope Chart Small Multiples31 July 2020: About Dumbbell or Connected Dot Plots1 August 2020: D3 Dumbbell Plot2 August 2020: 100 Days of Data VizAbout TimelinesBuilding TimelinesAbout SparklinesAbout Circle PackingD3 Circle PackingD3 Circle Packing with Data Wrangling and Interactive GroupingSort by arbitrary arrayAbout Choropleth MapsAbout Map Data: GeoJSON and TopoJSON with D3
22 June 2020: D3 Bar Chart Brush (Work In Progress)
chart = {
const zoomer = d3.zoom()
.on("zoom", null);
const svg = d3.create("svg")
.attr("title", data.barChartSVGTitle)
.attr("class", "svgWrapper")
.attr("width", width)
.attr("height", height)
.call(zoomer)
.on("wheel.zoom", scroll)
.on("mousedown.zoom", null)
.on("touchstart.zoom", null)
.on("touchmove.zoom", null)
.on("touchend.zoom", null);
const defs = svg.append("defs");
defs.append("clipPath")
.attr("id", "clip")
.call(clip);
svg.append("g")
.attr("class", "chart-title")
.call(chartTitle);
const mainGroup = svg.append("g")
.attr("class", "mainGroup");
const mainBarsGroup = mainGroup.append("g")
.attr("clip-path", "url(#clip)")
.attr("class", "mainBarsGroup");
const miniGroup = svg.append("g")
.attr("class", "miniGroup")
.attr("transform", "translate(" + minimapPositionTranslate + ")");
const brushGroup = svg.append("g")
.attr("class", "brushGroup")
.attr("transform", "translate(" + minimapPositionTranslate + ")")
.append("g")
.attr("class", "brush")
.call(brush);
brushGroup.selectAll("rect")
.attr("width", miniWidth);
brushGroup.call(brush.move, initialBrushXSelection);
const miniBars = miniGroup.selectAll(".bar")
.data(data, d => d.dayCount);
miniBars.enter().append("rect")
.attr("class", "bar")
.attr("x", d => miniXScale(d.x))
.attr("y", d => miniHeight - miniYScale(d.y))
.attr("width", miniXScale.bandwidth())
.attr("height", d => miniYScale(d.y))
.style("fill", barColor);
mainGroup.append("g")
.attr("class", "x-axis")
.call(mainXAxis);
const mainBars = mainBarsGroup.append("g")
.attr("class", "bars")
.selectAll("rect")
.data(data);
mainBars.join("rect")
.attr("role", "presentation")
.attr("class", "bar")
.attr("fill", barColor)
.attr("x", d => mainXScale(d.x))
.attr("y", d => mainHeight - mainYScale(d.y))
.attr("width", mainXScale.bandwidth())
.attr("height", d => mainYScale(d.y));
svg.append("g")
.call(chartBy)
return svg.node();
}
function update() {
const bar = d3.select(".mainBarsGroup").selectAll(".bar")
.data(data, d => d.dayCount);
bar
.attr("x", d => mainXScale(d.x))
.attr("y", d => mainHeight - mainYScale(d.y))
.attr("width", mainXScale.bandwidth())
.attr("height", d => mainYScale(d.y));
bar.exit()
.remove();
}
brush = d3.brushX()
.extent([[0, 0], [miniWidth, miniHeight]])
.on("brush", brushmove);
function brushmove() {
const extentX = d3.event.selection;
const selected = miniXScale
.domain()
.filter(d => (extentX[0] - miniXScale.bandwidth() + 1e-2 <= miniXScale(d)) && (miniXScale(d) <= extentX[1] - 1e-2));
d3.select(".miniGroup").selectAll(".bar")
.style("fill", d => selected.indexOf(d.x) > -1 ? barColor : inactiveColor);
d3.select(".mainGroup").select(".x-axis")
.call(mainXAxis);
let originalRange = mainXZoom.range();
mainXZoom.domain(extentX);
mainXScale.domain(data.map(d => d.x));
mainXScale.range([mainXZoom(originalRange[0]), mainXZoom(originalRange[1])]).paddingInner(0.4);
update();
}
function scroll() {
const gBrush = d3.select(".brush");
let selection = d3.brushSelection(gBrush.node());
let size = selection[1] - selection[0],
range = miniXScale.range(),
x0 = d3.min(range),
x1 = d3.max(range) + miniXScale.bandwidth(),
dx = -d3.event.deltaX,
topSection;
if (selection[0] - dx < x0) {
topSection = x0;
} else if (selection[1] - dx > x1) {
topSection = x1 - size;
} else {
topSection = selection[0] - dx;
}
d3.event.stopPropagation();
d3.event.preventDefault();
gBrush.call(brush.move, [topSection, topSection + size]);
}
clip = clipPath => clipPath.append("rect")
.attr("x", mainMargin.left)
.attr("y", mainMargin.top)
.attr("width", mainWidth + mainMargin.left)
.attr("height", mainHeight);
x = d3.scaleBand()
.domain(data.map(d => d.x))
.range([mainMargin.left, width - mainMargin.right])
.padding(0.1);
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y)]).nice()
.range([mainMargin.top + mainHeight, mainMargin.top]);
miniXScale = d3.scaleBand()
.domain(data.map(d => d.x))
.range([0, miniWidth])
.paddingInner(0.4);
mainYScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y)]).nice()
.range([0, mainHeight]);
miniYScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y)]).nice()
.range([0, miniHeight]);
mainXZoom = d3.scaleLinear()
.range([0, mainWidth])
.domain([0, mainWidth]);
mainXAxis = g => g
.attr("transform", `translate(0,${mainHeight})`)
.call(d3.axisBottom(mainXScale)
.tickSizeOuter(0)
.tickFormat(d => d3.timeFormat("%a")(d).substring(0, 1))
);
initialBrushXSelection = [0, 200]
chartTitle = g => g
.append("text")
.attr("id", "chart-title")
.attr("x", 0)
.attr("y", 0)
.attr("dy", "1em")
.style("font-weight", "800")
.style("font-size", "clamp(.7rem, 2.5vw, 1.2rem)") // minimum, preferred, maximum
.text(data.barChartTitle);
chartBy = g => g
.attr("transform", `translate(${width}, ${height})`)
.append("text")
.attr("id", "source")
.attr("x", 0)
.attr("y", 0)
.attr("dy", "-0.5em")
.attr("text-anchor", "end")
.text('@DiDoesDigital');
mainMargin = ({top: 48, right: 0, bottom: 24, left: 0})
mainWidth = width - mainMargin.left - mainMargin.right;
mainHeight = 450;
miniMargin = ({top: 12, right: 0, bottom: 48, left: 0})
miniHeight = 100;
miniWidth = width - miniMargin.left - miniMargin.right;
barColor = "#766FAE"
inactiveColor = "#E6E5F0"
activeColor = "#534e7a"
typographyStyles = html`<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
text, table {
fill: #282541;
font: 400 16px/1.4 "Noto Sans", sans-serif;
}
.heading,
.paragraph {
fill: #282541;
font: 400 16px/1.4 "Noto Sans", sans-serif;
}
.heading {
font: 700 24px/1.4 "Noto Sans", sans-serif;
}
`
accessibleDataTable = render_data_table(data, {caption: data.tableCaption, columns: data.slice[0], focusable: false})
data[0]
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.