James

@JamesCarter1·9 public vizzes

Temperature s in SF

This visualization charts a week of hourly temperature readings in San Francisco, showing the daily warming and cooling cycles. The line chart plots temperature values against timestamps extracted from a CSV file, with the curve smoothed using D3’s `line` generator and `curveBasis` method. The SVG rendering uses D3 v5 scales, axes, and grid lines.

Aug 18, 2020

Loading thumbnail…

Customize Axist

A horizontal bar chart displays the population of the ten most populous countries, using a linear scale for population and a band scale for country names. The x-axis uses a custom tick format that abbreviates large numbers and converts "G" to "B" for billions, while axis lines and ticks are selectively removed via `axisBottom` and `axisLeft`. Data is loaded from a CSV with `d3.csv`, and bars are rendered as SVG rectangles with a padding between them.

Aug 18, 2020

Loading thumbnail…

Cars Scatter plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars. Each red circle represents a single car model, with its position determined by its horsepower along the x-axis and weight along the y-axis. The visualization uses d3.scaleLinear for both axes, with d3.axisBottom and d3.axisLeft for ticks. Data is loaded from a CSV file using d3.csv, and the rendering is performed with SVG circles styled in CSS.

Aug 17, 2020

Loading thumbnail…

Scatter plot

A scatter plot displays the populations of the ten most populous countries, with each country plotted along the vertical axis and its population on the horizontal axis. The chart uses d3.scaleLinear for the x-axis and d3.scalePoint for the y-axis, with d3.axisLeft and d3.axisBottom generating the axes. Population values are formatted using d3.format with a custom tick format that replaces "G" with "B" for billions. The data comes from a CSV file, loaded via d3.csv, and rendered as SVG circles with a steelblue fill.

Aug 17, 2020

Loading thumbnail…

Bar chart

This bar chart shows the population of various countries in 2020, with horizontal bars whose lengths are proportional to population values. The chart uses D3 v5 to load data from a CSV file, scale the values linearly for the x-axis, and use a band scale for the categorical y-axis. The SVG rendering is organized within a translated group, with axis elements produced by `axisLeft` and `axisBottom`. Rectangles are appended for each data point, using the scales to position and size them.

Aug 17, 2020

Loading thumbnail…

Let's make a face

A yellow face with black outline appears on an SVG canvas, featuring two black eyes, rectangular eyebrows, and an arc-shaped mouth. The face’s parts are drawn using d3.js v5 primitives like circles, rects, and an arc path. An animation sequence moves the eyebrows down and back up via chained `transition().duration(2000)` calls, creating a surprised or expressive blink effect within the React framework.

Aug 15, 2020

Loading thumbnail…

Shapes SVG-CSS

This example demonstrates a variety of SVG shapes—circles, rectangles, lines, and a path—composed in a single 960×500 viewport. It shows how inline SVG attributes like `fill`, `stroke`, and `transform` control appearance, while CSS classes and rules in `styles.css` style grouped elements, such as setting stroke width and color for line and path elements. The visualization is built with raw React and SVG, using no external charting library, and its markup is directly written in `index.html`.

Aug 15, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple static HTML report listing three used cars with their model years and prices. The page uses plain HTML elements, including a heading and an unordered list with a class attribute, styled by an external CSS file. The CSS sets the body to a monospace font and applies blue color to the highlighted list items. No JavaScript libraries or frameworks are involved; the report is rendered entirely through static markup and styles.

Aug 15, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple report that lists cars priced under $2,500, using asynchronous data loading and string formatting. It shows how JavaScript modules, promises, and array methods like `filter`, `map`, and `join` work together. The code defines `getCars()` to return a promise that resolves after a 2-second delay, simulating a fetch of static JSON data, while `generateReport` filters and formats each car via the `formatCar` function. The final output replaces the loading text in the DOM with a multiline message, rendered inside a `<pre>` element.

Aug 14, 2020