lwinmgsoe

@lwinmgsoe·6 public vizzes

Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense your City. The chart plots temperature in degrees Celsius along the y-axis against time on the x-axis, with a smooth maroon curve drawn using a basis interpolation. The visualization is rendered as an SVG using D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `line` generator with `curveBasis` to create the path. Grid lines and labeled axes provide context, while the title “A week in San Francisco” appears above the plot.

Apr 23, 2020

Loading thumbnail…

Line chart

This chart uses a line chart to display the top ten countries by population, with circles marking each data point and a labeled axis. The visualization is built with D3 v5, using `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and custom formatting to convert values to billions. Population data is loaded from a CSV file and scaled, while the SVG rendering uses a transformed group element for the plotting area. The chart highlights the distribution of population sizes across the listed nations.

Apr 23, 2020

Loading thumbnail…

Customizing aXis

This example visualizes the top ten countries by population using a bar chart rendered as circles, with data sourced from the United Nations. It shows how to customize D3 axes by using `d3.axisBottom` with a custom tick formatter that abbreviates numbers using `d3.format('.3s')` and replaces the 'G' suffix with 'B' to display values in billions. The chart applies `d3.scaleLinear` and `d3.scaleBand` for positioning, and renders SVG circles scaled by population. The axis labels and tick formatting are explicitly styled via CSS, demonstrating custom axis configuration.

Apr 23, 2020

Loading thumbnail…

Customizing aXis

A horizontal bar chart displays the populations of the ten most populous countries, using data from the UN. The chart customizes the bottom axis by converting D3’s default SI-prefix formatting from “G” to “B” via `format('.3s')` and string replacement. It builds scales with `scaleLinear` and `scaleBand`, renders SVG rectangles for bars, and positions the axes using `axisBottom` and `axisLeft`. The visualization is generated with D3 v5 and styled with plain CSS.

Apr 23, 2020

Loading thumbnail…

Bar chart

This bar chart displays the population of ten countries, sourced from UN data, with values scaled by a factor of one thousand. It uses D3 v5 to load the CSV dataset and render SVG rectangles, with `d3.scaleLinear` mapping population to bar width and `d3.scaleBand` positioning countries along the vertical axis. The chart includes axis labels generated by `d3.axisLeft` and `d3.axisBottom`, and applies a steelblue fill to bars with padding between them for clarity.

Apr 23, 2020

Loading thumbnail…

HTML Starter

This example renders a simple yellow smiley face using D3.js v5’s `select` and `arc` APIs. The SVG canvas is centered with a `g` transform, then a yellow circle with a black stroke forms the face, followed by two black circles for eyes. A mouth is drawn as a filled arc path using D3’s `arc` generator with specified inner and outer radii and angular extents. The code manipulates SVG attributes directly, with dimensions read from the SVG element itself.

Apr 22, 2020