dtdenver

@dtdenver·16 public vizzes

World Population Area Chart DT

This area chart displays global population growth from 1950 to 2015, using maroon-filled area under a curve to emphasize the upward trend. It is built with D3 v5 and rendered as SVG, using `scaleTime` for the year axis, `scaleLinear` for population values, and the `area` generator with `curveBasis` for smoothing. The y-axis labels abbreviate billions with `format('.1s')`. Data comes from the world-population-by-year-2015.csv file.

Nov 5, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart DT

This area chart displays temperature variations in San Francisco over a week, using data from Data Canvas - Sense Your City. The visualization employs d3.scaleTime and d3.scaleLinear for the axes, with a d3.area generator using curveBasis to create a smooth, filled path. SVG rendering with d3.axisBottom and d3.axisLeft adds labeled tick marks and gridlines.

Nov 5, 2019

Loading thumbnail…

A Week in San Francisco Area Chart

This visualization shows a week of temperature readings in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. A smooth, maroon line charts the hourly fluctuations, revealing daily warming and cooling cycles. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `line` with `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG grid and labels. The data, from the Data Canvas - Sense Your City project, is loaded from a CSV file.

Nov 2, 2019

Loading thumbnail…

A Week in San Francisco Line Chart

This line chart displays hourly temperature readings in degrees Celsius for one week in San Francisco, with time on the x-axis and temperature on the y-axis. The data originates from the Data Canvas - Sense Your City initiative. The visualization uses D3 v5, employing `scaleTime` and `scaleLinear` for axes, `scaleTime` for the time-based domain, and the `line` generator with `curveBasis` to create the smoothed path. SVG renders the chart, with axis labels and tick marks generated via `axisBottom` and `axisLeft`.

Oct 27, 2019

Loading thumbnail…

A Week in San Francisco

This 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 hourly measurement, revealing daily temperature fluctuations over the week. The visualization uses D3 version 5 to load and parse the CSV data, scale the axes with `scaleTime` and `scaleLinear`, and render the chart as SVG. Gridlines are added via `axisBottom` and `axisLeft` with tick sizing, and the data originates from the Data Canvas - Sense Your City project.

Oct 27, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a collection of cars, with each circle representing a vehicle. The visualization uses D3.js (v5) to render the plot as an SVG, scaling the data from the included auto-mpg.csv file, which originates from the UCI Machine Learning Repository. The code employs `scaleLinear`, `extent`, and the `axisLeft` and `axisBottom` functions to construct and label the axes, while the circles are appended to the SVG group using D3's selection and data-binding methods.

Oct 27, 2019

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the top 10 most populous countries using circles positioned along a point scale for country names and a linear scale for population values from the 2018 UN World Population Prospects estimate. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG elements, with tick formatting converting values to billions. Circle radii are fixed at 18 pixels, and gridlines extend across the plot area. The visualization features a title and axis labels, with data loaded from a local CSV file.

Oct 27, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart customizes its axes by removing default domain lines and tick marks, applying a custom tick format that abbreviates large numbers (e.g., converting billions to "B"), and adding descriptive axis labels. Built with d3.v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG, with data loaded from a CSV file.

Oct 27, 2019

Loading thumbnail…

Making a bar chart

This bar chart displays the population of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. Rendered as SVG, the visualization encodes population on a linear x-axis and country on a categorical y-axis. The code leverages D3.js v5 APIs including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, compute scales, and draw axes. Bars are appended as `rect` elements, and the data is preprocessed by multiplying the population values by 1000.

Oct 27, 2019

Loading thumbnail…

Making a bar chart

This example demonstrates the process of building a bar chart from scratch, beginning with an empty SVG element and then programmatically adding bars and axes. The code uses the D3 v5 library’s `select` function to target the `svg` element and reads its `width` attribute to establish chart dimensions. Rendering is done entirely in SVG, with the page’s layout set to a full-bleed canvas via the `styles.css` file. The example includes a linked video tutorial that explains each step, making it useful for learning fundamental D3 data-binding and shape-generation patterns.

Oct 27, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG face is drawn with D3.js v5, featuring two eyes, animated eyebrows, and a mouth created using the `d3.arc` generator. The face is centered within an SVG canvas, with facial features positioned via translation transforms. Eyebrows animate upward and downward using chained `transition` calls with a 1500-millisecond duration, while the mouth is rendered as an arc path between specified angles. The example demonstrates fundamental SVG shape creation and coordinate manipulation in D3.

Oct 26, 2019

Loading thumbnail…

Let's make a face with D3.js!

D3.js constructs a smiling face from SVG shapes, including a yellow circle for the head, two eyes, and an arc-based mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition().duration()` calls, moving up and down over two seconds each. The code uses D3 selections and attributes to position elements around a centered group, with all coordinates based on the SVG’s 960×500 dimensions.

Oct 21, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles can be combined to create a simple graphic, using circles, rectangles, lines, and a path. The SVG is scaled via a transform, with individual elements colored through inline fill attributes or grouped under a shared fill and stroke. CSS classes apply stroke width and color to the line and path elements, while the body margin is removed for full-bleed display. The rendering relies solely on SVG markup and external stylesheets, with no JavaScript or data sources involved.

Oct 21, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows is drawn in SVG using D3.js v5. The face is centered via a translated group, with circles for eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The eyebrows transition upward and back downward over two seconds each using chained `transition` and `duration` calls, demonstrating fundamental DOM manipulation and animation with D3's `select`, `arc`, and transition API.

Oct 21, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic SVG shapes—circles, rectangles, lines, and paths—and style them using CSS rules defined in a separate stylesheet. It shows the effects of inline fill attributes, group-level styling properties, and class-based selectors, including stroke color and width. The code imports `select` from D3.js and uses it to set text content in a `div`. The entire scene is rendered through raw SVG markup, with a `transform` applied to the root group.

Oct 20, 2019

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML cars report that displays a static list of used vehicles with their prices, styled using monospace fonts and a red highlighted class. The code imports the `select` function from D3.js to set the text content of a div with the ID `message`, pulling the string from an ES6 module defined in `myMessage.js`. The visualization is rendered purely through static HTML markup and CSS, with no data loading or interactive behavior.

Oct 20, 2019