GeMixl

@GeMixl·3 public vizzes

Temperature in San Francisco

This line plot displays one week of temperature data in San Francisco over time, with the line connecting individual observations and semi-transparent circles highlighting each data point. Rendered in SVG using D3 v5, the visualization uses `d3.scaleTime` for the time-scaled x-axis and `d3.scaleLinear` for the temperature y-axis, with grid lines from D3 axis ticks. The data is loaded from a CSV file hosted at vizhub.com, and the code constructs the chart using D3's `line` generator, `axisBottom`, and `axisLeft` APIs.

Dec 16, 2020

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of country populations, with countries arranged along the y-axis and population counts scaled along the x-axis. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scaleBand to map values to positions, and SVG rectangles for rendering. Custom margins are applied by translating a group element, demonstrating basic axis setup without displaying axes. The chart highlights relative population differences among the ten most populous countries.

Dec 15, 2020

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of country populations, with each bar’s length proportional to population and country names along the y-axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country values, rendering bars as SVG rectangles within a grouped `<g>` element. Data is loaded from a CSV file via `csv()`, with population values converted from billions to raw numbers. The chart includes fixed margins for spacing but does not display axes or labels, focusing on the raw bar layout.

Dec 15, 2020