theaddies

@theaddies·11 public vizzes

Months on an Arc

Twelve month names curve around a circular arc, with each month occupying a wedge-shaped segment of the ring. The visualization uses D3.js version 3.5.6 to generate SVG paths via `d3.svg.arc` and `d3.layout.pie`, mapping month lengths to angular extents with a small padding between slices. Month labels are placed along each arc using SVG `<textPath>` elements that reference the generated path IDs. The chart is centered and rotated fifteen degrees, with the ring’s radius and text styling defined in CSS.

Mar 2, 2022

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the populations of ten countries, using a linear scale for population values and a band scale for country names. It visualizes data loaded from a CSV file with `d3.csv`, and scales using `scaleLinear` and `scaleBand`. The chart renders SVG rectangles with axes generated by `axisLeft` and `axisBottom`, plus margins and padding for clear layout.

Feb 24, 2022

Loading thumbnail…

Let's make a face D3.js

This example demonstrates how to construct a simple face using D3.js shapes, specifically a mouth arc rendered in an SVG container. The code uses D3’s `select` method to access the SVG element and the `arc` generator to define the mouth’s geometry based on inner and outer radii and start/end angles. A dataset containing arc values is logged to the console for inspection, though no dynamic rendering occurs. The visualization is built with React-compatible D3 v7, rendering static SVG elements centered via a translation transform.

Feb 24, 2022

Loading thumbnail…

world population area chart

This visualization presents global population changes over time with a smooth area chart, using a time-scaled x-axis and a linear y-axis that displays population in billions. The chart is built with D3.js, leveraging the `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` functions to generate the SVG path. The area is filled in maroon with a basis curve, and the y-axis labels are formatted using a custom tick format that converts values to billions. Data is sourced from a CSV file containing world population figures by year.

Feb 23, 2022

Loading thumbnail…

Fork of line chart

This fork of a line chart displays temperature readings for San Francisco over time, using an area path rendered by `d3.area` with a `curveBasis` to smooth the line. The visualization employs `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Data loads from a CSV file via `d3.csv`, parsing timestamps and numeric temperatures. The chart includes labeled axes, a title, and grid lines styled with CSS within an SVG canvas.

Feb 23, 2022

Loading thumbnail…

line chart

This line chart shows temperature readings in San Francisco over time, with a smooth curved line tracing the data points and labeled axes for time and temperature. The visualization includes a title and uses a time-based x-axis scale with grid lines. The code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisBottom and d3.axisLeft, rendering to SVG. Data is loaded from a CSV file containing timestamps and temperature values.

Feb 23, 2022

Loading thumbnail…

temperature of san francisco

This scatterplot displays the temperature of San Francisco over time, with each circle representing a measurement. The visualization uses D3 v7 to load CSV data and render an SVG. It employs `scaleTime` and `scaleLinear` to map timestamps and temperature values to pixel coordinates, with `axisBottom` and `axisLeft` generating labeled axes and gridlines. The circles are styled with a semi-transparent steelblue fill, and the chart includes titles for both axes and the overall graph.

Feb 21, 2022

Loading thumbnail…

Fork of Scatter plot

This scatter plot visualizes the relationship between vehicle weight and horsepower using the auto-mpg dataset. The visualization employs d3.scaleLinear for both axes, with axisBottom and axisLeft generating tick marks and grid lines. Data points are rendered as semi-transparent steelblue circles via SVG circle elements, sized at a constant radius of 18 pixels. The chart includes axis labels and a title, with all styling handled through external CSS.

Feb 21, 2022

Loading thumbnail…

Scatter plot

This scatter plot shows the population of the top 10 most populous countries, with each circle representing a country and positioned along the x-axis by its population. The chart is rendered as an SVG using D3 v7, with axes created through `axisBottom` and `axisLeft` functions. Data is loaded from a local CSV file using D3's `csv` function, then scaled with `scaleLinear` and `scalePoint`. The visualization includes grid lines from tick marks and a custom format function that converts numbers to readable units.

Feb 21, 2022

Loading thumbnail…

customizing axes

This example shows a horizontal bar chart of the top 10 most populous countries, with custom axis styling. It uses d3.csv to load population data, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the numeric x-axis. The code removes default axis domains and gridlines via selections, applies custom tick formatting with `format('.3s')` to abbreviate large numbers, and adds axis titles and a graph title. All rendering is done with SVG elements, with bar colors and text styles defined in an external stylesheet.

Feb 21, 2022

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic SVG shapes and style them using CSS. It shows six circles and rectangles, some with explicitly set fill colors and others styled through CSS classes, along with a line and a polyline path. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within an `<svg>` tag, applied using React’s JSX syntax. CSS rules in a linked stylesheet control the stroke properties of the line elements, while the SVG `transform` attribute scales and translates the shapes.

Feb 20, 2022