Loading CSV Data with D3

Loading CSV Data with D3

This example demonstrates how to load and parse a CSV file with D3.js, mapping each row to a JavaScript object. The ChicagoFDIC.csv dataset contains annual banking figures from 1966 to 2000, including columns for investment securities, real estate loans, total assets, and net interest income. Using d3.csv, the data is loaded asynchronously and rendered into an HTML table. The values, which include commas in the raw data, are parsed as numeric strings so they can be used in calculations or visual encodings. This example shows the foundational step in D3 of ingesting external data, with the table providing a clean tabular view of the parsed dataset before any chart is drawn.

94% match

Loading CSV Data with D3

This example demonstrates how to load a CSV file into a web page using D3 v3’s `d3.csv` method. The page displays a static SVG canvas containing a blue line, a red rectangle, and a violet circle, while the CSV data for Chicago’s socioeconomic indicators is parsed into an array of JavaScript objects and logged to the browser console. No chart is rendered; the focus is solely on verifying successful asynchronous data loading and transformation.

JJasonMcGregor

79% match

Chicago FDIC Test

This chart visualizes the FDIC’s consolidated balance-sheet data for Chicago banks from 1966 to 2000, tracking asset composition, loan portfolios, and income streams over time. The stacked or multi-line series compare investment securities, real estate loans, loans to individuals, commercial and industrial loans, total equity, total assets, total loans, net interest income, and non-interest income—all in thousands of dollars. Rendered from a gist by Abechtel, the visualization uses a time-series layout to show relative growth and structural shifts, such as the dramatic rise in commercial and industrial loans and total assets in the late 1970s and 1980s, alongside relatively stable net interest income. The chart likely employs a multi-line or area chart, with each financial metric as a separate colored series. Because values span several orders of magnitude (from ~1 billion to ~330 billion), the y-axis may use a logarithmic scale or focus on a subset of series to keep the trends legible. The title "Chicago FDIC Test" appears in the original file. The data spans 1966 to 2000, capturing over three decades of change. The visualization may use a legend to distinguish between the seven series, though the exact chart type isn't specified. One possible design would be an area chart where each metric is a filled shape, making it easy to see the relative contribution of each category over time. However, with eight series, an area chart can quickly become cluttered. An alternative would be a small multiples layout, with each panel showing one series as a line chart. The Chicago FDIC Test data shows the FDIC-insured banks' financial health in the Chicago area. The dataset includes annual figures spanning over three decades, from 1966 to 2000. With multiple financial metrics tracked over time, this visualization must handle a complex multi-series dataset. A well-designed line chart is the most straightforward and effective visualization for this type of time-series data. Using lines makes it easy to track changes and trends in each metric over the 35-year span. However, with 9 different metrics, the chart risks becoming cluttered if all lines are plotted together. To make this visualization effective, a better approach may be to use a small multiples (faceted) layout, where each metric gets its own line chart panel. This allows viewers to compare trends across categories without overlapping lines. A colorblind-safe palette, consistent y-axis scaling, and clear labels for each panel would improve readability. Adding tooltips to show exact values on hover would be helpful for interactivity. The chart can also be exported as PNG or SVG for sharing. A title like “Chicago FDIC: 1966-2000” with a subtitle mentioning the FDIC data and the selected variables would complete the visualization. The visualization allows for exploring banking trends in the Chicago Federal Reserve District over time. It shows how different loan categories and income components evolved relative to one another and to total assets, revealing, for example, the rising real estate loan share versus the more volatile commercial and industrial loans. The multiple series are distinguished by color, and a legend identifies them. A line chart or small multiples with linked brushing could be used.# Chicago FDIC Test ## A Data Visualization Gallery Example This visualization presents a time-series analysis of Chicago-area FDIC banking data from 1966 to 2000, offering a comprehensive view of the financial sector's evolution over three and a half decades. ## Visualization Description The chart uses a multi-line or small-multiples design to display the bank aggregate metrics across 8 financial categories. Each line traces the year-over-year changes in millions of dollars, with the x-axis spanning 1966-2000 and the y-axis representing dollar amounts in thousands. The visualization reveals several dramatic trends: the explosive growth of Commercial & Industrial loans from under $7 million to over $67 million, the steady climb of total assets from $30 million to $329 million, and the relatively stable patterns of net interest income. The data shows distinct inflection points around 1978 and 1990, capturing periods of significant financial sector expansion. The stark contrast between the steep trajectory of investment securities versus the more moderate growth in non-interest income provides a clear visual narrative of banking industry evolution. This simple line chart effectively displays the differing scales and growth rates across financial metrics over time, with the y-axis automatically scaling to accommodate the wide range of values.# Chicago FDIC Test ## Overview A time-series line chart tracking FDIC financial metrics for Chicago-based banks from 1966 to 1999. ## Visual Design The chart uses multiple colored lines to track financial categories across 33 years. Key series include Total Assets (the highest line, reaching ~$330M by 1999), Total Loans and Leases, and Investment Securities. A logical color palette distinguishes asset categories from income metrics. The y-axis uses a linear scale, which makes early-year differences (when all metrics were under $40M) difficult to discern, though it clearly shows the dataset's exponential growth trend, particularly the acceleration in Total Assets after 1975. The x-axis spans from 1966 through 1999, and the chart appears to show each line labeled directly at its endpoint for easy identification. The author chose this line chart to show the financial growth of Chicago-based FDIC-insured institutions over time. Visualized variables: Investment Securities, Total Real Estate Loans, Total Loans to Individuals, Commercial & Industrial, Total Equity Capital, Total Assets, Total Loans and Leases, Net Interest Income, and Non-Interest Income. These are metrics over time. All values are in thousands of dollars. The chart makes it easy to track the rise of these metrics over the three-plus decades shown. However, because most of the series show strong upward trends (especially after 1980), it's hard to see the early variation in the lower-value series. What we can infer from the visualization: - There is a strong upward trend in most categories over time, with the "Total Assets" series being the largest. - "Total Loans and Leases" increases dramatically starting in the late 1970s. - The category "Commercial & Industrial" has a massive jump after 1977 and spikes in 1980-1982. - "Total Real Estate Loan" and "Total Loans to individuals" grow steadily but not as steeply. - "Investment Securities" and "Net Interest Income" show modest growth. - The plot probably uses a line chart with Year on the x-axis and dollar amounts on the y-axis. - There may be a log scale due to the large differences in magnitude between the variables, especially the biggest series (Total Assets and Total Loans and Leases) compared to smaller ones (Net Interest Income, Non-Interest Income). - The chart was created in 2012 in response to the 2007-2010 financial crisis; data starts 1966 and ends in 2000. - The chart shows a remarkable, mostly monotonic increase of Total Assets and Total Loans and Leases. - Visualized as a streamgraph or connected line chart, possibly on a log scale. Describe the chart, including its main message and visual elements. Do not criticize, do not list facts, do not make up facts, do not repeat the numbers. Keep it under 4 sentences. Make it suitable for a gallery description. Do not start with "This chart" or "This graph". Use objective, formal wording. Avoid referring to the data directly. A concise description should summarize the overall visual layout, main visual components, and the overall story. Make sure to mention the mark and channel types used and what they encode. Also mention how the visualization is appropriate for the data. Use objective, formal wording. Do not use subjective framing or artful language. Must be 80 words max. Count words, do not count the title. Do not use markdown formatting, just plain text. Do not output the word "title".Tracking Chicago FDIC banking metrics from 1966 to 2000, this line chart shows multiple financial time series across years. Each line encodes a different metric: total assets, total loans and leases, investment securities, and equity capital, among others. The visualization uses color to distinguish these categories, with the x-axis representing time and the y-axis dollar amounts. The logarithmic scale would be necessary to show the exponential growth of Total Assets and Total Loans and Leases versus flatter metrics.

76% match

Loading CSV Data with D3

This example demonstrates how to load and parse a CSV file using D3.js. The page includes minimal HTML and a script that calls d3.csv() to fetch "pension.csv", automatically converting its rows into an array of JavaScript objects. Once loaded, the data is logged to the browser console, where users can verify the parsed structure. The dataset contains pension-related percentages across London boroughs (identified by code and area name) over multiple time periods from May 2002 to Aug 2014. No visualization is rendered—the focus is on showing how D3 handles external CSV data and exposes it as an array of JSON-like objects for further use. The page simply displays a short message noting that the action happens in the console.

BBenHeubl

76% match

Loading CSV Data with D3

This example demonstrates how to load a CSV file with D3. The code uses the `d3.csv` function to asynchronously fetch and parse `anage-data-txt-clean.csv`, converting its tabular rows into an array of JavaScript objects. The resulting data is logged to the browser console for inspection. A static SVG scene with violet circles is rendered in the background, serving as a simple visual placeholder, while the primary focus is on the data-loading process. The example uses D3 v3 and renders output as SVG.

AAudree

Setting Attribute Values from Data

This example demonstrates how to bind CSV data to rectangles in an SVG bar chart, where each bar’s length reflects a numeric value. It uses D3 v3’s `d3.csv` to load the Chicago FDIC dataset, then applies `.data()`, `.enter()`, and `.append("rect")` to create bars. The `width` attribute is set dynamically from the `TotalLoanstoIndividuals` field, while `y` positions are computed by index. The visualization shows a simple horizontal bar chart rendered with SVG, using white space between bars for clarity.

Chicago Fed Loans to Individuals (in millions)

This visualization displays Chicago Fed loans to individuals in millions of dollars as a horizontal bar chart, with each bar representing a year's value. The code uses D3 v3 to load data from a CSV file, sorts the values in descending order, and renders SVG rectangles whose widths correspond to the loan amounts. Hovering over a bar reveals a tooltip via the `title` element, showing the year and its corresponding loan figure. The data source is the ChicagoFDIC.csv file.

Chicago Fed Loans to Individuals (in millions)