ash301

Untitled

This interactive area chart displays two metrics from a week of temperature data in San Francisco: average duration in milliseconds (Durchschn) and count (Anz) across time. The visualization uses two linked line charts with a brushable mini-map for zooming, rendered as SVG via D3 v4 APIs including `d3.time.scale`, `d3.svg.brush`, and `d3.svg.line`. The data is loaded from a local CSV file and parsed with `d3.csv`, with time formatted using `d3.time.format`.

Mar 14, 2023

Temperature in San Francisco Line Chart

A line chart displays one week of San Francisco's temperature in degrees Celsius, with time on the x-axis and temperature on the y-axis. The chart, titled "A Week in San Francisco," includes labeled axes and grid lines. It is rendered as an SVG using D3 v7, leveraging functions like `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis`. Data is loaded from a CSV file hosted as a GitHub gist, with timestamps parsed as dates and temperatures converted to numbers.

Feb 21, 2023

World Population Area Chart

This area chart visualizes one week of temperature data in degrees Celsius for San Francisco, sourced from the Data Canvas - Sense Your City dataset. The chart uses d3.area with a curveBasis curve to create a smooth filled path, mapping timestamps to the x-axis (scaled with d3.scaleTime) and temperatures to the y-axis (d3.scaleLinear). Axes are rendered via d3.axisBottom and d3.axisLeft, with SVG elements styled through CSS.

Temperature in San Francisco Scatter Plot

A scatter plot displays one week of hourly temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. Each circle represents a single measurement. The visualization uses D3 v7 to load CSV data, apply time and linear scales, and render SVG axes and circles. The code leverages `d3.csv`, `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, with data parsed into `Date` and numeric values before rendering. The chart includes labeled axes and a title, with a clean grid created via tick lines.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v7’s scaleLinear, axisBottom, and axisLeft APIs to map the data to SVG coordinates, while an interactive grid and labeled axes clarify the distribution. The chart also includes a title and axis labels styled via CSS, with data loaded asynchronously through D3’s csv function and numeric fields parsed from strings.

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each circle positioned along a horizontal population axis and a vertical country axis. The chart uses a linear scale for population and a point scale for categorical country labels, with gridlines extending across the plot area. Built with D3 v7, the visualization loads data from a CSV file, formats axis ticks to abbreviate large numbers as billions, and renders circles with a fixed radius in steel blue. The title appears above the plot, and axis labels are styled with custom fonts and colors.

Customizing Axis

This bar chart displays the population of the top 10 most populous countries, sourced from the UN World Population Prospects data. The chart customizes the y-axis by removing its domain line and tick lines, and the x-axis by applying a custom tick format that converts large numbers into billions with a 'B' suffix. The code uses D3 v7 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with an SVG rendering approach.

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using a horizontal layout where each bar’s length corresponds to the population value. The chart loads data from a CSV file using `d3.csv`, then applies `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with axes rendered via `d3.axisLeft` and `d3.axisBottom`. The SVG rectangles are bound to the data and positioned with the scales, with the data sourced from the United Nations World Population Prospects report.

Let's make a face with D3.js!

A yellow SVG face with black outlines is drawn using D3.js, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate vertically via chained `transition` calls, moving down and back over two seconds each. Using D3 v7, the code selects the SVG, creates a centered group, and builds shapes with `circle`, `rect`, and the `arc` generator for the mouth. The face's proportions are driven by constants like `eyeSpacing` and `eyeRadius`, with no external data source.

Shapes with SVG and CSS

This example demonstrates how D3 version 7 renders basic SVG shapes—circles, rectangles, and a line—within an HTML page. The SVG markup shows explicit styling through inline attributes (like `fill="red"` or `stroke-width="5"`) and group elements using `transform` for positioning and scaling. A separate `styles.css` file resets body margins and hides overflow, while D3 is loaded from a CDN but not used for drawing. The code also references a `bundle.js` file, indicating a potential bundling step, though the visible shapes are static and rely solely on SVG and CSS rather than dynamic D3 data binding.

Cars Report - by Ashish

This example demonstrates a text-based data report generated from a small JSON dataset of used cars. It uses the D3 library (d3.v7) to display the information, though the visualization itself is a simple HTML paragraph updated with a loading message followed by the formatted report. The code relies on JavaScript ES6 modules, including `getCars()` which returns a promise simulating a two-second async delay, and `generateReport()` which filters cars under a price threshold and maps them with `formatCar` into readable lines. The data appears as plain text rather than a graphical chart.