Bar and Line chart

100%

Bar and Line chart

✓ Published3🌍 Public

Last edited Apr 23, 2019

Created on Aug 27, 2018

This example displays a dual-axis chart combining bars for effective rainfall and a line with points for water level over time. The visualization uses two scales, time on the x-axis, and separate linear scales for the bar and line values. Panning and zooming are implemented via d3.zoom, rescaling both axes and updating the shapes. Data is loaded from two CSV files using d3.csv, and all elements are rendered as SVG.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar and Line chart

This example combines a bar chart of effective rainfall with a line and circle overlay of water level, both plotted against a shared time axis. The dual y-axes use independent linear scales, while the x-axis uses a time scale. Built with D3 v5, it renders to SVG and supports zooming via `d3.zoom`, which rescales all axes and re-renders bars, circles, and a line path generated with `d3.line`. The data is loaded from two CSV files hosted on VizHub. The chart initially displays the full dataset before user interaction.

SShane Carey

93% match

Loading thumbnail…

Basic bar+line chart

This chart combines a bar chart and a line chart in a single SVG visualization, with bars representing one data series and a line overlaid for a second series. It is built as a reusable template driven by a CSV file, where column names for the x-axis, bar values, and line values are configured in the code. The x-axis uses a band scale for categorical years, while the y-axis is linear and shared by both series. Blue bars show the primary values, and a green line connects the secondary values, with a legend distinguishing the two. The chart includes axis labels, a title, and a hover effect on the bars.

EEleonore9

78% match

Loading thumbnail…

White Hat Bar Chart

This example shows annual rainfall totals from 2014 through 2021 as a simple bar chart, with each bar’s height encoding millimeters of rain and axes labeled for both year and rainfall length. The visualization is built with D3 v7 in an SVG container, using `d3.scaleBand` to position bars and `d3.scaleLinear` to map rainfall values to pixel heights. The code loads data from an external CSV file via `d3.csv`, then renders bars with `container_g.selectAll(".bar")` and adds bottom and left axes using `d3.axisBottom` and `d3.axisLeft`. A rotated text label and custom tick format (`d + "mm."`) annotate the chart.

PPranay Matalia

78% match

Loading thumbnail…

Line Chart

This line chart visualizes yearly rainfall data from 2000 to 2004, with the line smoothly interpolated through the data points. The chart displays the title "Yearly rainfall," labeled axes for "Year" and "Rainfall," and gridlines for readability. Using D3 v5, the code employs `select`, `csv`, `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG. The data comes from a local CSV file, and styling is applied via external CSS.

LLakshmipriya-kalapala

77% match

Loading thumbnail…

Multiple Instances

Two linked line charts visualize water level readings over time for two well locations. The upper chart displays the full dataset, while the lower chart contains a brushable axis. Dragging the brush updates the upper chart’s x-axis domain to the selected time range, filtering both charts to that interval. The visualization uses d3.csv, d3.scaleTime, d3.scaleLinear, and d3.brushX to manage data loading, scaling, and interactive selection, rendering paths and circles as SVG elements.

Ssleyus

77% match

Loading thumbnail…

Line Chart

This line chart displays yearly rainfall data from 2000 to 2004, using data from Data Canvas - Sense Your City. The visualization shows a smooth curve connecting rainfall measurements across the years, with labeled axes for year and rainfall amount. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the path, and `axisLeft` and `axisBottom` for the chart framework. The SVG rendering includes a title, axis labels, and tick marks with custom styling.

Nnikeshkv

76% match

Loading thumbnail…

Brush, Trendline, Legend, Title, Linechart, Barchart

This example combines a line chart and bar chart to explore groundwater levels at the Bog of the Ring, comparing two observation wells against effective rainfall. A brushed time-series chart filters the main visualization, updating a least-squares regression trendline and its equation. The main chart renders blue and orange lines for well measurements with a bar chart for rainfall, using d3.brushX, d3.nest, and d3.scaleTime. Data loads from CSV files, with SVG rendering and a categorical color legend.

LLiuXiangYuan

76% match

Loading thumbnail…

Area Chart

This area chart visualizes rainfall measurements over time, with a smooth curve showing yearly rainfall trends and a blue-filled region beneath the line emphasizing the data’s magnitude. The chart uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `area` and `line` generators with `curveBasis` smoothing, and `axisBottom`/`axisLeft` for ticks. Data comes from a CSV file loaded via `csv()`, with year and rainfall values parsed as numbers.

LLakshmipriya-kalapala

75% match