Fork of Fork of HydrographV2.3 Tooltips/Brush Working with dots and line

100%

Fork of Fork of HydrographV2.3 Tooltips/Brush Working with dots and line

✓ Published0🌍 Public

Last edited Dec 1, 2022

Created on Dec 1, 2022

Five small multiples show government budget revenue and projections across several multi-year periods. Two line charts plot actual versus projected revenue, two three-axis line charts compare fiscal year metrics, and one grouped bar chart displays funding categories. All render as SVG with D3 v7 transitions, using scales like `scaleLinear`, `scalePoint`, and `scaleBand`, with axes customized via `axisRight` and `axisBottom`. Data comes from CSV files loaded with `d3.csv`.

AI-generated description

First Chart

Fix Tooltips fix X Axis display (Aug. /n 2021) Fix y Label(flip if possible) Add $ to XAxis Get Colors and Formatting nailed down add legend click function

Second Chart

Add Tooltips X Axis display (2001- /n 2002) Fix Y label(flip) Add legend hover

Third Chart

fix blue dots remove 0's

Forth Chart

fix blue dots remove 0's

Fifth Chart

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HydrographV2.3 Tooltips/Brush Working with dots and line

This interactive dashboard displays a multi-chart hydrograph visualization tracking federal funding, revenue, and crude oil production data through a combination of line charts and grouped bar charts. The visualization uses React with D3.js (v7) to render SVG elements with animated transitions, showing both actual and projected values across time series data. Notable features include multi-axis line charts displaying three different metrics simultaneously, bar charts comparing historical revenue against projections, and tooltip and brush functionality for interactive data exploration. The implementation leverages D3's scaleLinear, scalePoint, scaleBand, and transition APIs to coordinate the animated rendering across five coordinated chart panels.

Nnicolekevans

89% match

Loading thumbnail…

Fork of HTML Starter -- zoom works-

This interactive line chart displays hydroelectric data over time, with values fluctuating around 1692. The visualization uses a brush mechanism to enable zooming into specific date ranges, dynamically updating the x-axis scale. Built with D3.js v6, the chart renders an SVG path and allows users to select a time window by dragging across the plot area, with axes and scales computed from the CSV data.

Nnicolekevans

76% match

Loading thumbnail…

Fork of Brush, Trendline, Legend, Title, Linechart, Barchart

This fork of a D3.js example combines a line chart of EPA groundwater monitoring levels with a bar chart of effective rainfall for the Bog of the Ring. A brushed time-series chart filters both views synchronously, and a dashed trendline with its equation updates based on the selected date range. The code uses `d3.brushX`, `d3.scaleTime`, `d3.axisBottom`, and `d3.nest` to build the SVG rendering, with `d3.csv` loading the two datasets. A color legend distinguishes the observation wells and rainfall series.

AAndre J Denais

75% match

Loading thumbnail…

Fork of Fork of Stylized Line Chart

This interactive line chart visualizes 20,000 synthetic temperature readings over time, rendered as SVG paths using D3’s `line` and `area` generators within a React framework. Users can brush horizontally to zoom into finer levels of detail, switching between area and line representations while tooltips display exact timestamps and values. The data is preprocessed into multiple levels of detail, reducing points per view to maintain performance. D3 scales (`scaleTime`, `scaleLinear`) and axis components handle the coordinate system, with brush interactions powered by `brushX` and event listeners.

RRajat Dangat

75% match

Loading thumbnail…

Fork of Fork of Brush, Trendline, Legend, Linechart, Barchart

Two linked line charts, built with D3 v5, visualize EPA groundwater monitoring data from two observation wells. The main chart displays a trendline calculated with a least-squares regression, while a smaller brush chart allows users to select a date range. The brush selection filters the data and updates the trendline and its equation in the main chart, with a color legend distinguishing the wells.

AAnthony Zornig

74% match

Loading thumbnail…

Fork of Fork of d3NoobV5 Reusable Examples - Line Types Chart

This example compares eight D3 line interpolation methods—curveLinear, curveStep, curveStepBefore, curveStepAfter, curveBasis, curveCardinal, curveMonotoneX, and curveCatmullRom—by rendering the same financial time series with each. Using d3.axisBottom and d3.axisLeft, it draws axes on an SVG while overlaying green and orange reference lines from the same dataset. The reusable chart pattern, based on Mike Bostock’s “Towards Reusable Charts” and the Pro D3 structure, animates the lines via D3 v5 transitions. Data comes from a CSV file with date and close prices.

JJimMaltby

74% match

Loading thumbnail…

Fork of Fork of Fork of Line_Stroke_Death

This fork of Line_Stroke_Death shows restaurant sales counts over time, with a smooth green curve plotted on a scatter-free line chart. The visualization uses D3 v5 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to generate the SVG path. It loads CSV data from a GitHub gist, parses numeric fields, and renders axes with custom labels. The chart includes a title, rotated y-axis label, and styled stroke using the CSS class `.line-path`.

Mmaheganesh

74% match

Loading thumbnail…

Fork of Multiple Line Chart

This visualization displays military spending trends from 2001 to 2020 across multiple countries, with each country’s annual spending plotted as a line over time, and the aggregated data using all points rather than separating by nation. It employs D3 v5’s `scaleLinear` for both axes, `line` with `curveBasis` to smooth the path, and `nest` to group the dataset by country, though the chart ultimately draws a single combined line. The SVG rendering includes custom axes with gridlines, a title, and axis labels, sourced from a CSV file containing country, year, and spending values.

KKinjal-Goyani

74% match