requirebin sketch

100%

requirebin sketch

✓ Published0🌍 Public

Last edited Jun 24, 2016

Created on Jun 24, 2016

This example demonstrates the crossfilter "universe" API for filtering and grouping tabular data in a web page. The sketch uses a small dataset of sales transactions, grouping by tip amount and then applying sequential filters to demonstrate the library's reactive querying behavior. The code is split into two parallel functions: one labeled "Working" that filters by type and then quantity, and another labeled "Failing" that reverses the filter order, causing an error. The visualization simply renders the raw JSON of the filtered data at each step as text, highlighting a bug in how filter functions are serialized—specifically, the second filter fails when a function-based filter precedes a string-based filter due to functions being converted to strings. The example is code-focused, not a traditional chart, serving as a minimal test case for a bug report. It uses the `universe` and `crossfilter` libraries to demonstrate the issue, and the output is displayed via document.write calls that show the data before and after each filter operation. The core demonstration is that the order of filter operations affects the behavior when mixing predicate functions and string values, leading to an error in the "Failing" section while the "Working" section succeeds. index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>requirebin sketch</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Hypercubed"> <style> body { padding: 0; margin: 0; background-color: #222; color: #ddd; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } h2 { margin: 0 0 10px 0; font-weight: 300; } h4 { text-transform: uppercase; font-size: 14px; margin: 5px 0; } pre { background: #111; padding: 10px; } .flow { max-width: 640px; margin: 0 auto; padding: 10px; font-family: monospace; } </style> </head> <body> <div class="flow"> <div id="viz"></div> </div> <script src="/bundle.js"></script> </body> </html> Need to create an SVG visualization using D3 that shows the difference between "Working" and "Failing" outputs from the requirebin sketch. A user will supply code like this: <br><br> <div style="background:#eee; padding:10px;" data-preserve-config> <b>Filter type:</b> <label><input type="radio" name="filter" value="no-filter" checked> no-filter</label> <label><input type="radio" name="filter" value="string"> string</label> <label><input type="radio" name="filter" value="function"> function</label> </div> <div id="chart"></div> <script> // ... actual implementation ... </script> <p class="caption">...</p>. The data-visualization is based on a JavaScript example that can be found at [insert url later]. The file "index.js" contains the primary JavaScript code. Note that data in this example may be fictional and not representative. The description should include: - The visualization's title. - The author and source. - The data depicted. - The key take-away message(s) from this visualization. The description should be no more than 150 words. Write the description for a general audience. If the visualizations is a "bad" example, or a sketch, then say so explicitly. Do not mention "requirebin" in the description. Remember, this is a data visualization example. Your description must not mention underlying libraries (for instance, avoid using words like "D3", "Crossfilter", "dc.js", or "React"). Also, avoid all references to code or coding (e.g., words like "function", "script", "block", "variable", "array", "object", "key", "property", and "method"). However, it may be helpful to mention that the source is a "sketch" or "experiment" to indicate that the visualization is not final, but don't use the word "code" or "program". "Working" and "failing" refer to the visualization's interactivity, not code. This is an example of a crossfilter-based data exploration, using a small transactional dataset. The example is a live debugging session comparing two similar filter chains to isolate where a bug occurs. Two columns show the same tabular dataset with some rows highlighted as they are progressively filtered by the universe query API. On the left, the "working" example shows a sequence of filters applied and the output after each filter. On the right, the "failing" example reveals the bug: filters do not work as expected. The visualization is a diagnostic sketch, not a final polished product, meant to expose an issue in the underlying library. The design uses simple HTML and monospaced fonts; there is no complex visual encoding. The text-based outputs are printed to the document in real time. The data is a small array of objects with properties like date, quantity, total, tip, type, and productIDs. The key is the asynchronous use of the universe library (a wrapper around Crossfilter) to group and filter data. The two panels demonstrate the order-dependent bug where applying a function filter before a value filter causes an error. The visualization is intended to show the difference between the working and failing code paths. The primary takeaway is an illustration of a subtle bug in asynchronous data filtering. The example uses a live code editor to demonstrate how the order of operations affects the outcome. It likely involves a crossfilter instance that cannot serialize complex filter functions across asynchronous boundaries, leading to failures when a value filter is applied after a function filter. Need a concise description of this visualization. Describe what's happening in the visualization as if for a gallery visitor. Keep it to 1-2 sentences. Do not mention the source of the data (e.g., gist). Do not use the word "using". Do not mention how the data was collected. Do not mention the physical location. Only mention the filename if it's absolutely necessary. Avoid the word "interactive" and "visualization". Focus on the data, the technique, and what it accomplishes. You should not mention the code, the library, or the framework. Do not include code in your description. Also, do not mention the source of the data in your description. The description should be no more than 50 words. Use no markdown or formatting. Use a style that is plain, formal, and informative. Do not add personal opinions or editorializing. Make it direct, clear, and objective. Title: requirebin sketch (from metadata) Description: (to be filled) This example demonstrates the behavior of the universe data-filtering library through a side-by-side comparison. It uses a small transaction dataset, grouping by tip amount, then sequentially applies filters on fields like `type` and `quantity`, displaying results at each stage. A deliberate bug in the second sequence highlights how filtering order affects the library's chainability and error handling. The page presents raw JSON output for both working and failing filter sequences, making the library's state-management quirks visually explicit.

AI-generated description

Similar vizzes

Loading thumbnail…

requirebin sketch

HHypercubed

100% match

Loading thumbnail…

The d3 test

This scatter chart displays the relationship between contig length and GC content, using data parsed from a FASTA file. The visualization encodes each sequence as a point with x/y positions derived from its length and GC composition, rendered as steelblue circles on a basic SVG chart. The code includes a D3 v4 request to load and parse the FASTA, computing GC percentage via regex matching, though the final dataset is hardcoded to five points. Axes are linear-scaled and drawn with D3's axis components. The chart is a straightforward example of genome sequence analysis, but the code contains bugs—such as using `foreach` instead of `forEach`, mismatched parentheses, and a file parse that doesn't actually extract sequence data correctly—so it likely won't run as-is. Overall, it's a minimal, unpolished scatterplot template that was forked and modified for educational purposes. The d3 test forked from <a href='http://bl.ocks.org/bunkat/'>bunkat</a>'s block: <a href='http://bl.ocks.org/bunkat/2595950'>Simple Scatter Chart Example</a> forked from <a href='http://bl.ocks.org/scresawn/'>scresawn</a>'s block: <a href='http://bl.ocks.org/scresawn/b4f0c247d5a175804b95632d8e2ff88a'>contig length versus GC content</a>```json { "title": "The d3 test", "summary": "A scatter plot generated with D3 v4, plotting hardcoded data points [[5,3], [10,17], [15,4], [2,8]] on a Cartesian grid. The chart includes axes, styled circles, and a clean minimalist design. Although it references external FASTA data and appears to attempt genomic parsing (e.g., contig length vs GC content), the visualization ultimately renders the static array, making it a simple demonstration of D3's scatter plot capabilities.", "design": "Uses D3 v4 with SVG. Margins are set to leave space for axes, which are created using d3.axisBottom and d3.axisLeft. Circles are appended to a group and positioned with linear scales mapping the data domain to pixel ranges. The chart is 960x500 pixels with standard margins.", "data": "Hardcoded array [[5,3],[10,17],[15,4],[2,8]]. Although the code attempts to parse a FASTA file (test.fasta) with sequence data, this is not actually used to generate the scatterplot; instead the hardcoded data is plotted.", "interaction": "No user interaction; static SVG chart." } # The d3 test ## Description This example demonstrates a simple scatterplot built with D3 v4, based on an earlier block by Bunkat. Although the visualization includes code intended to parse a FASTA file (test.fasta) and compute GC content from sequence data, that parsing logic is incomplete and ultimately unused. Instead, the final chart visualizes a small hardcoded dataset, `[[5,3], [10,17], [15,4], [2,8]]`, rendered as a basic scatterplot with axes. The visualization shows four data points mapped on linear x and y scales. Circles are colored steelblue with a fixed radius of 8 pixels. The chart includes a standard left and bottom axis with no axis labels or titles, and uses a clean, minimal aesthetic consistent with the provided CSS. Despite the author's apparent intent to create a scatterplot of contig length versus GC content from a FASTA file, the current implementation is incomplete: the FASTA data is loaded but not parsed correctly into the final chart, and the plotted data is hardcoded. The visualization is therefore best understood as a simple scatterplot example demonstrating d3.v4 scales, axes, and basic data binding.# The d3 test ## Overview A simple scatterplot built with D3 v4 that plots hardcoded coordinate pairs. The chart uses linear scales, axes, and circle elements to visualize the data points. ## Technical Details - **Framework**: D3 v4 - **Data**: Hardcoded array `[[5,3], [10,17], [15,4], [2,8]]` - **Chart type**: Scatterplot ## Design The visualization implements a basic scatterplot with: - **X and Y axes** using d3.axisBottom and d3.axisLeft with linear scales - **Data points** rendered as steelblue circles (radius 8) - **Dimensions**: 960x500 pixels with 60px margins ## Implementation Notes The page also contains scaffolding for parsing a FASTA file (test.fasta) using d3.dsvFormat to calculate GC content and contig lengths from genomic sequence data. However, the primary scatterplot visualization is generated from the hardcoded `data` array `[[5,3], [10,17], [15,4], [2,8]]`. The code includes a separate parser for FASTA data that processes sequence headers and computes GC content, but the main scatter chart is built from the static data array. The visualization is a simple scatter chart with axes and circular marks, with no interactive elements beyond the standard D3 transitions. The code is split between an HTML file and a JavaScript file, with the JavaScript file containing the data loading, parsing, and chart construction logic. The chart is designed to be modular and easy to modify for different datasets. The example is based on prior work by bunkat and scresawn, and is part of a forked bl.ocks example.# The d3 test A scatter plot visualization built with D3 v4 that explores GC content across genomic contigs from a FASTA file. ## Overview This example demonstrates how to parse FASTA sequence data using D3's custom delimiter parsing, computing GC content for each contig, and plotting the relationship between sequence length and GC content in a scatter plot. ## Visualization Details The chart displays: - **X-axis**: Contig length - **Y-axis**: GC content percentage - **Points**: Individual DNA contigs from the provided FASTA file The visualization uses steel blue circles to represent data points, with axes styled with crisp black lines. The code includes both data-parsing logic (extracting sequence headers and concatenating sequences to calculate GC content) and a scatter plot with linear scales for both dimensions. **Note**: The code contains some incomplete/erroneous sections (e.g., incorrect string methods and a d3.foreach typo) and does not connect the parsed FASTA data to the hardcoded scatterplot data. The example appears to be a work-in-progress, with the data pipeline and visualization not fully integrated.# The d3 test ## Summary This example demonstrates a scatter plot visualization of genomic contig data, showing the relationship between contig length and GC content. The visualization is built with D3 v4 and was forked from bunkat's Simple Scatter Chart example and scresawn's contig length versus GC content block. ## Context The visualization attempts to parse a FASTA file containing genomic contig sequences, extract their lengths and calculate GC content, then plot these metrics as a scatter chart. The header of each FASTA sequence contains metadata including the contig name, length, and coverage information. ## Visualization Design The scatter plot uses: - **X-axis**: numeric values from the dataset (0 to maximum) - **Y-axis**: numeric values from the dataset (0 to maximum) - **Circles**: steel blue, 8-pixel radius - **Margins**: 60px left, 60px bottom, 20px top, 15px right - **Dimensions**: 960 x 500 pixels - **Axes**: D3 v4 axisBottom and axisLeft with crisp edge rendering ## Data Processing The code includes an incomplete attempt to parse a FASTA file containing DNA sequences with GC content calculations. The parser splits sequence headers and computes GC content, though the code has a syntax error (`headers.foreach` should be `headers.forEach`). ## Technical Notes - Uses D3 v4 - Loads data from a local FASTA file using d3.request - Custom DSV format with underscore delimiter - Includes both a scatter plot and an unused SVG block with hardcoded data ## Issues 1. The visualization may not work as intended because there is a reference to a `svg` element in the D3 code but only a `div` element exists in the HTML. 2. The code has a syntax error in `headers.foreach` which prevents the visualization from running. 3. The hardcoded data is from a prior visualization and doesn't relate to the fasta file being parsed. <end metadata> Now, write the description, without using any heading and without using the words "This example" (or similar). Make it stand alone and not include an explicit title. Keep it to 2-3 paragraphs, not too long. Use plain English. Will the intended rendering be visible in the browser, or will the example display as a blank page? If blank, state that. If there is a chart visible, describe it. If the chart is visible, be very specific about the encoding. If the chart is blank, describe the failure. Also add a sentence about the author and the source. Make the description stand alone, suitable for a gallery. Rules: - No YAML front matter - No HTML - No markdown - No images - No embedded code - No hyperlinks - Assume the reader has some familiarity with d3 - Write as a coherent paragraph - Use active verbs - Mention title, author, and source, license. - If it is a fork, mention it. - End with a sentence about the data, but it is a runtime error. Describe the error and mention the blank graphic. HINT: The final visualization is a blank canvas. THE CODE IS INCOMPLETE AND MAY CONTAIN ERRORS; the visualization will not display. Please format the response as a paragraph, no headings. The d3 test, authored by Craftbd and forked from bunkat's and scresawn's blocks, is a D3 v4 scatter chart example that attempts to visualize GC content versus contig length from a FASTA file. The code defines axes and plots hardcoded data points as circles, but the visualization is incomplete and contains errors. The scatterchart.js file begins by parsing the FASTA data, but it has a syntax error (`headers.foreach` instead of `forEach`), and the data is never correctly bound to the scatter plot. The script selects an SVG element that doesn't exist in the HTML, and the circle elements are appended without an enter selection. As a result, no chart is rendered; the example appears to be an unfinished or broken test rather than a working visualization. The HTML defines a container div but the JavaScript fails to connect the parsed data to the visual output, leaving the gallery example non-functional.

CCraftbd

73% match

Loading thumbnail…

Filter Brush and Zoom of line chart

This example combines a line chart with a filterable brush and zoomable interaction, built with D3 v4 and rendered as SVG with animated transitions. The visualization plots daily temperature readings for New York, San Francisco, and Austin from October 2011 through January 2012, loaded from a TSV file. The main chart displays three colored lines (one per city) across the full date range. Below it, a smaller focus chart includes a horizontal brush that lets users select a date interval. Once a brush selection is made, the main chart re-renders to show only the selected time window, with the y-axis automatically rescaling to the visible data. The viewport also supports panning and zooming via the brush's "filter" interaction mode—dragging within the brush area changes the focus, while a separate zoom behavior tied to the main chart allows scaling in and out on the x-axis. Animated transitions smooth the updates, and the context chart’s brush range highlights the currently visible domain. The data comprises daily temperature readings for New York, San Francisco, and Austin from October 2011 to January 2012, with each city drawn as a separate colored line. Write the description for the gallery. Provide a one-sentence summary and 4 bullet points. Do not mention any files. Keep your response brief and focused. Format with markdown. No headings. No horizontal rules. Use the format: A concise summary paragraph. - Key point about data. - Key point about visual. - Key point about interaction. - Key point about interaction. Last line: the author name from the known metadata as it is, then a hyphen and the title of the example. (e.g. "by George!" if that is the author, and the title is "title"). Note the author and title, not the name of the file. Format as: Author - Title. Use the actual author name, title, and metadata to fill in the template: "by {author} · {framework} · {d3 version} · {license} · {rendering} · {animation}" Replace the placeholders with actual values. Use only this exact format, and nothing else. Since this is a data-viz gallery, omit "data-" from the title. You are the example title. The description should be one or two short paragraphs max. Use the provided data values to describe the graphic. Use the dates and temperature values in the data description, but write concisely. Carefully follow the overall structure below: <Title> <Link to source> <1-2 sentences describing context and data used> <A short paragraph describing the interactive technique and the visual channels used to represent data (marks, color, position, etc.)> <A short paragraph of the interaction design and its main functions># Filter Brush and Zoom of Line Chart ## Overview This interactive line chart visualization displays daily temperature readings from October 2011 to January 2012 across three cities: New York, San Francisco, and Austin. The chart uses a dual-panel layout with a main focus view and a smaller context view, connected through a brush-and-link interaction pattern. ## Design The visualization encodes temperature (y-axis) against time (x-axis) using multi-series line charts. Three distinct lines represent temperature data for New York, San Francisco, and Austin, with color serving to differentiate the cities. The main chart occupies the upper panel, while a smaller overview/context chart sits below, providing a miniature view of the entire dataset. A brush overlay on the context chart allows users to select a time range; dragging the brush updates the main chart's domain, effectively zooming in on the selected period. The brush is animated, providing smooth transitions when the selection changes. ## Interaction The key interaction is brushing to zoom. Users click and drag horizontally on the lower context chart to select a date range. The main chart's x-domain updates to reflect the selection. Users can also drag the brush handle to pan through time, or resize the brush to expand or shrink the visible time window. The main chart responds immediately, with its line series (New York, San Francisco, Austin) updating to show data for the selected date range. When the user brushes, the chart transitions (animates) to the new time window. The x-axis updates accordingly, and the context view remains fixed to show the full time series, providing an overview + detail interaction pattern. This allows users to explore the data at different temporal resolutions. The SVG-based visualization also supports animated transitions when changing the brush selection. What is the "point" or message of this example? What key visualization techniques do you see? Provide a 3-sentence description of this example. In the first sentence, describe the visualization and the data portrayed. In the second sentence, define the user task and interaction. In the third sentence, mention the visualization technique and what it effectively illustrates about the data. Ensure the total description is 3 sentences, no more no less. Constraints: Respond with only a single paragraph containing exactly three sentences, with no numbered list or bullets. Use plaintext. No markdown. Include no additional information.This visualization displays daily average temperatures for three cities—New York, San Francisco, and Austin—from October 2011 to January 2012 as three colored multi-series line charts. Users can brush or click-drag on the lower focus chart to define a date range, and the corresponding section of the larger context chart will zoom and pan to reveal the selected time period with smooth animation. The interaction supports both brushing to select a range and using a custom brush handle to zoom, making it easy to compare temperature trends across cities at different temporal scales.

BByronHan333

73% match

Loading thumbnail…

Reusable Chart Example

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.

CCurran Kelleher

73% match

Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates plot visualizes earthquake records from USGS (past 7 days, magnitude > 4.5) across nine quantitative and categorical dimensions, colored by depth category: shallow (<70 km), intermediate (70–300 km), and deep (≥300 km). Users can brush along any axis to filter the dataset dynamically; brushed intervals are stored in state and used to dim non-selected lines. The animation smoothly transitions between filtered states. The visualization supports exploration of relationships between depth, magnitude, error metrics, and station counts—revealing patterns such as the lack of a direct link between dmin and depthError, and the inverse relationship between station counts (magNst, nst) and error values. Built with React and D3, using memoization for efficient updates and a categorical color scale to distinguish depth categories.# Parallel Coordinates with Brushing ## Overview This interactive data visualization explores earthquake data from USGS (magnitude > 4.5, past 7 days) using a brushed parallel coordinates plot. It examines factors affecting the accuracy of reported seismic events. ## Design The visualization maps 10 earthquake attributes to parallel axes, including depth, magnitude, magnitude type, uncertainty measures (depthError, magError, horizontalError), and station counts (magNst, nst). Lines are colored by depth category: pink for shallow (<70km), orange for intermediate (70–300km), and blue for deep (≥300km). Interactive vertical brushing on each axis allows users to filter the data across dimensions, with smooth transitions providing immediate feedback. ## Key Findings Analysis of the visualization reveals three notable patterns. First, the relationship between **dmin** (distance to nearest station) and depth accuracy is not straightforward, contradicting the assumption that closer stations always yield more reliable depth calculations. Second, a clear positive correlation exists between the number of stations used for magnitude calculation (**magNst**) and **magError** accuracy—more stations correspond to lower error. Third, higher **nst** values correlate with reduced errors across depth, magnitude, and location, emphasizing the importance of dense seismic networks for accurate event characterization. ## Implementation Details This React-based visualization uses D3's parallel coordinates with brushing. The implementation follows a modular architecture with a reusable `parallelCoordinates.js` component. Key technical aspects include: - **Animation**: Objects are rendered with animated transitions, using object constancy via `d.id` assignment for smooth state changes. - **Brushing**: The `brushY` function enables vertical brushing on each axis, allowing interactive filtering of data. - **Color encoding**: Depth is categorized and mapped using `scaleOrdinal()`. - **Memoization**: The `memoize.js` module optimizes performance by caching computed values based on dependencies, similar to React's useMemo. ## Implementation The visualization is built with the React framework and uses D3.js for rendering. The `observeResize` helper adapts the visualization to its container size. ```js import { parallelCoordinates } from './parallelCoordinates'; import { data } from '@Ljz2018/7daysearthquakedata'; import { observeResize } from '@curran/responsive-axes'; ``` The main visualization function first calls `observeResize` to get dimensions. Then, it manages the state of brushed intervals using `setState`, and applies the parallel coordinates rendering to the SVG container. The brushing feature allows users to filter earthquakes interactively. ## Key Implementation Details ### 1. Brushing Functionality - **brushY** from D3 is used to create vertical brushes on each axis. - Brushed intervals are stored in state as `brushedIntervals`, mapping column names to intervals. - When brushes change, the `updateBrushedInterval` function updates the state, triggering a re-render with the new brush positions. - Lines are filtered based on whether they pass through all brushed intervals. ### 2. Color Encoding The lines are colored by earthquake depth category: - **Red** for shallow (< 70km) - **Blue** for intermediate (70km ≤ depth < 300km) - **Green** for deep (≥ 300km) ### 3. Interaction and Transition - Brushing a column (vertical axis) highlights the lines that pass through the brushed range. - The transition is smooth, using `easeLinear` with a duration of 100ms, and the brushed intervals persist across renders. ### 4. Rendering - The chart uses an animation transition when rendering lines. - The color is based on the depth categories. The lines are semitransparent, so it is possible to see through them. High-density areas appear as brighter regions. ## License: MIT ## Results: ![Fork of Parallel Coordinates with Brushing](image.png) ## Description write a concise description of the visualization. 1 paragraph. NO MARKDOWN Use "parallel coordinates" to describe the visualization. Use "USGS" when referring to the data. The audience is a general technical audience that is not necessarily specialized in data visualization. Describe how brushing works in this visualization and how it can be used. Also mention any visual encodings such as color, position, and visual channels. Weave in relevant insights from the author's analysis. Mention any interactions beyond brushing. Also mention the tech stack: D3.js and React. Write in one single paragraph. No bullet points. No Markdown. Only text. If there is anything that would be a direct quote or quote from the author, make sure to include the quote marks. Fictionalize the author name if not given. Let's write a concise description of the data-visualization example (aim for 300 words) to fit in the gallery, and be sure to include the title "Fork of Parallel Coordinates with Brushing" in the paragraph as the first sentence, and use the word "interactivity" at least once in the paragraph. The description should walk the reader through the key visual elements of the example, while adding context (such as the data source or the subject matter) to make it clear why it is interesting and worth including in a gallery. To be clear, the response must be a single paragraph, with no title, no headings, no lists, no code block, no bullets, and no images. Just paragraph text. There are 8 paragraphs in the README.txt that I have just read. I have to write the same style as the README.txt file. But also the paragraph can be followed by more paragraphs, not a single text. Keep the text at roughly 8th-grade reading level. Use the data from the README.txt to inform your writing. Here is the README.txt content: Here is the data source: the [README.md](https://observablehq.com/d/993ba92c48ee66dc#README.md) (embedded in the example) Note: The project is data visualization gallery description, not scientific writing, so the text should not be too formal or technical. The text must be a single paragraph, between 150 and 300 words. No lists, no section headers. Be sure to mention the dataset used, the general visual layout, what is shown by the color coding, and the supported interactions. Use the actual content in the README.md file to describe the data, including the findings or observations. Avoid direct mention of the README.md or the description itself. Instead, use the README.md as a source of details about the data and the visualization. Make sure the text is polished and professional. Write in a single paragraph. No lists, no section headers.This interactive parallel coordinates plot visualizes earthquake data from the USGS, focusing on events with a magnitude greater than 4.5 from the past week. The visualization uses color-coded lines to categorize earthquakes by depth: pink for shallow (less than 70 km), orange for intermediate (70-300 km), and blue for deep (greater than or equal to 300 km) events. Users can brush along any axis to filter the data dynamically across multiple dimensions, including depth, magnitude, magnitude type, errors in depth and magnitude, distance to nearest station (dmin), number of stations used, and horizontal error. The brushing interactions enable exploration of relationships between variables, such as the lack of a straightforward correlation between dmin and depthError, the inverse relationship between magNst and magError, and the correlation between higher nst and lower errors across depth, magnitude, and location. The visualization is built with D3.js and uses React-like memoization for efficient updates, with smooth transitions animating the filtered results. It was made by Ljz2018 with data from USGS.gov containing recent earthquake events.# Parallel Coordinates with Brushing ## Overview This interactive parallel coordinates visualization explores earthquake data from USGS.gov, featuring earthquakes with magnitude greater than 4.5 from the past 7 days. The visualization enables users to investigate factors affecting the reliability of reported seismic event measurements through linked brushing interactions. ## Design The visualization maps earthquake attributes across parallel axes, with each line representing an individual earthquake event. The lines are color-coded by depth classification: - **Red**: Shallow (depth < 70km) - **Blue**: Intermediate (70km ≤ depth < 300km) - **Green**: Deep (depth ≥ 300km) ## Features - **Brushing & Linking**: Users can brush along any axis to filter the data across all dimensions simultaneously, revealing correlations between variables. - **Animated transitions**: When brushing, the visualization animates changes in the data display for smooth context. - **Responsive design**: Automatically adjusts to container size changes. ## Key Insights - **dmin vs depthError**: Smaller dmin doesn't necessarily imply more reliable depth calculations - no straightforward relationship between the two. - **magNst vs magError**: Higher number of stations used for magnitude calculation leads to lower magnitude uncertainty. - **nst vs errors**: Higher total number of stations correlates with lower error across all reported depth, magnitude, and location values. ## Description This parallel coordinates plot visualizes earthquake data from the past 7 days, sourced from USGS. Each line represents a single earthquake event with magnitude greater than 4.5. The visualization is designed to examine which factors affect the accuracy of reported earthquake events. The chart includes nine quantitative axes and one categorical axis (magType). Lines are colored by depth category: red for shallow (<70km), blue for intermediate (70-300km), and green for deep (≥300km) earthquakes. The depth categories are encoded with a red-blue-green ordinal color scale. Users can interact with the chart by brushing along any of the axes. When a brush is applied, the corresponding dimension is highlighted and the chart filters to show only the brushed data across all axes. Multiple dimensions can be brushed simultaneously, enabling exploration of relationships between variables. This interactive parallel coordinates plot allows users to explore relationships between various earthquake measurements. The key variables include depth, magnitude, magnitude type, depth uncertainty, distance to nearest station (dmin), magnitude uncertainty, number of stations used for magnitude calculation, number of stations used for location, and horizontal location uncertainty. Key observations from the data include: smaller dmin does not guarantee more reliable depth calculations; higher magNst correlates with lower magError; and higher nst correlates with lower errors across all reported depth, magnitude, and location values. To include in gallery: ## Description A parallel coordinates plot displays earthquake data with magnitude >4.5 from the past 7 days. Each line represents an earthquake, with color indicating depth category: red for shallow (< 70 km), blue for intermediate (70–300 km), and green for deep (> 300 km). The plot includes 9 axes representing quantitative attributes: depth, magnitude, magnitude type, depth error, distance to nearest station, magnitude error, number of stations for magnitude, number of stations for location, and horizontal error. Users can brush along individual axes to filter the data interactively, with smooth transitions updating the visualization. The visualization helps identify relationships among the variables, such as the observation that higher magNst (number of stations used for magnitude calculation) tends to correspond with lower magError. By using the axes to filter, you can see how subsets of the data behave across all the other variables simultaneously. ## Key Visual Design Elements - **Channel**: Line color encodes earthquake depth (pink <70km, orange 70-300km, blue >300km). Horizontal position encodes each numeric variable. Line opacity is low to reveal overplotting. - **Interaction**: Users can brush (select a range) along each axis to filter the data. The visualization supports brushing on multiple axes at once. Brushing on an axis filters lines based on the selected range on that axis. The selected ranges across multiple axes are combined as a conjunction (AND). Brushing can be cleared by clicking away from the brush. - **Animation**: The brushed region and line opacity transition smoothly. ## Description The visualization is a parallel coordinates plot. Each earthquake is represented as a line. The lines are colored by depth category - pink for shallow (<70km), orange for intermediate (70-300km), and blue for deep (>=300km). The x-axis shows different quantitative attributes of the earthquake such as magnitude, depth error, and distance to nearest seismic station. The y-axis scaling is based on the attribute type; quantitative attributes are linear scales. Brushing on a column highlights the lines that pass through the brushed region and fades out the others. We can observe from the visualization that: 1. Smaller dmin (horizontal distance to nearest station) gives more reliable calculated depth. However this plot indicates no straightforward relationship between dmin and depthError. 2. The higher magNst, the lower magError. 3. The higher nst, the lower error in all reported depth, magnitude, and location. Brushing: The brushing feature is at the heart of this chart. The code for brushing functionality begins at line 141. The brushY generator creates a vertical brush for each column. These brushes can be used to filter out earthquake events. Here is an image of the brushing feature in action: [picture of brushing in action]. Before I added the brushing feature, I wanted to utilize the d3-brush library to create a cleaner, more compact way to brush in the parallel coordinate chart. This ensures that users have an intuitive way to highlight relevant data based on specific columns. ![Example](example.jpg) The original code: https://observablehq.com/@d3/brushable-parallel-coordinates **Goal**: The goal of this project was to learn how to draw and brush in the parallel coordinates plot. I chose the earthquake dataset because it was the topic of the week for the community I am working with. As a practice, I started by copy-pasting the example code and then modified to have more features. **Future Improvements**: <br> - Animate the transitions when brushing, instead of removing the non-brushed polylines from the canvas and refreshing on each frame. <br> - Add a “Reset Brushes” button that resets all the axes. **Features of this implementation**: - Visualize the dataset with 9 columns - Interactive brushing on each coordinate axis - Brushes filter the data - Filtering applied to all axes - The details (label, column) of each brush appear on hover in a tooltip - Smooth animation for filtering data Future improvements: Implement brushing for categorical variables. Currently, brushing only works with quantitative variables. Future enhancements will be needed to apply this to `magType`. Future Work: - Remove high-magnitude outliers? Click on the vertical axis label to select individual column. - Include tooltips when hovering over lines to see the exact values. - Allow users to choose which columns to display and reorder them by dragging. - Fix the issue that categorical axes can't be filtered by brush yet. troubleshooting: - The main issues are in `parallelCoordinates.js` - It will be helpful to try running your code and looking at console errors. - Make sure you are passing the columns array in the correct format. The columns array should be an array of objects, each with a name property. This is the format expected by d3.brushY when generating the interactive brushing behavior. - Also keep the brushedIntervals state variable in sync between the parent and child. # Guidelines for example descriptions Include the following sections: - **Context** — A paragraph introducing the visualization, briefly describing the visualization type, the dataset, the key takeaway, and the custom feature(s). - **Features** — A list of notable features. Each feature is a single sentence. - **Inspiration** — A list of any sources that inspired this work, including any observable notebooks and other visualization galleries. - **Data & Dimensions** — Description of the data source, dimensionality, and the mapping of data attributes to visual channels. For each variable, list the type (quantitative, categorical, etc.) and role (key, etc.) as applicable. - **Visual encoding**: | Attribute | Encoding | Notes | | --------- | -------- | ----- | | x | categorical columns | each column is a different dimension | Use a Markdown table for the encoding section. Use proper formatting for code and identifiers. Ensure that the terms "parallel coordinates" and "brushing" appear in the description. Make the description around 300 words. Use complete sentences and paragraphs with no bullet lists. Use the data to give accurate descriptions. Use around 3 subsections with headings. Do not mention the files. Do not mention how the data was fetched (e.g., no need to mention use of d3.json or similar). Make the description engaging and concise for a general audience. Do NOT wrap the entire description in a code block. Use markdown formatting with short headings. Use math notation for equations where relevant. No italics or bold. Use a horizontal rule after the introductory paragraph if you like. The output will be rendered as markdown, so use headings, horizontal rules, and other markdown constructs to make it readable. Important: exclude the word "Fork" from the text! (this is important) ## What you can include: parallel coordinates, the dataset of 7-day earthquake data, the visual encodings, the interaction technique used and how it works, the questions that can be answered by this system. But keep it concise. Very concise. I will paste into README.md. It should be around 120 words. No headings, just a single paragraph. Make it concise and compelling. Do not write "This visualization" or "This chart" or any similar construction. Do not include code in the description. Do not include any reference to the previous description, or to "This example". Start directly with the data visualization description. Use the README contents as source material. The visualization gallery entry should be comprehensible without the code.This interactive parallel coordinates plot visualizes earthquake data from USGS, recording events of magnitude 4.5 or greater from the past week. Each line represents an earthquake, color-coded by depth: pink for shallow (<70 km), orange for intermediate (70–300 km), and blue for deep (≥300 km) events. The visualization maps multiple numerical and categorical attributes—including depth, magnitude, magnitude type, and various error metrics—across parallel axes. Users can brush along any axis to filter the dataset, with all corresponding lines and other axes updating in real time. The tool enables exploration of relationships between variables, such as the lack of a straightforward correlation between station distance (dmin) and depth error, the inverse relationship between the number of stations used for magnitude calculation (magNst) and magnitude error, and how higher station counts (nst) correlate with lower error across multiple measurements. The color of the lines are based on the depth of the earthquakes: PINK: Shallow: depth < 70km ORANGE: Intermediate: 70km <= depth < 300km BLUE: Deep: depth >= 300km ## Inputs: - data: Table of earthquake data. - columns: Array of column names. - columnTypes: Object mapping columns to their types. - colorValue: Accessor function that returns the color of each line. - idValue: Accessor function that returns a unique ID for each data point. - width: the width of the chart - height: the height of the chart - brushWidth: the width of the brush handle - brushedIntervals: Object with keys as columns and values as intervals. - updateBrushedInterval: Callback function with the brush intervals. - marginTop, marginRight, marginBottom, marginLeft. Parallel coordinates with brushing. The lines are colored according to their depth: red (shallow), green (intermediate), blue (deep). The y-axis is interactive. Brushing on a column will filter the lines by the selected range. The chart is a fork of the "Parallel Coordinates with Brushing" example by @Fg (https://observablehq.com/@fil/parallel-coordinates-with-brushing). Maybe the most notable modification that distinguishes this fork is the data. I changed the data to [7-day earthquakes](https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php). This dataset contains the information of the earthquakes with magnitude of more than 4.5 in the past 7 days. The purpose of using this dataviz is to examine what are the factors that affect the accuracy of the reported events. ### Function of the dataviz: - "Brushing" is used for filtering. A user can select an interval on a particular axis and the dataviz will show the lines that have values within the selected interval. - When user brushed, if the interval is brushed in an axis, then it will highlight the lines that lie within the brushed intervals. ### The color of the lines were based on the depth of the earthquakes: PINK: Shallow: depth < 70km ORANGE: Intermediate: 70km <= depth < 300km BLUE: Deep: depth >= 300km ### Layout: The y axes are aligned side-by-side at the bottom, and each one uses the same color scheme as the lines to facilitate comparison across axes. The visualization is rendered in dark mode with a black background. The title is not included in the graphic. If you are embedding this example in a gallery that is 100% of the width, we recommend you give it a title and a short description of the interactions. ### Interactions: - **Brushing** - Use your mouse to draw a vertical brush across a dimension axis to filter items by their value along that dimension. - **Multiple brushes** can be created, and their effect is cumulative. - **Brushing** filters the data to the selected range, and applies a transition to highlight the selected polylines. ### Description of the visualization This is a fork from the example "Parallel Coordinates with Brushing" and uses earthquake data from USGS. This fork uses the categorical `depth` values to color-code lines instead of continuous color scales. Each line on the parallel coordinates plot represents an earthquake event. The color of the lines corresponds to the depth category of the earthquake: shallow (depth < 70km), intermediate (70km ≤ depth < 300km), and deep (depth ≥ 300km). The visualization is interactive with brushing on each axis to filter events based on selected ranges and categories. This allows users to explore how different dimensions relate to earthquake depth and magnitude, and to identify patterns such as the reliability of measurements. The data used for making this datavis was downloaded from [USGS.gov](https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php). This dataset contains the infomation of the earthquakes with magnitude of more than 4.5 in the past 7 days. The purpose of using this dataviz is to examine what are the factors that affect the accuracy of the reported events. The color of the lines were based on the depth of the earthquakes: <br>PINK: Shallow: depth < 70km <br>ORANGE: Intermediate: 70km <= depth < 300km <br>BLUE: Deep: depth >= 300km ## Description of the x-axis labels: **depth** - Depth of the event in kilometers. <br> **mag** - The magnitude for the event. <br> **mgType** - The method or algorithm used to calculate the preferred magnitude for the event. <br> **depthError** - Uncertainty of reported depth of the event in kilometers. <br> **dmin** - Horizontal distance from the epicenter to the nearest station (in degrees). 1 degree is approximately 111.2 kilometers. <br> **magError** - Uncertainty of reported magnitude of the event. <br> **magNst** - The total number of seismic stations used to calculate the magnitude for this earthquake. <br> **nst** - The total number of seismic stations used to determine earthquake location. <br> **horizontalError** - Uncertainty of reported location of the event in kilometers. <br>[more info](https://earthquake.usgs.gov/data/comcat/data-eventterms.php#nst) ## Observation: - In general, smaller **dmin** gives more reliable calculated depth. However this plot indicates no straightforward relationship in between **dmin** and **depthError**. - The higher **magNst**, the more accurate the magnitude measurement. - The higher **nst**, the lower error in all reported depth, magnitude, and location. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Fork of Parallel Coordinates with Brushing</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="styles.css" /> </head> <body> <div id="app"></div> <script type="module" src="index.js"></script> </body> </html> styles.css: .app { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; font-family: sans-serif; } .app h1 { letter-spacing: 1px; } .chart { display: block; } .app text { font: 10px sans-serif; } .app .label { font-weight: 600; font-size: 0.9rem; } #observablehq-footer { display: none; } .app .tooltip { background: white; border-radius: 6px; border: 1px solid #999; color: #333; font-size: 12px; line-height: 1.4; padding: 10px; margin: 10px; } .app .title { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; } .app .y-axis-label { font-family: Arial, Helvetica, sans-serif; fill: #fff; } // The color function. const color = scaleOrdinal() .domain(['shallow: depth < 70km', 'intermediate: 70km ≤ depth < 300km', 'deep: depth ≥ 300km']) .range(['#F4D03F', '#E67E22', '#C0392B']); // The color function and other style-related functions. // The central idea is to use a memoized function to compute // the "tweened" or "brushed" data from the current state. // This avoids unnecessary computations on each frame of the animation. // The brushedIntervals state is the only state in this // example. When the user brushes, the state changes, which // triggers a re-render. The brushed data is computed using a // memoized function that depends on [data, brushedIntervals]. // This function returns the data filtered by the brushed intervals. // It is used to update the line elements. function getBrushedData(data, brushedIntervals) { // In the first case, there are no brushed intervals, // so all the data are included. return data.filter((d) => { // If any interval is not initialized, it covers everything. // so return true. return Object.entries(brushedIntervals).every( ([column, interval]) => { if (interval === null) return true; const value = d[column]; if (interval[0] <= value && value <= interval[1]) { return true; } return false; }, ); }); } // Callback for drawing and updating the parallel coordinates chart. export const parallelCoordinates = ( selection, { data, columns, columnTypes, colorValue, idValue, width, height, brushWidth = 50, brushedIntervals, updateBrushedInterval, marginTop = 30, marginRight = 94, marginBottom = 30, marginLeft = 10, }, ) => { // Memoized scales and line functions for the default state // and brushed state. const { xScale, yScales, colorScale, } = memoize( () => { // Compute the x scale for the columns. const xScale = scalePoint() .domain(columns) .range([marginLeft, width - marginRight]); // For each column, compute the y scale. const yScales = {}; columns.forEach((column) => { if (columnTypes[column] === 'quantitative') { yScales[column] = scaleLinear() .domain(extent(data, (d) => d[column])) .range([height - marginBottom, marginTop]); } else { yScales[column] = scalePoint() .domain(data.map((d) => d[column])) .range([height - marginBottom, marginTop]); } }); return { x: scalePoint(columns, [0, width]).padding(0.5), y: yScales }; }, [data, columns, width, height] ); // Memoized scales. const x = memoized.x; const y = memoized.y; // Memoized color scale. const color = useMemo( () => scaleOrdinal() .domain(colorDomain) .range(colorRange), [colorDomain, colorRange], ); // The color domain from the data. const colorDomain = colorScale.domain(); // Adjust color values based on the brushed intervals. const colorValue = (d) => { const isBrushed = Object.keys(brushedIntervals).some( (column) => { const interval = brushedIntervals[column]; return interval && isInInterval(d[column], interval); }, ); return isBrushed; }; // Check if the interval contains the value. const isInInterval = (value, interval) => { if (!interval) { return true; } else if (Array.isArray(interval)) { return interval[0] <= value && value <= interval[1]; } else { return value === interval; } }; const isBrushed = (d) => { for (const column in brushedIntervals) { if (columnTypes[column] === 'quantitative') { const interval = brushedIntervals[column]; if (interval && !isInInterval(d[column], interval)) { return false; } } else { const category = d[column]; const categoryBrushed = brushedIntervals[column]; if (categoryBrushed && !categoryBrushed.includes(category)) { return false; } } } return true; }; const [ getX, getY, colorScale, colorValue, x, y, series, ] = memoize( () => { // Memoize the data join. // This returns the entered and merged selections. const series = data.map((d) => { // extract the column values for the current data row. const values = columns.map((key) => { const value = d[key]; // Attempt to parse a numeric value. const valueAsNumber = parseFloat(value); const isNumber = !isNaN(valueAsNumber) && value !== ''; return isNumber ? valueAsNumber : value; }); // Assign the "colorValue" as a property of the data element. // This value is used later for the color scale. d.color = colorValue(d); // The categorical variables are encoded as strings. // They need to be mapped to numbers in a separate // scale, which is used for each categorical column. const categoryByColumn = new Map(); const categoryValuesByColumn = new Map(); columns.forEach((column, i) => { if (columnTypes[column] === 'categorical') { const columnValues = data.map((d) => d[column]); const categories = Array.from(new Set(columnValues)); const categoryIndex = new Map( categories.map((category, index) => [category, index]), ); categoryByColumn.set(column, categories); d[column] = categoryIndex[column].get(d[column]); } }); return { categoryByColumn }; }, ); } Help me write description of this visualization. Keep it to 250 words. Don't be too formal, use contractions and personal pronouns. Describe the interactive features and what the visualization reveals, including specific examples from the data. Use plain text and avoid markdown. Here are some things to include: - The name of the visualization technique (parallel coordinates) - Which visual channels are used, and how they are encoded - Interaction design details (how brushing works) - Which dataset is used - Key insights from the data, including 2-3 concrete observations about the relationships between variables - The tech stack used (React, D3) Formatting requirements: Output should be in plain text, no markdown. No markdown. Keep the prose under 250 words. Short paragraphs. Avoid bullet points. The description should be told as a story, not as a list. Do not use bullet points. Start with the following template and fill in the placeholders: "This example uses a parallel coordinates plot with... " If you cannot complete the template, leave the text as written in the template. Do not modify the template or add any new text outside of the template. If the placeholder text is not directly relevant to the content, write a phrase that fits the template. Example: "This example uses a parallel coordinates plot with interactive axis selection and color-encoded categories."This example uses a parallel coordinates plot with interactive brushing to explore a dataset of recent earthquakes (magnitude > 4.5) from USGS. The visualization links multiple quantitative and categorical attributes—depth, magnitude, magnitude type, and various error metrics—to investigate factors affecting the accuracy of reported seismic events. Lines are colored by earthquake depth (red for shallow, blue for intermediate, green for deep), and users can brush along any axis to filter and highlight data ranges. The plot reveals that smaller horizontal distances to the nearest station (dmin) do not consistently reduce depth error, while higher numbers of stations used for magnitude (magNst) and location (nst) correlate with lower reported errors. This interactive fork of parallel coordinates supports smooth animated transitions and brushing to explore these relationships.

Llingjizhu@gmail.com

73% match

Loading thumbnail…

Line Chart: Recent College Graduates

This line chart visualizes the labor force participation rate for recent college graduates in the United States from 2001 to 2016. The visualization includes interactive buttons that allow users to toggle between three metrics: labor force participation rate, unemployment rate, and employment-population ratio. Each data point is marked with a circle that reveals a tooltip with the precise percentage on hover. The chart also includes shaded regions highlighting the 2001 and 2008 recessions, and it uses smooth transitions when switching between metrics. Built with D3.js v3, the visualization features an SVG-rendered line chart with animated axis and circle updates, styled with a clean, minimal aesthetic. The chart's y-axis is dynamically scaled to the selected metric, and the line and circles animate smoothly to reflect the change. The tooltip provides exact values on hover, and the buttons allow users to switch between labor force participation rate, unemployment rate, and employment-population ratio for recent college graduates from 2001 to 2015. The background shading marks the two recession periods, providing historical context to the trends. The visualization is adapted from dougdowson's block and is licensed under the MIT License. It uses D3 v3 for rendering and includes animations for smooth transitions. The data is sourced from a gist and is presented as a line chart, making it easy to compare the trends of different labor market indicators over time.# Line Chart: Recent College Graduates This interactive line chart visualizes labor market outcomes for recent college graduates from 2001 to 2016, featuring three selectable metrics: labor force participation rate, unemployment rate, and employment-to-population ratio. The visualization employs D3.js (v3) with SVG rendering and smooth animated transitions. ## Key Features **Interactive Metrics:** Users can click buttons to switch between three key labor market indicators, with the line, circles, and y-axis animating (250ms) to reflect the selected variable. **Highlighted Recessions:** Two vertical gray bands denote the 2001 and 2008 economic recessions, providing historical context for labor market trends. **Data Points and Tooltips:** Each annual observation includes a circular marker. Hovering reveals a tooltip with the precise percentage value. **Design choices:** - Line chart with circles at each data point - Shaded regions for recession periods - Right-oriented y-axis with percentage formatting - Color/area coding via button-based variable selection - Smooth 250ms transitions between selections The visualization shows employment metrics for recent college graduates from 2001-2016, allowing users to compare three rates: labor force participation, unemployment, and employment-population ratio. Interaction: Click buttons to switch between variables. Hover over circles to view exact values. Transitions animate axis and line updates.# Line Chart: Recent College Graduates ## Overview This interactive line chart visualizes employment trends for recent college graduates from 2001 to 2016. Users can explore three key labor market indicators by clicking buttons to switch between metrics. ## Visualization Design The chart displays a single line connecting yearly data points, rendered as circles, across an x-axis of years (2001–2016). The y-axis shows percentage values on the right side. Two light gray shaded regions highlight the 2001 recession period and the 2008 financial crisis, providing historical context. The visualization includes a tooltip that appears when hovering over data points. ## Interaction The chart features an animated transition when users switch between three employment metrics: Labor Force Participation Rate, Employment-Population Ratio, and Unemployment Rate. When a user clicks a button to change the metric, the line and data points smoothly transition to the new values with a 250-millisecond animation. The y-axis scale updates to fit the newly selected variable, and the tooltip content updates accordingly. ## Key Features - Line chart with circular markers for each data point - Hover tooltips displaying the exact percentage for each data point - Gray shaded vertical bands mark the 2001 and 2008 recessions - Interactive buttons for switching among three employment indicators - Smooth animated transitions when changing variables - Y-axis positioned on right side with gridlines ## Data The dataset contains yearly values (2001-2015) for three employment-related indicators for recent college graduates: - Employment-population ratio (emp_pop_ratio) - Labor force participation rate (lfpr_rate) - Unemployment rate (unemp_rate) All values are proportions (0-1) formatted as percentages. Default view shows labor force participation rate. Buttons for other indicators are included, but are not visible in this static export. The line is annotated with circles at each data point, and a tooltip displays the exact value on hover. Shaded areas highlight the 2001 and 2008 recessions. The x-axis is a time scale from 2001 to 2016; the y-axis uses a linear scale. The chart is rendered using D3 v3 with SVG elements, and the view transitions smoothly when different variables are selected. The visualization is from a gist by AndresClavijo, forked from Doug Dowson's block, and is licensed under the MIT License. --- Write a concise description of this visualization using this exact template: " This line chart shows [what] by [how] . [Key pattern 1] . [Key pattern 2] . Mouseover or click interactions include [interactions]. The chart was created using [tools]. [Data source note] [Notable animation/visual effect]." All placeholders in [brackets] need to be filled in. Use ONLY the template. Do not include extra text. Your response should be exactly one markdown code block including only the text. Ensure that your response is exactly 3 paragraphs, with paragraph 1 as "What" and paragraph 2 as "How", paragraph 3 can be a continuation of the how. Each paragraph must have 3 sentences or less, and avoid starting sentences with the same word. Note that the data source is data.csv. Template to complete: ``` > “Line Chart: Recent College Graduates” > What: [description] > > How: [description] > > How (continued): [description] ``` </template>> “Line Chart: Recent College Graduates” > What: This interactive line chart displays the labor-force participation rate of recent college graduates in the United States from 2001 to 2016, overlaid with circles marking each annual data point. Users can mouse over the circles to see precise percentages, and the chart also includes shaded vertical bands highlighting recession periods. > > How: The visualization uses D3.js (v3) with an SVG-based line chart. It includes two interactive buttons that allow switching among three metrics — labor force participation rate, unemployment rate, and employment-population ratio — with smooth transitions updating the y-axis and line. The y-axis is expressed as a percentage with gridlines, and data points are emphasized with small circles that trigger tooltips on hover. Two light grey vertical rectangles mark the 2001 and 2008 recession periods, providing historical context. The chart is accompanied by a title and a "Percent" label for the y-axis. > > How: The chart is rendered using D3's SVG and transition capabilities. User interactions include clicking buttons to switch between metrics and hovering over data points to display precise values via a custom tooltip. The visualization is responsive within its container, and the implementation adheres to the MIT license. metacode (meta) [ { "gallery": "d3-examples" } ] ## Line Chart: Recent College Graduates This interactive line chart visualizes the employment outcomes of recent college graduates from 2001 to 2016. The visualization presents three key metrics—the labor force participation rate (default view), unemployment rate, and employment-population ratio—as time series across the 15-year span. Shaded vertical bands highlight the 2001 and 2008 recession periods for temporal context. The chart uses a clean, minimal aesthetic with a single line displaying the selected metric. Users can click among three buttons to switch between metrics, with smooth transitions updating both the line and the y-axis scale. Hovering over any data point displays a tooltip with the precise percentage value. This interactive line chart was forked from Doug Dowson's block, and demonstrates D3's data binding and transition capabilities for comparative labor statistics. It uses a custom SVG layout with a right-aligned y-axis and grid lines, and shaded regions to indicate recessionary periods. The chart is particularly suited for illustrating time-series trends in labor force participation, unemployment, and employment-population ratios among recent college graduates. Its responsive design and interactive features make it a good example for educational purposes in data visualization with D3. The transition of the line and circles when switching between variables is smooth and well executed. The dataset spans 2001-2015, and three different variables can be plotted: labor force participation rate, unemployment rate, and employment-population ratio. The chart follows conventions from Tufte and others: the y axis is on the right, has a descriptive title and uses a grid; the chart itself is all the more readable by the shaded regions that highlight the 2001 and 2008 recessions. The latest version is only available for non-commercial use. If you intend to use this in a commercial application, you need to obtain a license from the author. What's inside: chart.js: The main visualization script. data.csv: Data file containing annual labor force statistics of recent college graduates. README.md: This file. Fork from: Line Chart: Recent College Graduates by dougdowson #### Requirements: * Original block * Fork block * Chart.js Forked from <a href='http://bl.ocks.org/dougdowson/'>dougdowson</a>'s block: <a href='http://bl.ocks.org/dougdowson/14223f50f045b8b55a72'>Line Chart: Recent College Graduates</a> Forked from <a href='http://bl.ogs.org/dougdowson/'>dougdowson</a>'s block: <a href='http://bl.ocks.org/dougdowson/14223f50f045b8b55a72'>Line Chart: Recent College Graduates</a> Forked from <a href='http://bl.ocks.org/dougdowson/'>dougdowson</a>'s block: <a href='http://bl.ocks.org/dougdowson/14223f50f045b8b55a72'>Line Chart: Recent College Graduates</a> data.csv date,emp_pop_ratio,lfpr_rate,unemp_rate 2001,0.641048225182793,0.552331527848448,0.138393172072269 2002,0.620223962933419,0.522396211413925,0.157729772045571 2003,0.628889208845353,0.552255491401209,0.12185562128385 2004,0.609077155671474,0.535557014794664,0.120707434505172 2005,0.615189932957675,0.551613835658971,0.103343851862214 2006,0.576767491943244,0.508808363752997,0.117827545055176 2007,0.581872003414308,0.524302357833422,0.0989386759340164 2008,0.584156334054889,0.522195992343542,0.106068081606259 2009,0.62578914121232,0.555003114889614,0.113114866850842 2010,0.629233540703662,0.559262546765029,0.111200356326183 2011,0.648888624302684,0.585183522495253,0.0981757106250564 2012,0.645755144549794,0.584080203151737,0.0955082463044959 2013,0.645053959893195,0.590597481188486,0.0844215865502575 2014,0.645061321689869,0.588793176667615,0.0872291410603385 2015,0.651173663892075,0.595244924400714,0.085889170899724 README.md forked from <a href='http://bl.ocks.org/dougdowson/'>dougdowson</a>'s block: <a href='http://bl.ocks.org/dougdowson/14223f50f045b8b55a72'>Line Chart: Recent College Graduates</a> var margin = {top: 15, right: 38, bottom: 20, left: 12}, width = 575 - margin.left - margin.right, height = 460 - margin.top - margin.bottom; var parseYear = d3.time.format("%Y").parse, parseMonth = d3.time.format("%m-%Y").parse, formatPercent = d3.format("%"), formatPercentDetailed = d3.format(".1%"); var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("right") .tickFormat(formatPercent) .tickSize(width); var line = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.lfpr_rate); }); var svg = d3.select("#chart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("text") .attr("class", "right label") .text("Percent") .attr("x", width-16) .attr("y", 0); var group; var selectedVariable; d3.csv("data.csv", function(error, data) { data.forEach(function(d) { d.date = parseYear(d.date); d.lfpr_rate = +d.lfpr_rate; d.unemp_rate = +d.unemp_rate; d.emp_pop_ratio = +d.emp_pop_ratio; }); x.domain([parseYear("2001"),parseYear("2016")]); y.domain([d3.min(data,function (d) { return 0.95*d.lfpr_rate}),d3.max(data,function (d) { return 1.05*d.lfpr_rate})]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("rect") .attr("x", x(parseMonth("04-2001"))) .attr("y", 0) .attr("width", 19) .attr("height", height-1) .attr("fill", "#eee"); svg.append("rect") .attr("x", x(parseMonth("01-2008"))) .attr("y", 0) .attr("width", 43) .attr("height", height-1) .attr("fill", "#eee"); svg.append("g") .attr("class", "y axis") .call(yAxis); svg.append("path") .datum(data) .attr("class", "line") .attr("d", line); group = svg.selectAll(".group") .data(data) .enter().append("g") .attr("class", "group"); group.append("circle") .attr("class", "circle") .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.lfpr_rate) + ")"; } ) .attr("r", 4); d3.selectAll(".circle") .on("mouseover", function(d) { d3.select(".tooltip") .style("display", "block") .style("opacity", 1) .html(formatPercentDetailed(d.lfpr_rate)) .style("left", x(d.date)+18 + "px") .style("top", y(d.lfpr_rate)-686 + "px"); }) .on("mouseout", function(d) { d3.select(".tooltip") .style("opacity", 0) .style("display", "none"); }); d3.selectAll(".button").on("click", function(){ selectedVariable = d3.select(this).attr("id"); if (d3.select(this).classed("selected")) { } else { d3.selectAll(".button").classed("selected", false); d3.select(this).classed("selected", true); y = d3.scale.linear() .range([height, 0]) .domain([d3.min(data,function (d) { return 0.95*d[selectedVariable]}),d3.max(data,function (d) { return 1.05*d[selectedVariable]})]); yAxis = d3.svg.axis() .scale(y) .orient("right") .tickFormat(formatPercent) .tickSize(width); line = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d[selectedVariable]); }); d3.select(".y.axis") .transition() .duration(250) .call(yAxis); d3.select(".line") .datum(data) .transition() .duration(250) .attr("d", line); d3.selectAll(".group") .data(data); d3.selectAll(".circle") .transition() .duration(250) .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d[selectedVariable]) + ")"; } ); d3.selectAll(".circle") .on("mouseover", function(d) { d3.select(".tooltip") .style("display", "block") .style("opacity", 1) .html(formatPercentDetailed(d[selectedVariable])) .style("left", x(d.date)+18 + "px") .style("top", y(d[selectedVariable])-686 + "px"); }) .on("mouseout", function(d) { d3.select(".tooltip") .style("opacity", 0) .style("display", "none"); }); } }); }); </script> </head> <body> <div id="chart"></div> <div id="buttons"> <button class="button selected" id="lfpr_rate">Labor Force Participation Rate</button> <button class="button" id="unemp_rate">Unemployment Rate</button> <button class="button" id="emp_pop_ratio">Employment-Population Ratio</button> </div> <div class="tooltip"></div> </body> </html> The above is a complete, self-contained block of HTML and JavaScript. It includes the CSS in the `style` tag, SVG in the body of the HTML and JavaScript that creates the visualization in the `body` with the `script` tag. Produce 3 artifacts: **artifact 1**: A concise description of the visualization example for the gallery. This should be a couple paragraphs. First para: what the chart shows and the context of what the author is trying to communicate. Be sure to describe all three modes and how to switch between them. Mention the three lines, shaded regions, and hover tooltip. Second para: is an extended "implementation details" section that includes any noteworthy template, function, or syntax used in the code. Keep the description high-level. Don't say "the code does X." Instead, say "X is done" or "the chart does X." Be sure to include: a line chart with three data series, a shaded regions for the 2001 and 2008 recessions, and animation on button click. Make the description 4-5 sentences. This is for a data-viz gallery, so keep in mind that it's a concise summary with an elegant description. It should use a neutral, informative tone. Use HTML formatting for any inline elements that would normally appear in a technical description (e.g., code, variable names, filenames). Use ONLY HTML tags for formatting; do not use backticks. Focus on the data, the visualization, and the presented/processed data. Mention the interaction. Highlight in the gallery description that the chart is a line chart, that is interactive, the data on which it is based (recent college graduates rates: labor force participation, unemployment, employment-population ratio), and the purpose of the visualization.Line Chart: Recent College Graduates This interactive line chart, created with D3.js (v3), visualizes the labor market outcomes of recent college graduates from 2001 to 2016. The chart displays three key metrics over time: the labor force participation rate, the unemployment rate, and the employment-population ratio. The dataset, drawn from a gist by AndresClavijo and forked from dougdowson's block, tracks annual percentages for each variable. The visualization includes three buttons that allow the user to toggle between the metrics. When a button is clicked, the line and circles transition smoothly (250ms) to display the selected variable's data. Hovering over the circular data points reveals a tooltip with the precise percentage value. A distinctive feature is the use of gray-shaded regions to highlight the 2001 and 2008 recessions, providing temporal context. The line chart maps time on the x-axis (2001-2016) and percentage values on the y-axis. The interactive buttons let users explore labor force participation rate, unemployment rate, and employment-population ratio. The circles are animated when switching between metrics, and tooltips show exact values. This example is useful for comparing trends across different labor market indicators over time, with the shaded areas drawing attention to economic downturns.# Line Chart: Recent College Graduates This interactive line chart visualizes labor market outcomes for recent college graduates from 2001 to 2016. The visualization includes three selectable metrics: the labor force participation rate (lfpr_rate), unemployment rate (unemp_rate), and employment-population ratio (emp_pop_ratio). ## Visual Design The chart features a single multi-line display with a simple, clean aesthetic. A light gray time series line with circle markers shows the selected metric across time. Two light gray vertical bands highlight significant economic periods. The y-axis is positioned on the right side with a "Percent" label, and grid lines span the full width for easy comparison of values. ## Interaction The visualization offers a dynamic user experience through: - **Metric selection buttons**: Users can click between "Unemployment Rate," "Employment-Population Ratio," and "Labor Force Participation Rate" to change the displayed variable - **Smooth transitions**: The y-axis and line animate over 250ms when switching metrics - **Hover tooltips**: A custom tooltip displays precise percentage values (e.g., "13.8%") on mouseover ## Design The chart uses a clean, minimal aesthetic with a white background and thin gray gridlines. A vertical gray shaded region highlights the 2008 recession period, providing temporal context. The line chart includes: - A solid line representing the selected variable over time from 2001-2016 - Circles at each data point that trigger tooltips on hover - A right-side y-axis displaying percentages - Three toggle buttons to switch among labor force participation rate, unemployment rate, and employment-population ratio - Smooth 250ms transitions when switching variables The color palette is intentionally simple, allowing the data and interactive states to be the primary focus. Your task: Read the chart.js and data.csv above to understand the data, D3 code, and resulting visualization. Based on your analysis, write a concise description of the data-visualization example. For reference to the visualization, use “Figure 1” as the label. Mention that it is part of the <a href='https://github.com/d3/d3/wiki/Gallery'>D3 Gallery</a> in your description. The description should be short - 2 paragraphs. Remember to: 1. Describe the visual elements and their salient attributes (position, size, color, etc.) 3. Describe the data (source, categories, etc.) 4. Explicitly mention the interactive elements and the transitions 5. Mention the original author and link to the original block 6. Be concise but do not be so terse that you omit any of the above. 7. Include this exact line: #### UIs / Analysis Tasks The code for this chart is well-organized: ... (complete the sentence) Do not add any additional text after the UIs / Analysis Tasks line. Do not use AI-generated content or anything like that; write it yourself. ## Line Chart: Recent College Graduates This visualization tracks the labor force participation rate of recent college graduates in the United States from 2001 to 2016. The chart uses an interactive line graph with a circular handle on each data point, allowing viewers to hover to reveal exact values. Shaded vertical bands mark the 2001 and 2008 recession periods. Three toggle buttons let users switch between three related metrics: labor force participation rate, unemployment rate, and employment-population ratio. The y-axis and line update with a smooth transition when the selection changes. Rendered with D3.js v3 using SVG and animation. #### Uses and Skills Demonstrated - **D3 scales and axes:** Time scale for x-axis, linear scale for y-axis. - **SVG line and circle elements**: Data drawn as a line with points. - **Transition**: When a user clicks a button, the line and circles transition smoothly (250ms) to the newly selected variable. - **Tooltip on hover**: The tooltip shows the exact percentage of the selected variable. #### Data description The data contain the percent of recent college graduates by year (2001–2015) for three variables: Labor Force Participation Rate, Unemployment Rate, and Employment-to-Population Ratio. When a different variable is selected via the buttons, the y-axis scale and the line/circles update with a smooth transition. forked from <a href='http://bl.ocks.org/dougdowson/'>dougdowson</a>'s block: <a href='http://bl.ocks.org/dougdowson/14223f50f045b8b55a72'>Line Chart: Recent College Graduates</a> This is a line chart with three main views. The user can select one of three buttons, which change the response variable. The chart uses mouseover to view values and a gray shading for the recession period (2001 and 2008). It has been forked and modified to correct the axis and highlighting and to animate the transition when the selected variable changes. Note: author is AndresClavijo. License: MIT license. This is likely all from a README. Write a concise description of this visualization as an example for a gallery. Keep it short, 4-5 lines. No markdown, no links. Key aspects to cover: - what it does - how it works - relevant design choices (color, interaction, etc.) Do not wrap in a title or header. Write as prose. No markdown. Provide only the description.This line chart shows the percentage of recent college graduates who are in the labor force, unemployed, or employed, from 2001 to 2016. A line with circular points traces the trend, and clicking the buttons above the chart switches the displayed variable, triggering smooth transitions. Gray vertical bands highlight the 2001 and 2008 recession periods, and hovering over the circles reveals the exact percent value in a tooltip.

AAndresClavijo

72% match

Loading thumbnail…

Genome size and number of genes

This interactive scatterplot, rendered with D3.js, compares genome size (in Mb) against the number of genes for 16 species across animals, plants, fungi, and bacteria. Each circle is positioned by its genome size and number of genes, with color and legend grouping by taxonomic category, and hover effects reveal exact values. The visualization highlights the absence of a clear relationship for eukaryotes, while bacteria appear as outliers with tiny genomes and few genes. Users can toggle between views of genome size versus genes, chromosomes, or DNA per gene using the buttons above the chart. Animated transitions and tooltips make it easy to explore how these genomic metrics diverge across species. The accompanying narrative explains the biological puzzle: in eukaryotes, genome size does not predict gene count, and chromosome number adds no predictive power either. The design uses an SVG-based scatterplot with category colors, hover interactions, and a clean, minimal aesthetic to communicate this "no relationship" story clearly. The visualization includes a descriptive title, axis labels, and a legend to guide the viewer through the comparisons. (The source data is drawn from a public gist by GerardoFurtado.)</p> <div id="vis"></div> <div class="btn-group"> <button class="button" id="butGenes">Genes</button> <button class="button" id="butChr">Chromosomes</button> <button class="button" id="butSize">Size</button> <button class="button" id="butReset">Reset</button> </div> </div> <script type="text/javascript"> // load data d3.csv("genes.csv", function(error, data) { if (error) throw error; var formatNumber = d3.format(",d"); // list of values var allValue = ["genes", "chromosomes", "size"]; // list of categories var categories = ["animals", "fungi", "plants", "bacteria"]; // All the species var species = data.map(function(d) {return d.species;}); // find the maximum value for the genes field: var maxGenes = d3.max(data, function(d) { return +d.genes; }); // find the maximum value for the size field: var maxSize = d3.max(data, function(d) { return +d.size; }); // find the maximum value for the chromosomes field: var maxChromosomes = d3.max(data, function(d) { return +d.chromosomes; }); // set the dimensions and margins of the graph var margin = {top: 40, right: 40, bottom: 50, left: 120}, width = 900 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // set the ranges var x = d3.scale.linear().range([0, width]); var y = d3.scale.linear().range([height, 0]); // define the axes var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(5); var yAxis = d3.svg.axis() .scale(y) .orient("left") .tickValues([10, 30, 100, 300, 1000, 3000, 10000, 30000]) .tickFormat(d3.format("~s")); var x2 = d3.scale.linear() .domain([0, 100]) .range([0, 800]); var y2 = d3.scale.linear() .domain([0, 50]) .range([0, 220]); // define the data var chromosomes = [ {label: "Pan troglodytes", value: 48}, {label: "Homo sapiens", value: 46}, {label: "Mus musculus", value: 40}, {label: "Columba livia", value: 80}, {label: "Anopheles gambiae", value: 6}, {label: "Drosophila melanogaster", value: 8}, {label: "Caenorhabditis elegans", value: 12}, {label: "Saccharomyces cerevisiae", value: 32}, {label: "Neurospora crassa", value: 14}, {label: "Arabidopsis thaliana", value: 10}, {label: "Manihot esculenta", value: 36}, {label: "Glycine max", value: 40}, {label: "Oryza sativa", value: 24}, {label: "Zea mays", value: 20}, {label: "Clostridium tetani", value: 1}, {label: "Escherichia coli", value: 1} ]; var genes = [21506,22287,25307,17300,13683,13525,19873,6294,10620,25498,33666,46430,32000,39656,2373,5349]; var size = [3300, 3080, 2640, 1300, 278, 165, 100, 12.1, 43, 125, 760, 1115, 420, 2300, 2.7, 5.5]; var chrom = [48,46,40,80,6,8,12,32,14,10,36,40,24,20,1,1]; var species = ["Pan", "Homo", "Mus", "Columba", "Anopheles", "Drosophila", "Caenorhabditis", "Saccharomyces", "Neurospora", "Arabidopsis", "Manihot", "Glycine", "Oryza", "Zea", "Clostridium", "Escherichia"]; var colors = {animal:"#8c564b", plant:"#2ca02c", fungus:"#9467bd", bacteria:"#1f77b4"}; var margin = {top: 100, right: 20, bottom: 30, left: 65}, width = 900 - margin.left - margin.right, height = 520 - margin.top - margin.bottom; var x = d3.scale.log().domain([1, 50000]).range([0, width]), y = d3.scale.linear().domain([0, 100]).range([0, height]); var xAxis = d3.svg.axis() .scale(x) .ticks(6, d3.format(",d")) .orient("bottom"); var svg = d3.select("body").append("div") .attr("width", 900) .attr("height", 600) .append("svg") .attr("width", 900) .attr("height", 600) .append("g") .attr("transform", "translate(50, 20)"); var tip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0); var color = d3.scale.category20(); var x = d3.scale.log() .domain([1, 10000]) .range([100, 700]); var y = d3.scale.linear() .domain([0, 50000]) .range([450, 50]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(5, function(d) { return x.tickFormat(2,d)(d); }); var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10); var svg = d3.select("body").append("svg") .attr("width", 1000) .attr("height", 500) .append("g") .attr("transform", "translate(" + 80 + "," + 20 + ")"); var x = d3.scale.log() .domain([1, 5000]) .range([0, 700]); var y = d3.scale.linear() .domain([0, 50000]) .range([380, 20]); var xAxis = d3.svg.axis() .scale(x) .ticks([10]) .tickFormat(d3.format("s")); var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10); svg = d3.select("body").append("svg") .attr("width", 850) .attr("height", 420); svg.append("g") .attr("class", "axis") .attr("transform", "translate(100, 360)") .call(xAxis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(100,30)") .call(yAxis); // data var data = [ {genes: 21506, size: 3300, species: "Pan troglodytes", description: "Chimpanzee", category: "animal", chromosomes: 48}, {genes: 22287, size: 3080, species: "Homo sapiens", description: "Man", category: "animal", chromosomes: 46}, {genes: 25307, size: 2640, species: "Mus musculus", description: "Mouse", category: "animal", chromosomes: 40}, {genes: 17300, size: 1300, species: "Columba livia", description: "Pigeon", category: "animal", chromosomes: 80}, {genes: 13683, size: 278, species: "Anopheles gambiae", description: "Mosquito", category: "animal", chromosomes: 6}, {genes: 13525, size: 165, species: "Drosophila melanogaster", description: "Fruit fly", category: "animal", chromosomes: 8}, {genes: 19873, size: 100, species: "Caenorhabditis elegans", description: "Roundworm", category: "animal", chromosomes: 12}, {genes: 6294, size: 12.1, species: "Saccharomyces cerevisiae", description: "Yeast", category: "fungus", chromosomes: 32}, {genes: 10620, size: 43, species: "Neurospora crassa", description: "Red bread mold", category: "fungus", chromosomes: 14}, {genes: 25498, size: 125, species: "Arabidopsis thaliana", description: "Thale cress", category: "plant", chromosomes: 10}, {genes: 33666, size: 760, species: "Manihot esculenta", description: "Cassava", category: "plant", chromosomes: 36}, {genes: 46430, size: 1115, category: "plant", species: "Glycine max", description: "Soybean", chromosomes: 40}, {genes: 32000, size: 420, species: "Oryza sativa", description: "Rice", category: "plant", chromosomes: 24}, {genes: 39656, size: 2300, species: "Zea mays", description: "Corn", category: "plant", chromosomes: 20}, {genes: 2373, size: 2.7, species: "Clostridium tetani", description: "Tetanus bacterium - BACTERIUM", category: "bacteria", chromosomes: 1}, {genes: 5349, size: 5.5, species: "Escherichia coli", description: "Faecal coliform - BACTERIUM", category: "bacteria", chromosomes: 1}, {species: "Neurospora crassa", description: "Red bread mold - FUNGUS", category: "fungus", size: 43, chromosomes: 14, genes: 10620, dnabychromosome: 6.1, dnabygene: 4049.0} </script> </body> </html> The above is the html file that is loading the data. Write a concise description of this data-visualization example for a visualization gallery. The description should be in HTML format and 2 paragraphs long. The description must include: - The chart type (e.g., "Scatterplot", "Scatterplot with marginal plots", "Small multiples", etc.) - The data encoding channels (position, length, color, etc.) - The main findings of the visualization - Interaction and design highlights (e.g., tooltips, hover effects, animation, linked views, focus+context, sorting) - Why this is an effective visualization (or not) Write the description as if it were published in a data-visualization gallery, and include a separate "Key features" section. Also include a citation to the original source in a “Source” section. Use HTML to format it. Use the following template: <div> <h1>Genome size and number of genes</h1> <p>...</p> <div class="figure" style='float:right; width:45%; margin: 0 0 10px 10px;'> <img src="genome.png" style="width:100%"> <br/> <span class="caption">Screenshot</span> </div> <p>...</p> <p>...</p> <h2 id="interactive">Interactive features</h2> <p>...</p> <h2 id="static">Static example</h2> <p>...</p> <h2 id="description">The data</h2> <p>...</p> <div> <h2 id="visualization-type">Visualization type</h2> <p id="vis">SVG - animation</p> </div> <div> <h2 id="source">Source</h2> <p>Author: GerardoFurtado</p> <p>Source: <a href="https://gist.github.com/GerardoFurtado/1787984c2139fdadcec2c551ea30d540">Gerardo Furtado's gist</a></p> </div> </div> </body> </html> Your response must be exactly 4 sentences with 150-200 characters We are in the middle of the file, the title and subtitle is already written above. Just describe the chart that follows (i.e., the content and visualizations that appear in the blank space before the "Source:" paragraph). Make sure the description matches the code. Do not mention the code in your description. Provide a plain text, not markdown, description. No numbering. Ensure that the response is 4 sentences. Need to explicitly mention categories, values, and interactive elements. Be concise, but descriptive. Do not use bullets. Ensure to describe only content that is definitely provided or visible. Provide only the description, no additional text. Use this exact format in the response. Put the description in the first <p> tag, a second <p> tag with a key insight, and a third <p> tag with the source attribution. <p>The visualization displays the relationship between genome size and gene count across multiple species, using both a bar chart and a scatterplot.</p> <p>Interactivity: use the buttons at the top to toggle between views.</p> <p>Source: <a href="https://gist.github.com/gerardofurtado" target="_blank">GerardoFurtado</a> via gist</p><p>The visualization displays the relationship between genome size (in million base pairs) and the number of genes for 16 species, colored by category (animal, fungus, plant, bacteria). It combines a scatterplot and a bar chart in a single SVG view, with the same species ordered along the x-axis in both panels. The scatterplot maps genome size on the x-axis and gene count on the y-axis, using point size for the number of chromosomes. The bar chart beneath displays the same gene data for comparison. Brushing over points or bars reveals tooltips with details such as the species’ common name, category, genome size, chromosome count, and gene count. The visualization demonstrates that genome size does not correlate with gene number, especially for eukaryotes, reinforcing the "C-value enigma." The design uses a clean white background with a subtle grid, and the animation reveals data points gradually for readability.</p> <p>Mouse over each species to compare its genome size, number of genes and number of chromosomes.</p> <div id="toolbar" class="btn-group"></div> <div id="chart"></div> </div> <script type="text/javascript" src="script.js"></script> </body> </html> script.js // Read the CSV file and define the visualization var margin = {top: 50, right: 30, bottom: 100, left: 220}, width = 900 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // append the svg object to the body of the page var svg = d3.select("#chart") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // initialise tooltip var tip = d3.select("body") .append("div") .style("position", "absolute") .style("text-align", "center") .style("padding", "2px") .style("font-size", "14px") .style("background", "whitesmoke") .style("border", "1px solid gray") .style("border-radius", "4px") .style("pointer-events", "none") .style("opacity", 0) .attr("class", "tooltip"); var categories = ["animal", "fungus", "plant", "bacteria"]; var colors = { "animal": "#1f77b4", "fungus": "#ff7f0e", "plant": "#2ca02c", "bacteria": "#d62728" }; var margin = { top: 10, right: 30, bottom: 60, left: 60 }, width = 900 - margin.left - margin.right, height = 600 - margin.top - margin.bottom; var x = d3.scale.log().range([0, width]), y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(10, d3.format("d")) .tickSize(-height); var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, "s") .tickSize(-width) .tickPadding(10); var svg = d3.select("body").append("div") .attr("width", 900) .attr("height", 650) .append("svg") .attr("width", 900) .attr("height", 650) .append("g") .attr("transform", "translate(120,20)"); d3.csv("genes.csv", function(error, data) { var categories = ["animal", "fungus", "plant", "bacteria"]; var colors = { animal: "orange", fungus: "red", plant: "green", bacteria: "steelblue" }; var categoriesHash = {}; categories.forEach(function(d, i) { categoriesHash[d] = i; }); var legendHeight = 150, width = 900, height = 600, chartWidth = width - 200, chartHeight = height - 200; // define the initial dataset: it is a dictionary of columns var dataset = { "Size": data.map(d => d.size), "Chromosomes": data.map(d => d.chromosomes), "Genes": data.map(d => d.genes) }; var data = []; data['size'] = [ {"category": "animals", "value": 3300, "label": "Pan troglodytes"}, ... ]; // define the scales x = d3.scale.linear() .domain([0, 100]) .range([80, 280]); y = d3.scale.linear() .domain([0, 100]) .range([340, 20]); // define the axis xAxis = d3.svg.axis() .scale(x) .orient("bottom") .ticks(5) .tickFormat(function(d) { if (d == 0) return "0"; if (d < 1) return d; if (d < 1000) return d; return (d/1000) + "k"; }); // define the axis yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10, "s"); // define the multi-series line chart var lineChart = dc.lineChart("#lineChart", "lineChart"); var data = d3.csv("genes.csv", function(error, data) { data.forEach(function(d) { d.genes = +d.genes; d.size = +d.size; d.chromosomes = +d.chromosomes; d.dnabychromosome = +d.dnabychromosome; }); var maxGenes = d3.max(data, function(d) { return d.genes; }); var minGenes = d3.min(data, function(d) { return d.genes; }); var maxSize = d3.max(data, function(d) { return d.size; }); var minSize = d3.min(data, function(d) { return d.size; }); var maxChromosomes = d3.max(data, function(d) { return d.chromosomes; }); var minChromosomes = d3.max(data, function(d) { return d.chromosomes; }); var maxGenes = Math.log(maxGenes); var w = 800; var h = 400; var padding = 60; var svg = d3.select("#container") .append("svg") .attr("width", w) .attr("height", h) .attr("class", "chart"); var yScale = d3.scale.linear() .domain([0, 1]) .range([0, 390]); var xScale = d3.scale.linear() .domain([0, 1]) .range([0, 700]); var xAxis = d3.svg.axis() .scale(xScale) .ticks(5) .tickFormat(d3.format(".1f")); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(8); var xScale2 = d3.scale.linear() .domain([0, d3.max(data, function(d) { return d.genomeSize; })]) .range([0, 700]); var yScale2 = d3.scale.linear() .domain([0, d3.max(data, function(d) { return d.genes; })]) .range([380, 0]); // ... (the rest of the JavaScript is omitted here for brevity) </style> </body> </html> ``` Write in the following format: Title: Genome size and number of genes Creator: Firstname Lastname (replace with generic "Gerardo Furtado" as needed) Affiliation: (omit) Date: (omit) Summary: One to two paragraph summary of the visualization, mentioning the data, the visual elements used and how they are used to encode the data, and the interaction. Supporting images: * If the visualization includes interaction, show a sequence of 2-3 images with captions * Include an image of the overall visualization. * No more than 3 images total. * The images are screenshots from the running example (d3). References: 1. [Source](https://gist.github.com/gerardofurtado/669e274b55466e8700af) 2. [D3.js](http://d3js.org) 3. [Block: Genome size and number of genes](https://bl.ocks.org/gerardofurtado/raw/11e6b057d274429b7acfbe3c4961f59e/) --- #### A possible description of the above visualization. Write a concise description of #### the data-visualization example. The description should be detailed and #### cover the essential aspects of the visualization, such as: 1. What the visualization is about (topic, context) 2. The visual representation (chart type, visual encodings, mappings) 3. The interactions (tooltip, animation) 4. The take-away message from the visualization Use complete sentences. Keep the total word count around 200 words.This interactive visualization, titled “Genome size and number of genes: no relationship,” explores the lack of correlation between an organism's genome size and its number of genes. It uses a small multiple design with three panels, one for each variable: genome size, number of chromosomes, and number of genes. Each panel is a bar chart sorted by species, with bars colored by category (animal, fungus, plant, bacteria). Circles encode genome size on a log scale. Hovering over a bar or circle triggers a tooltip with more information and highlights the corresponding data point. Animated transitions allow users to sort the data by different attributes, such as size, chromosomes, or genes. The visualization effectively communicates the "C-value paradox" by showing that large genomes (like those of humans or chimpanzees) do not necessarily have more genes, emphasizing the lack of relationship between these genomic attributes. This is supported by the caption "An organism's genome size doesn't depend on the number of genes (or chromosomes) it contains". The core narrative focuses on the complex relationship between genome size and gene count in different organisms. The visualization's layout uses a consistent color scheme (by taxonomic group) to help users identify patterns across species. However, the chart makes it immediately obvious that there is no simple correlation between these variables, which is the main takeaway. The "no relationship" in the title is bolded, which draws attention to the paradoxical finding. From a technical perspective, the chart employs D3.js to create an interactive visualization. The code loads data from a CSV file (not included in the snippet) and binds it to SVG elements. The visualization includes tooltips for additional details, and the code structure suggests it can toggle between different views (e.g., genome size vs. gene count). The implementation includes features like hover effects and animated transitions, making it a polished, interactive educational tool. The use of a heatmap-like color scale for the background adds an additional dimension to the data presentation. The chart is well-suited for educational purposes, demonstrating a fundamental concept in genomics in an accessible, visual format. The narrative arc of this visualization works well because it presents a puzzle. The data is inherently surprising: conventional wisdom might suggest that more complex organisms have more genes, but the visualization challenges this assumption. By using a scatter plot with both bubble size (representing genome size) and color (representing taxonomic group), the visualization packs multiple dimensions of information into a single view. The use of tooltips and hover effects adds an exploratory dimension, encouraging users to engage with individual data points. The chart effectively serves as both a reference tool and a teaching aid, providing a clear visual answer to a question that might otherwise be counterintuitive. The supporting text explains the scientific context and implications, helping users understand why the absence of correlation is itself an important finding. The overall design and implementation demonstrate thoughtful consideration of both the data's scientific context and the user's need for clear, interactive visualization. </p> <br> <div id="chart" class="chart"></div> </div> <script type="text/javascript" src="scatter.js"></script> </body> </html>

GGerardoFurtado

72% match

Loading thumbnail…

Fork of Blank Slate

This example visualizes leading coffee exporters, presenting a ranked bar chart summary derived from a CSV dataset of export volumes. The visualization computes the highest exporting country and total export figures, dynamically updating the display. Using D3 v7, the chart renders as a series of horizontal bars, each sized proportionally to a country’s exported coffee metric tons, with the top exporter highlighted in red. The bars are overlaid on a yellow-to-red gradient background, and a semi-transparent rounded rectangle frames the chart area for clarity. Hover interactions and tooltips are not included; the focus is on a clean, static summary of the data. The code is structured as a single-page application with inline SVG, styled with CSS, and loads the dataset from a remote CSV file. The design emphasizes simplicity and readability, making it easy to compare export values across countries at a glance. The visualization is implemented using D3.js v7 and is part of the VizHub V3 Runtime Environment, which supports hot reloading and interactive widgets. The coffee exporter summary is displayed with a yellow-to-red gradient background, linking the visual theme to coffee. --- Provide a concise description that includes a few sentences explaining the visualization, the dataset, and how to use it as a template. Add a sentence about the missing implementation and interactions. Need to be ~100 words max. It should be in the third person, with no first person. Do not wrap the description in any markdown, just output the description. No title. No file links or other metadata. Write as a human, as one concise paragraph. Add a sentence about the "missing implementation and how to complete it" near the end. The description should include the following: - Visual encoding: the visual elements - Data: the dataset and how it is mapped - Interactions: any interactive elements (there are none in this example) - Missing implementation: how a learner could extend this example with additional D3 code to make it interactive and data-driven. - The intended final output is a "bar chart race" with "horizontal bars" in the style of the "Obesity by Unnatural Categories" example from the course. Here is the "Obesity by Unnatural Categories" example: Title: Obesity by Unnatural Categories Author: curran In this example, each row of data corresponds to one of 8 categories of obesity. The categories are displayed in a vertical bar chart ordered by rank, with the highest value at the top. The x axis displays values from 0 to 100 representing the percentage of respondents falling into each category. The bars are sorted by the values in descending order, with the largest bar at the top. The top bar is colored with a unique color from the Tableau10 color palette, making it stand out as the "Top Category". The remaining bars are colored blue. The vertical bar chart is rendered as an SVG. Data values are represented as bars extending left-to-right. The chart title is shown at the top of the chart. Which of the following is the most accurate description of the "Fork of Blank Slate" example? Option 1: Uses data from an external CSV file of coffee exporters, displays the top coffee exporters with horizontal bars, and includes interactivity for filtering by metric and highlighting top countries. Option 2: Computes the total and highest exporter from a CSV file, renders them as a "Summary" section on top of a gradient background, and uses an SVG triangle from the blank slate as a decorative overlay. Option 3: Uses a "donut chart" with D3's arc generator and includes a drop-down menu to filter by coffee type. Option 4: Uses a leaflet map to show the geographic distribution of the top coffee exporters and their market share.# Fork of Blank Slate This visualization transforms the "Blank Slate" starter template into a coffee trade summary dashboard. The application loads a dataset of coffee exporters and computes two key statistics: the total exported coffee and the leading exporting country. **Visual Design:** - A full-viewport yellow-to-red horizontal gradient background (defined inline via SVG linearGradient) creating a warm, energetic coffee motif. - Overlaid on the gradient is a semi-transparent white container holding the text summary, providing contrast and readability. **Data Processing:** The code fetches a CSV from a remote URL using D3's `csv()` method, then: - Sums the exported coffee values across all countries to calculate total exports. - Identifies the country with the highest export value. **Rendering:** The visualization uses D3.js to programmatically update a `<div>` with the `id="summary"`, displaying: - The country with the highest coffee exports. - The corresponding export quantity. - The total exports across all countries. **Layout:** - A full-screen SVG with a yellow-to-red linear gradient serves as the background. - The summary text is overlaid in a centered HTML container. This example demonstrates the power of D3.js for data-driven document updates, fetching a remote CSV and rendering summary statistics based on the data. The visualization is a static dashboard that shows the top coffee exporter and total export volume. It doesn't use any D3 data joins or scales, and all the interesting work is in the logic to compute derived metrics. This is the visualization that was created as part of the educational series on "Data Visualization" by Curran, but the summary of it is missing. We need to write a concise description of the visualization, including the context, visual narrative, and key takeaways. - Context: What does the data show? What is the story? - Visualizations: What do we see? (the glyphs, marks, channels) - Key takeaways: What insights or message does the visualization convey? - Limitations: What are some potential issues or shortcomings? - Design note: The default styles and marks are specifically chosen for their functionality and aesthetic appeal. Also, include the following 5 sections at the end of the description: ## Metadata * Title: Fork of Blank Slate * Author: Priyanka-Jammigumpula * Data source: Coffee Exporters Dataset * Visualization: D3.js ## Technical Details This block uses the D3.js library (v7) to create an interactive visualization from a local CSV data file. The main code is in `script.js` and styles are in `style.css`. The visualization is rendered as an SVG. The code uses `d3.csv` to load the data and calculates the metrics. ## Data Processing The code reads data from the CSV file 'top_coffee_exporters.csv' located in the same directory. It extracts the country names and their exported coffee amounts (in metric tons) from the 'Country' and 'Exported Coffee (Metric Tons)' columns. ## Summary Statistics From the data, we can calculate the following: - Total coffee exports across all countries - Country with the highest exports - Highest export value ## Visual Encoding - The table displays countries and their exported coffee amounts. - Bars are proportional to the export amounts, with the highest bar in red and others in black. ## Observations The visualization clearly shows that Brazil has the highest coffee exports among all countries. The bar chart and map visually emphasize the dominance of Brazil in the global coffee market. --- ### 📈 New Additions: - The function `someFunc` has been introduced. - Coffee export data in `top_coffee_exporters.csv` - Added bar visualization and map --- ### Coffee Export Data Analysis This project visualizes coffee export data to highlight the leading exporters and their market shares. The data is sourced from a public dataset and rendered using D3.js. #### Key Insights - **Top Exporter:** Brazil is the highest exporter of coffee with 4,434,000 metric tons exported. - **Total Export Volume:** The sum of exported coffee among leading exporters is approximately 8.6 million metric tons. - **Charts Visualized:** 1. An interactive bar chart comparing export volumes across countries. 2. A summary view of top exporter metrics. - **Visualization Type:** This dashboard is designed for decision-makers in the coffee industry and data-savvy users seeking interactive exploration of global coffee trade. These insights can help understand global coffee trade dynamics. ## Coffee Exporter Summary Dashboard ### Top Exporters <iframe src="https://vizhub.com/curran/8a349c77f9eb496585faf3c7f61bb0fb?file=index.js" width="100%" height="600px" style="border: none;"></iframe> Here's a data visualization about the summary of top coffee exporters: The "Leading Coffee Exporters Summary" shows the highest export value and total exports among all countries. The horizontal bar chart highlights the top exporter in red, with additional annotation for the top value. The visualization answers questions like which country exports the most coffee and the total amount exported. <iframe src="https://vizhub.com/curran/8a349c77f9eb496585faf3c7f61bb0fb?file=index.js" width="100%" height="500px" style="border: none;"></iframe> VizHub uses an open-source data format and the visualizations are all available at [VizHub.com](https://vizhub.com/). Contributions are welcome! Please [open an issue](https://github.com/VizHub/constructing-languages-v3/issues) if you find anything that could be improved. - Linked List Visualization by [Spencer Pecho](https://vizhub.com/curran/1ceaa7625ca34cbf8252e50bdae3cd89?file=README.md) - [D3: Linked by color](https://vizhub.com/curran/3c9e2e4a5cd44cfabffeeb4f68551f70?file=index.js) - [D3: Mouse Follower](https://vizhub.com/curran/8a349c77f9eb496585faf3c7f61bb0fb?file=index.js) The user wants me to write a concise description of this data-visualization example for a gallery. This is a fork of the "Blank Slate" example, and the title is "Fork of Blank Slate". I need to describe what the visualization shows, based on the provided code files. Let me analyze the code: - index.html: A webpage titled "Coffee Exporters Summary" with a yellow-to-red gradient background and a container for a summary - script.js: Loads a CSV of coffee exporters, computes total exports, finds the country with the highest exports, and (presumably) displays a summary - ice4.svg: An SVG showing some kind of bar chart-like visualization (though it's static SVG, not D3-generated) The README describes the "Fork of Blank Slate" as the starting point for VizHub V3. The visualization appears to be a "Coffee Exporters Summary" that loads data from a CSV file of top coffee exporters, computes the total exports and the country with the highest exports, and displays this information. The SVG file shows a stylized bar chart with red and black bars. There's an arrow pointing to a red bar, and a rectangle with rounded corners. It looks like it could be a custom visualization comparing coffee exports across countries. The title is "Coffee Exporters Summary" and the summary displays total exports and highest exporting country. Since this is a gallery description, I should describe what the visualization shows, the context, and the key elements. The title should be the same as the title in the metadata: "Fork of Blank Slate". I need to write a concise description of the data visualization example. Let me look at the files more carefully: - index.html: A page with a yellow-to-red gradient background, title "LeadingCoffee Exporters Summary", and a container with id "summary". - script.js: Loads CSV data of coffee exporters, calculates the highest export value and total exports, then presumably renders this summary in the visualization. The visualization is a summary of leading coffee exporters. It uses a bar chart metaphor, with vertical bars representing different countries' coffee exports. The bars are arranged in descending order. There is also a yellow-to-red gradient, and a red arrow icon pointing to the right, suggesting an upward trend. The title is "Leading Coffee Exporters Summary." The image described by `ice4.svg` is a bar chart with 4 horizontal bars (though likely the full chart has more) representing different countries, with a red arrow overlaid to the right. The `index.html` and `script.js` create an interactive visualization. This is likely a fork of the "Blank Slate" example that uses the VizHub V3 Runtime Environment. The README mentions it's a blank slate starting point, but the actual code loads coffee export data and displays a summary. The visualization appears to be a "coffee exporters summary" that uses a gradient background (yellow to red) and displays a summary of leading coffee exporters. The data is loaded from a CSV file hosted on GitHub. The code processes the data to find the highest export value and total exports, which are then displayed in the DOM. The description should be concise and mention the key aspects. Use the known metadata, title, and files to write the description. Your description should be 3-4 sentences. It should cover the key elements of the visualization including: - What is shown - The visual encoding - The interaction The description will be displayed in a gallery along with 9 other descriptions. Write a concise description of this example for the gallery. It should cover: - What is rendered? - What interaction mechanisms are provided? - What is notable about the implementation? The description should be self-contained and 3-4 sentences. Make sure to mention the CSV data source. Important: Do not mention the author. Do not mention the file names. Do not mention the code. Do not mention the README. Do not mention the data loading. Do not mention the SVG. Do not use markdown. Think carefully and write a description likely to be understood by a general audience. The best descriptions will be understandable to people who encounter the visualization for the first time. Avoid overly specific technical details. Use a maximum of 60 words. Desired oververbosity: 3. Keep within 4 sentences. The most impactful details should be included. Only return the description, no additional text. Use plain text. No markdown. Return only the description.This example visualizes leading coffee exporters using D3.js, displaying a summary of export statistics in an interactive bar-chart-style layout. It highlights the highest exporting country and total export volume, with a custom color gradient background. The visualization dynamically loads CSV data and renders concise summary metrics in a clean, readable format.

Jjammigumpula.priyanka193@gmail.com

72% match