Chart Controls II

100%

Chart Controls II

✓ Published0🌍 Public

Last edited Jan 10, 2017

Created on Jan 10, 2017

Three line charts compare monthly values for Europe, Asia, and America, with users selecting a region via radio buttons to highlight one series while the others remain visible. Dashed grid lines and labeled axes provide reference points, and the selected path updates in place through a transition animation rather than fading in and out. The visualization uses D3 v3 APIs including `d3.time.scale`, `d3.svg.line`, `d3.svg.axis`, and the `transition` method, with data loaded from a TSV file.

AI-generated description

Built with blockbuilder.org

A little change from the previous one:

Adding grids
Path animated by transition, not the css opacity attribute.

mit Licensed

Similar vizzes

Loading thumbnail…

Chart Controls I

This example demonstrates an interactive multi-series line chart where users can toggle the visibility of data for Europe, Asia, and America using radio buttons. The chart renders three time-series lines from a TSV file, with each line colored via a categorical scale. The code uses D3 v3’s `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` for scaling and axes. Radio button changes apply a CSS class to hide or show entire paths within the SVG group.

11Cr18Ni9

88% match

Loading thumbnail…

Chained Transitions

This example shows a line chart of daily temperatures for New York and San Francisco, with radio buttons to switch between the two cities. When a button is clicked, the line and its label first animate to the new data values, and then the y-axis rescales to fit the new range. Built with d3.v3, the SVG chart uses d3.time.scale, d3.scale.linear, d3.svg.line, and d3.svg.axis, and chains two d3 transitions to sequence the line movement and axis update.

Mmbostock

76% match

Loading thumbnail…

D3 Chart

This example displays six D3.js charts—horizontal and vertical bar charts, a line chart, an area chart, a pie chart, and a donut chart—all rendered as SVG elements. Each visualization uses the d3.csv function to load population data by country from a local CSV file. The code applies d3.scaleLinear and d3.scaleBand for axes, d3.line and d3.area with curveBasis for path generation, and d3.scaleOrdinal with schemeSet2 for categorical colors, while d3.axisLeft and d3.axisBottom create the tick marks.

Sshadreza

75% match

Loading thumbnail…

Chart Controls III

This chart animates four dimensions of global development data—life expectancy, fertility rate, population, and time—using a bubble chart. Each circle represents a country, positioned by life expectancy and fertility rate, with size encoding population via a power scale. The animation steps through years, transitioning all circles simultaneously. A dropdown menu filters the display by region. The visualization is built with D3 v3, using `d3.scale.pow` for sizing, `d3.nest` to group data by year, and the `d3.timer` function to drive transitions. Data comes from the included `lfp_all.csv` file.

11Cr18Ni9

75% match

Loading thumbnail…

Multi Line Chart

This multi-line chart shows three time series labeled Serie A, B, and C across dates in late July and early August 2019, with a y-axis labeled “Frequency.” The D3.js v5 code loads data from a CSV file, parses dates with `d3.timeParse`, and uses `d3.scaleTime` and `d3.scaleLinear` to construct axes. Lines are drawn via `d3.line` and appended as SVG paths, with distinct strokes for each series. The visualization is rendered entirely in SVG, with the final data point of each serie labeled beside the line.

JJimMaltby

74% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

74% match

Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

74% match

Loading thumbnail…

Chart2.js

This example shows a horizontal bar chart of population data for 15 countries or regions, using bars scaled linearly to represent population values. The visualization is built with React and rendered as SVG, using D3 v5’s `scaleLinear` and `scaleBand` for positioning and sizing bars. The code loads data from a CSV file, multiplies population values by 1000 to convert them to raw numbers, and appends rectangles to the SVG. It highlights the simplest D3 approach for creating categorical comparisons.

Aacervantesc

74% match