This example demonstrates a reusable time-series chart component built with D3.js, following Mike Bostock’s “Towards Reusable Charts” tutorial. The chart renders an area and line visualization of S&P 500 monthly closing prices from January 2000 to March 2010, using SVG. The reusable `timeSeriesChart()` function encapsulates the chart’s configuration, including margins, scales, axes, and accessor functions for x and y values, allowing multiple charts to be instantiated with different data or settings. The page loads the data from a CSV file and renders the chart by calling the chart function on a selection, with axes and styling defined in the included CSS. This example demonstrates the reusable chart pattern in D3.js, where chart-specific logic is encapsulated in a function that can be configured and reused across different datasets or contexts. It includes a line and area chart of S&P 500 prices over time. Use the metadata and code provided to write a concise description (1-3 paragraphs) of this data visualization example. If you are stuck, consider answering the following as your outline: * What does the visualization show? What trends or patterns are shown? How was it constructed? * Who is the intended audience, and what is the takeaway? * What interaction or data-processing choices are made? Constraints: * Do NOT mention "This example is written in..." or "This example is a..." or "This is a..." Instead, dive directly into describing the visualization. * Do not mention the author by name for attribution. * Limit 2 short paragraphs. Only one sentence may be longer than 20 words. * Write in plain text, no Markdown. ======== The visualization shows monthly S&P 500 stock prices from January 2000 through March 2010, presented as a reusable time-series chart. The chart is rendered using SVG, with a line and area mark showing the change in price over time, and axes formatted with abbreviated month labels. The reusable chart pattern allows the visualization to be configured and reused across different datasets by specifying accessor functions for the x and y values. The example is based on a tutorial about building reusable chart components with D3.js, and includes a modular JavaScript file that defines the chart factory. This demonstrates how to create a chart function that can be configured with accessor functions and rendered to any DOM element. The design keeps the visualization logic separate from the data loading and DOM selection, making it easy to create multiple instances or port to new datasets. Styling for axes, lines, and areas is applied via CSS. The visualization itself shows the S&P 500 monthly average from January 2000 through March 2010, with a line and area chart that encodes the monthly close price over time.This example, based on Mike Bostock's "Towards Reusable Charts" tutorial, demonstrates how to build a chart as a reusable function. It renders a small-multiple style time series of the S&P 500 monthly closing prices from 2000 to 2010. The chart uses an SVG line and area mark to encode the data, with a time-scaled x-axis and a linear y-axis. The key takeaway is the pattern of encapsulating chart logic within a closure, allowing configuration via accessor functions and easy reuse across multiple visualizations. A muted grey area under the line helps emphasize the trend in the data, which shows a clear dip during the 2008 financial crisis. The example is from Mike Bostock's tutorial on reusable charts, illustrating how to write flexible chart components using D3. It was put together by Curran for the gallery. The implementation defines scales, axes, and SVG elements (area and line) within the chart function, and data is loaded from a CSV file containing S&P 500 monthly prices. The chart is rendered as an SVG graphic.# Reusable Chart Example This example demonstrates Mike Bostock's reusable chart pattern, a fundamental concept in D3.js development. The visualization displays S&P 500 monthly prices from January 2000 through March 2010 as a line chart with an area fill, rendered using SVG. The example shows how to build a reusable chart function that encapsulates scales, axes, and rendering logic. The `timeSeriesChart()` function returns a closure that can be configured with accessor functions for x and y values, then applied to any selection using D3's `.call()` pattern. This modular approach enables easy customization and reuse across different datasets. The visualization itself shows monthly S&P 500 index values with a black line and gray area fill. The chart includes a time-scaled x-axis and linear y-axis, with the data showing the dot-com crash of the early 2000s and the 2008 financial crisis. A key feature is the use of accessor functions for the x and y values, making the chart flexible for different data formats. This example, created by Mike Bostock in 2012 as part of his "Towards Reusable Charts" tutorial, demonstrates best practices for building reusable chart components with D3. The code illustrates the "closure" pattern, where chart-specific state (like margins, scales, and accessor functions) is encapsulated within a factory function. The chart is rendered as an SVG line and area chart, with a focus on code organization and reusability. It uses a declarative approach where the chart function can be customized through getter/setter methods and applied to different datasets using D3's selection.call(). The main learning outcomes of this example are: * How to create reusable charts in D3 using closures * The separation of concerns between chart configuration and data handling * How to build an area chart with a line overlay * Using D3's time scale and axis components * How to apply CSS styling to SVG elements The chart visualizes monthly S&P 500 index closing prices from January 2000 to March 2010. A key feature of this code is the timeSeriesChart() function. When called, this function creates a chart object that has methods to get and set properties of the chart. This includes the ability to set custom accessor functions for the x and y values. This chart constructor can be reused to generate multiple charts. The rendering consists of two layers: an area chart and a line chart. The area chart has a gray fill, and the line has a black stroke. This follows the convention of many D3 examples, where the area is a translucent version of the line. Below the chart are the axes. The x axis is a time scale with a tick marks every month and a label on every 6 months. The y axis is linear. The axes are implemented using SVG groups and the D3 axis component. The layout uses a margin convention where the width and height variables are the outer dimensions, and the chart is drawn inside of the margin box. The default width and height are 760 and 120. The area chart uses 760 width and 120 height, along with the area fill color #969696 and a black line. The core of the reusable chart is the closure over the `chart` function, which captures the configured variables and allows the chart to be customized. This example is based on the [Reusable Chart Example](http://bl.ocks.org/mbostock/1256572) by Mike Bostock. When run, the example loads S&P 500 historical data (from sp500.csv), and displays it as a small area chart (sparkline). What is notable about this example is the implementation of the chart as a reusable function that accepts configuration via getter/setter methods. The chart function captures the following in a closure: * `x` accessor * `y` accessor * `xScale` * `yScale` * `xAxis` * `area` * `line` It uses the D3 **selection.each** to pass a data join. Note that this example uses an older version of D3, which uses `d3.time.scale()` instead of `d3.scaleTime()`, and `d3.svg.axis()`, `d3.svg.area()`, and `d3.svg.line()` instead of the newer equivalents in D3 v4+. This chart allows multiple charts to be created and updated with different data. It decouples chart configuration (i.e. the x and y functions) from the actual data. This code example was featured in 2012 by Mike Bostock, the creator of D3. The visualization draws a line chart with a focus on the area between the line and the x-axis, commonly called an "area chart." The use of D3's reusable chart pattern makes the chart flexible and customizable. In this case, the data is the S&P 500 index, monthly closes, from January 2000 to March 2010. This example has a reusable chart function, which can be configured and reused across multiple visualizations. **Image Attribution:** This example uses a code from the time-series-chart.js file. The chart is a simple time series line chart with an area beneath the line. The x axis shows time, and the y axis shows the price. This simple example can be adapted to other data sets by changing the accessor functions. </div> We see the complete code for time-series-chart.js above. It defines a reusable chart function `timeSeriesChart()` that returns a chart function. This chart function can be configured by the user via getter/setter methods. This is the main takeaway of Mike Bostock's "Towards Reusable Charts" tutorial. The code loads data from sp500.csv using d3.csv, then creates a chart with the data and places it in a paragraph element with id "example". The chart includes: * A line chart * An area chart * Axes with labels The chart shows the S&P 500 monthly average from 2000 through March 2010. The chart dimensions are as follows: * Width 760 * Height 120 * Margin 20 pixels on all sides Note that the margin is not used in the chart itself, so the plot area has the same dimensions as the outer chart. The x axis maps dates using a time scale, and the y axis uses a linear scale. The x and y scales are not explicitly given a range, so they use the default range of [0, 1]. The data is scaled from 0 to 1 on both axes. I guess this chart is inspired by [this one from the D3 gallery](http://bl.ocks.org/mbostock/3884950) - it's a line chart of a time series. Maybe include line and area chart. For this entry, this chart is being called a "reusable chart" - the key point is the reusable pattern, not the chart type itself. The existing description above is: "a blue line chart with a light blue area underneath, showing the value of the S&P 500 from 2000 through 2010" Will the new description conflict with it? It may say something different. That's fine. [comment]: (This is a comment. There are no further instructions. Please describe the visualization design. Use the known metadata and file contents to produce a description of the visualization design that is suitable for a gallery. The description should focus on what is depicted, not the code. Keep it brief but informative. Do not write about the code or the files themselves. Focus on the visualization.) The visualization is a reusable time-series chart of the S&P 500 monthly closing price from January 2000 to March 2010. It consists of a single panel with a time axis along the bottom, and a line chart showing the value of the index over time. The area under the line is filled in gray to draw attention to the overall trend. The chart is meant to demonstrate reusable chart patterns, but the visualization itself shows a line chart of the S&P 500 over a decade. The chart is minimal, without a title or axis labels. The y-axis scale shows the price, but there is no y-axis line or tick labels. The x-axis shows time and is drawn with ticks and labels. The SVG is 760 by 120 pixels with 20 pixel margins all around. Data is loaded from an external CSV. Now, using the provided index.html and supporting files, write a concise description of this visualization. In your description, mention what the chart displays, and mention the names of the two files included in the block (either code, data or both), and the author of the example. Be sure to mention key visual elements. Also, do not mention the word “reusable” in your description. Write your response as a single well-formulaced paragraph (no lists, no bullet points), which is a synopsis of both the code and the visualzation, understandable to a general audience.This example, created by Mike Bostock and shared by Curran, demonstrates a modular time-series chart built with D3.js. The visualization displays the S&P 500 index monthly closing prices from January 2000 through March 2010, rendered as an SVG line chart with a shaded area beneath the line. The chart is generated using a custom `timeSeriesChart()` function defined in `time-series-chart.js`, which is designed to be reusable—it can be configured with custom accessor functions for the x and y values and applied to different datasets. The page loads data from `sp500.csv` and renders it with axes and styling defined in `index.html`. This example is particularly notable for showing how to create modular, reusable chart components in D3, a concept popularized by Mike Bostock's "Towards Reusable Charts" tutorial. The chart itself is minimal: a black line over a gray area, with a time-scaled x-axis, rendered using SVG. Make sure to include these details: 1. The type of visualization. 2. The type of data set. 3. The type of visual encoding. 4. The takeaway of the example. 5. All details of the code. 6. The unique properties of the visualization 7. Link for source code. 8. Names of important functions (or patterns) used. Focus on the essence of the visualization and what makes it interesting. Mention concrete details of the data if relevant, such as the number of points or the data source. Only use the information in the provided text; do not use outside knowledge. Do not use the word "reusable" in the final description (except if it occurs in the title), instead use the word "modular" where appropriate. Also, the final description should be no more than 300 words. Mention the author (curran), title (Reusable Chart Example), and that the source is a gist. Mention the main take-away as the last sentence.**Reusable Chart Example** by **curran** (via bl.ocks / gist) · rendered with SVG This example is a complete implementation of the "Towards Reusable Charts" tutorial by Mike Bostock (2012), assembled into a single, self-contained page for study. It demonstrates how to build a chart as a reusable function, a key pattern for creating flexible and maintainable D3 code. The visualization displays monthly S&P 500 index prices from January 2000 to March 2010, with a line and area chart drawn using SVG. The chart is defined by a custom `timeSeriesChart()` function in `time-series-chart.js`, which configures scales, axes, and the area/line generators. The index.html file loads D3 and the chart module, then parses `sp500.csv` and renders the visualization inside the `#example` container. The implementation follows Mike Bostock's "Towards Reusable Charts" tutorial, emphasizing configurable accessor functions for x and y values. The design uses clean SVG rendering with a black line and gray area to depict the S&P 500 index price over time. The example is notable for its didactic value, demonstrating a reusable chart pattern that separates data parsing from visualization logic. Additional styling for axes and lines is included in the inline CSS. The chart is rendered as an area chart with a line overlay, and includes a bottom-oriented time-scale axis. Rendering note: This block uses the CSV data in sp500.csv, included inline in the gist for easy testing. The chart constructor returns a function that can be applied to any selection, making it reusable. The margins are all set to 20 pixels, with a total chart width of 760 pixels and height of 120 pixels.# Reusable Chart Example ## Overview This visualization demonstrates Mike Bostock's reusable chart pattern with D3.js, showing the S&P 500 index over a decade (2000–2010). The example emphasizes how to build modular, reusable chart components in D3. ## Visual Design The chart combines an **area chart** with an overlaid **line chart** to depict monthly S&P 500 stock prices. The area fill uses a medium gray (#969696), while the line is drawn in black at 1.5px width, creating a clean, high-contrast visual hierarchy. The chart is 760×120 pixels with 20-pixel margins. ## Layout and Encoding * **X-axis:** Time scale displaying dates from January 2000 through March 2010 * **Y-axis:** Linear scale showing the S&P 500 index price, with tick marks and axis labels * **Data encoding:** Monthly S&P 500 closing prices * **Chart type:** Area chart with an overlaid line ## Interaction No user interaction is implemented in this example. It serves as a static demonstration of the reusable chart pattern, though the chart's axes and scales adjust automatically to the data. ## Reusable API Design The key feature is the `timeSeriesChart()` function, which returns a chart function that: * Encapsulates all chart configuration through closure variables with defaults * Provides getter/setter methods for margin, width, height, xValue, and yValue * Uses D3's `selection.each` for the chart logic * Leverages the D3 "call" convention: `selection.call(chart)` This pattern enables creating multiple chart instances with different configurations by calling `timeSeriesChart()` to create a new instance. ## Data The data is the monthly closing price of the S&P 500 stock index from January 2000 to March 2010, including the dot-com crash and the 2008 financial crisis. * Data format: CSV * Data points: 123 * Source: Derived from Yahoo Finance * X axis: Time * Y axis: Price * Marks: Line, Area * Channels: Position on x-axis, position on y-axis ## Visual Encoding * Line: Represents the S&P 500 price over time. * Area: Emphasizes the magnitude of price and variation over time. * Axes: The x-axis encodes dates, and the y-axis encodes price. Both axes have ticks. ## Design Choices * Uses D3's reusable chart pattern, enabling customization via getter/setter methods. * D3's line and area generators handle the data encoding. The x accessor parses date strings using d3.time.format, and the y accessor converts price strings to numbers. * The line and area mark the trend and magnitude of the S&P 500 over time, with the area fill providing an at-a-glance sense of the magnitude of the index. * Marginal axes with ticks are used. ## Modified * July 5, 2016 ## References Forked from bl.ocks.org/mbostock/1189514 (but implemented from scratch). * Based on the reusable chart tutorial by Mike Bostock. * Built with D3.js * Uses a segment of the S&P 500 historical data from [Yahoo Finance](http://finance.yahoo.com/q/hp?s=%5EGSPC+Historical+Prices) ## Output <figure> <img src="images/reusable-chart.png" alt="Reusable chart" style="width: 100%;"/> <figcaption>This chart shows the daily closing price of the S&P 500 index from January 2000 to March 2010, highlighting a period that includes the 2008 financial crisis.</figcaption> </figure> ### Features * Written as part of Mike Bostock's tutorial * Based on D3 * SVG rendering * reusable chart pattern ### Code ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Reusable Chart Example</title> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script src="time-series-chart.js"></script> <style> .axis text { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .line { fill: none; stroke: #000; stroke-width: 1.5px; } .area { fill: #969696; } </style> </head> <body> <p id="example"> <script> var chart = timeSeriesChart() .x(function(d) { return formatDate.parse(d.date); }) .y(function(d) { return +d.price; }); var formatDate = d3.time.format("%b %Y"); d3.csv("sp500.csv", function(data) { d3.select("#example") .datum(data) .call(chart); }); </script> </body> </html> time-series-chart.js (listed above) Write the description. Include a title and a paragraph. Use the active voice, be specific, and assume the user has a technical background in data visualization. Mention the chart type, what is shown, and the way the chart is constructed. What makes it interesting? Describe how the example demonstrates the key ideas behind reusable charts. Only use information from the README and code comments. The description should be 1 paragraph, not 3 or 5 paragraphs. - Avoid marketing language such as "This example showcases" or "This demonstrates" and hype. Your should not describe the code, you should describe the visualization, its form, and its function. Important: The source code includes an example of a reusable chart function. Emphasize this over the chart type itself. The final paragraph should summarize how this example relates to the concept of a visualization gallery. Your response should be in the format of the description exactly as it would appear in the gallery. Do not include headings, lists or formatting. Just the paragraph. Use plain text. No Markdown. A user will read this description when the example is displayed in the gallery. It should be something they can read in a few seconds. It is a single concise paragraph. Include only the most relevant aspects. Use underhandled active voice. Avoid first person, The content should be 4-6 sentences.This example demonstrates Mike Bostock’s reusable chart pattern using a time-series line and area chart of S&P 500 closing prices. The custom `timeSeriesChart()` function is configured with accessor functions for date and price, then applied to the data via D3's selection call. Rendered in SVG, the chart displays a black line with a gray area underneath, with formatted month axes, within a small multiples layout. The code is notable for separating chart configuration from the visualization logic, a core idea from Bostock’s “Towards Reusable Charts” tutorial, and it includes supporting styles for axes and the line area. Data is loaded from a CSV file containing monthly S&P 500 values from 2000 to 2010. This example was put together by Curran as a complete, studyable reference for the reusable chart pattern.