Fork of Time Preference

100%

Fork of Time Preference

✓ Published0🌍 Public

Last edited Apr 10, 2021

Created on Apr 10, 2021

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`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Time Preference

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.

WWaseem Medhat

85% match

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

85% match

Loading thumbnail…

Fork of Time line chart

This line chart visualizes temperature readings over time, with each data point marked by a circle and connected by a smooth natural curve. The visualization uses React components for rendering SVG elements, with D3 v5 functions like `scaleTime` and `scaleLinear` to map data to coordinates, and `curveNatural` to smooth the line. The chart includes labeled axes for time and temperature, with tick marks styled via CSS. The data is loaded from a CSV file of weekly San Francisco temperatures using D3's `csv` parser.

NNart Williamson

74% match

Loading thumbnail…

Fork of Working with time

This interactive line chart visualizes temperature variations over time, using D3’s `scaleTime` and `scaleLinear` to map the data from the San Francisco week temperature CSV onto an SVG canvas. A natural curve connects the points, with circles marking each hourly reading, providing a clear temporal trend. Axis components—custom React modules `AxisBottom` and `AxisLeft`—render labeled ticks, while the `Marks` component employs D3’s `line` and `curveNatural` for the smooth path. Built with React and D3 v6, the chart uses the `csv` function to load data and SVG for rendering.

RRMartins11

72% match

Loading thumbnail…

Fork of Working with Time

This visualization plots temperature over time as a smooth line chart using React and D3 v5. The temperature data is loaded from a CSV file via `d3.csv` and rendered with SVG paths using D3’s `line` and `curveNatural` generators. Axes are built with `scaleLinear` for both dimensions, with custom React components for the bottom and left ticks. The chart includes labeled axes for "Time" and "Temperature," and while circle marks are defined in the code, they are currently commented out, so only the dark grey curved line is displayed. The styling applies custom fonts and bold axis labels via an external stylesheet.

李李文韬

71% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes the relationship between time and gross profit (labeled "Temperature") using a dataset from Data Canvas Sense Your City. The visualization is built with React and D3 v5, leveraging `d3.scaleTime` and `d3.scaleLinear` for the axes and `d3.csv` to load the data. Axes are rendered as custom components (AxisBottom, AxisLeft), while individual data points appear as SVG circles with tooltips formatted via `d3.timeFormat`. The chart uses the Poppins font and a clean design, with axis labels and tick marks styled distinctly.

Ggabrielribeirob

71% match

Loading thumbnail…

Fork of D3 course - working with time series

This visualization shows the daily Federal Funds borrowing rates over time, displayed as a smooth curved line chart with data points colored on a gradient from blue to red based on their value. Built with React and D3 v7, it uses `scaleTime` and `scaleLinear` to map dates and rates to SVG coordinates, with custom axis components and a line path generated via `d3.line` with cardinal tension. The data is fetched from a CSV file containing historical rate values, and the chart includes interactive tooltips showing the exact date and rate for each point.

RRobFaj

71% match

Loading thumbnail…

Fork of Working with Time

This visualization displays temperature over time as a scatter plot, with each circle representing a timestamped measurement. The React application uses the d3.scaleTime and d3.scaleLinear APIs to map data to SVG coordinates, and d3.extent to compute domain ranges from the dataset. Data is loaded asynchronously from a gist URL using the d3.csv parser. The SVG rendering includes custom axis components that rotate bottom tick labels for readability, and each data point includes a tooltip displaying the formatted date. The visualization uses the D3 v5 library and React 16.9 for its component-based architecture.

AabhishekGNS

71% match