Time Preference

100%

Time Preference

✓ Published1🌍 Public

Last edited Dec 2, 2020

Created on Nov 29, 2020

This visualization compares cumulative net benefits of two programs over time, showing both discounted and undiscounted values in a small-multiple panel. The code uses d3.scalePoint, d3.scaleBand, d3.scaleLinear, and d3.cumsum to compute cumulative sums, while React components render SVG axes and line marks. Data is loaded from a CSV via d3.csv, with a fixed 10% discount rate applied to costs and benefits. The split panel design highlights how discounting alters long-term benefit trajectories.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Time Preference

This example visualizes the cumulative net benefit of two programs over time, comparing undiscounted versus discounted cash flows. Two smoothed line series per program show how discounting reduces future benefits, with dashed lines representing raw cumulative net benefits and solid lines showing discounted values. The visualization uses React components with D3 scales (`scaleLinear`, `scalePoint`) to map years and currency values, while `d3.line` with `curveNatural` generates the paths. Data comes from a CSV file processed with `d3.csv`, where costs and benefits are discounted at 10% annually.

WWaseem Medhat

94% match

Loading thumbnail…

Fork of Time Preference

This chart compares the cumulative net benefits of programs over time, contrasting the raw totals with values discounted by a 10% annual rate. It calculates these series via `d3.groups`, `d3.cumsum`, and `d3.extent`, then renders them as natural curves using `d3.line` with the `curveNatural` method. Dashed, semi-transparent lines depict the undiscounted sums while solid lines show discounted figures, with the SVG output built in React and scales from `d3.scalePoint` and `d3.scaleLinear`. Data is fetched from a CSV using `d3.csv`.

MMarcelo

85% match

Loading thumbnail…

Working with Time

This example shows monthly gross profit and units sold over time, with two line charts sharing a time axis. It uses D3 v5 and React, loading data from a CSV file via `d3.csv`. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, while `line` draws the paths. The visualization compares two metrics across the same 2020–2021 period, with points and lines styled from the data.

Ggabrielribeirob

68% match

Loading thumbnail…

Project Breakdown

This visualization displays a breakdown of time spent on tasks within a project, organized hierarchically by category, task, and item. Three horizontal bands of rectangles, colored by category via `d3.scaleOrdinal`, show cumulative durations positioned with `d3.scaleLinear`, while `d3.scaleBand` lays out the levels. Hovering reveals tooltips from `tippy.js`, and labels show approximate hours per category. The React-based SVG chart loads CSV data using `d3.csv` and aggregates it with `d3.groups`, `d3.sum`, and `d3.cumsum`.

WWaseem Medhat

67% match

Loading thumbnail…

Line practice

This example shows a time series of percentage values plotted as a connected scatter plot, where each point is color-coded (green, amber, or red) based on its value’s threshold against 50% and 75% reference lines. The React-based visualization uses d3’s `scaleTime` and `scaleLinear` for axes, `line` to draw the main trend and dashed threshold lines, and CSV data loaded via `d3.csv`. Point colors are assigned with a custom `colorDot` function, and interactivity is limited to a native SVG `<title>` tooltip showing the raw percentage value.

333Bambam33

67% match

Loading thumbnail…

Multiple Line plot with Dropdown

This visualization displays health expenditure trends in the US, showing multiple lines for different age groups over time. It uses D3.js v5 with SVG rendering and animated transitions to draw the line chart. A dropdown menu allows users to select different expenditure columns, triggering a smooth 1.5-second transition animation that redraws the lines. The chart includes a color legend for age categories and uses D3's `scaleTime`, `scaleOrdinal`, `nest()`, and `line()` APIs.

KKhatera Alizada

66% match

Loading thumbnail…

Overlapped Barchart

This visualization uses a React component to render an overlapped barchart in SVG, displaying percentage values across five time periods from survey data. The code loads JSON data via d3.json, then constructs scales with d3.scaleBand and d3.scaleLinear to map time periods and values to x and y coordinates. Overlapping bars are drawn as semi-transparent green rectangles with rgba(200,255,220,.9) fill, allowing underlying bars to show through when values decrease over time. The chart omits axis labels and focuses solely on the bar geometry, with data sourced from the timeperiod.json file.

AAnimesh Nautiyal

66% match

Loading thumbnail…

Overlapped Barchart9

This visualization overlays a semi-transparent bar chart and a line graph to show changes in a percentage metric across overlapping time periods, with each bar labeled and tooltips revealing start and end dates. The React app loads JSON data containing survey periods (e.g., NFHS3, NFHS5) and uses d3.scaleTime, d3.scaleLinear, and d3.line to draw SVG elements. Animated hover interactions are handled via React’s onMouseOver and onMouseOut, while d3’s selection API manages the tooltip’s opacity transitions.

AAnimesh Nautiyal

66% match