Sean Moore

Block IV Projections

A multi-line chart displays budget projections for Block IV SSN over time, with each line representing a distinct SSN and its delivery estimates. The chart uses D3's `scaleTime` for both axes, `line` with `curveBasis` for smoothing, and `nest` to group data by SSN, colored via `schemeCategory10`. A custom `colorLegend` function renders the legend. The data, sourced from a CSV file, is parsed into `Date` objects for the x and y axes, showing delivery dates against budget years.

Nov 18, 2019

Line Chart with Multiple Lines

This line chart displays multi-year budget estimates for Block IV SSN submarines, with each line representing a different submarine class and its projected delivery dates. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for both axes, `scaleOrdinal` for color mapping, and a `line` generator with `curveBasis` smoothing. A color legend is built using a custom `colorLegend` function, while the data is sourced from Data Canvas - Sense Your City and processed via D3's `nest` and `descending` sorting to order the lines.

Nov 18, 2019

Cars Scatter Plot

This scatter plot visualizes car data from the UCI Machine Learning Repository’s Auto MPG dataset, displaying delivery dates against estimate years with red semi-transparent circles. The code uses D3 v5’s `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG axes with gridlines, while `csv` loads the remote dataset. Each point’s position is mapped via `xScale` and `yScale`, and the chart includes labeled axes and a title, with styling handled through external CSS.

Nov 14, 2019

Line Chart with Multiple Lines

This line chart tracks projected delivery dates against report years for multiple social security number categories over time. The visualization uses D3 v5 with scales, axes, and a line generator with curveBasis smoothing to render each category as a distinct colored path. Data is loaded from a CSV file and grouped using d3.nest. The chart includes a custom color legend component and axis labels, with temperature data sourced from the Data Canvas – Sense Your City project.

Nov 13, 2019

Line Chart with Multiple Lines

This line chart displays projected delivery dates by report year for multiple Social Security Number (SSN) groups, with each line representing a distinct category color-coded using `d3.scaleOrdinal` and `schemeCategory10`. The chart includes labeled axes, a title, and a color legend rendered as SVG circles and text. It uses `d3.line` with `curveBasis` smoothing, `d3.nest` to group data by SSN, and `d3.axisBottom` and `d3.axisLeft` for ticks. Data comes from a CSV of modified SSN records, parsed with `d3.csv` and converted to JavaScript `Date` objects.

Nov 13, 2019

Making a Bar Chart

A bar chart displays population data for ten countries from a CSV file. D3.js v5 loads the data with `d3.csv`, converts population values to numbers, and uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis to create the chart. The example demonstrates fundamental DOM manipulation by appending SVG `rect` elements, though the initial implementation only sets fixed width and height values rather than computing them from the scales. The chart renders in an SVG container within a simple HTML page.

Line Chart with Multiple Lines

This example visualizes projected delivery dates for Social Security numbers across multiple report years, using a smooth, curved line to show the relationship between report year and projected delivery time. The chart employs time-scaled axes on both dimensions, with a maroon line path rendered in SVG. Built with D3 v5, it uses d3.csv to load external data, d3.scaleTime for temporal scaling, d3.line with d3.curveBasis for the smoothed path, and d3.axisBottom and d3.axisLeft for labeled axes with grid ticks.

Projections for SSN

This example displays temperature changes in San Francisco over a week using a time-series line chart rendered as SVG. The code loads data from a CSV file and maps timestamps to the x-axis and temperature to the y-axis, with a smooth curve via `d3.line` and `curveBasis`. It uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft`/`axisBottom` to build axes, while `d3.extent` sets domains. The visualization includes labeled axes and a title, styled with custom CSS for the maroon line and grid ticks.

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses multiple lines to compare temperature trends across cities, with each line color-coded by city name. Built with D3 version 5, the code employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for scaling, `d3.line` with `d3.curveBasis` for path generation, and `d3.nest` for grouping data. A custom color legend component (`colorLegend.js`) renders the categorical color scale, while axes are drawn using `d3.axisLeft` and `d3.axisBottom` with gridlines.

Line Chart with Multiple Lines

This line chart displays weekly temperature readings across multiple cities, with each colored line representing a different city’s production season. It uses D3 v5 with nested data grouping via `d3.nest()` and renders SVG paths generated by `d3.line()` with a basis curve. The chart includes axes from `d3.axisBottom` and `d3.axisLeft`, and a custom color legend built with `scaleOrdinal` and `schemeCategory10`. Data comes from the Data Canvas - Sense Your City dataset, loaded as CSV.

Making a Bar Chart

This example demonstrates how to construct a basic bar chart from a CSV dataset of national populations. It visualizes the population values for ten countries, with bar heights corresponding to the data. The implementation uses D3 v5 to load the data with `d3.csv`, scales and axes are created via `d3.scaleBand` and `d3.scaleLinear`, and the SVG is rendered through the `d3.svg` API. The chart is drawn with D3's SVG helpers rather than a separate plotting library.

Making a Bar Chart

This bar chart shows population estimates for ten countries, ordered from most to least populous, with China leading and Mexico in tenth place. The visualization uses D3 v5 to encode the data from a CSV file into SVG rectangles on a 960-by-500 canvas. The `d3.csv` parsing is combined with `d3.scale` and `d3.axis` functions to map population values to bar heights and render the chart.

Making a Bar Chart

This example demonstrates how to build a basic bar chart from a CSV dataset, showing the population of ten countries. It uses D3.js v5 to load the data and map each country's population value to the height of a corresponding rectangle on an SVG canvas. The chart is rendered using SVG elements, with the `d3.csv` parser handling the `data.csv` file and SVG `<rect>` elements scaled proportionally to the population figures.

Making a Bar Chart

This example demonstrates the first steps of building a bar chart with D3.js, using the `select` API to target the SVG element and reading its `width` and `height` attributes. The page renders an empty 960 by 500 pixel SVG canvas, setting up the fundamental scaffolding for a future chart. The code relies on D3 v5 and renders vector graphics through the SVG framework, though it does not yet draw any bars or data.