Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published0🌍 Public
Jjesramyep1263
Last edited Mar 25, 2020
Created on Mar 23, 2020
Forked from Customizing Axes

This line chart displays temperature measurements over time, with circles marking each data point. The visualization customizes axes by removing the domain lines, adding tick lines that span the full chart height and width, and including rotated axis labels for both the time and temperature scales. Data comes from a CSV of San Francisco temperatures, rendered as an SVG using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This example visualizes daily temperature data from a CSV file of San Francisco weather, plotting temperature against day using a line chart with smooth curves. Customized axes feature tick marks that extend across the plot, rotated labels, and a title. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`, rendering as SVG. Axis labels and tick styling are applied via CSS classes.

JJake
90% match
Loading thumbnail…

Customizing Axes

This example visualizes the temperature in San Francisco over time using a bar chart, with a custom-styled y-axis and x-axis. The bars represent temperature values, and the axes are configured with D3 v5’s `scaleBand` and `scaleLinear`, alongside `axisLeft` and `axisBottom`. Tick text and lines are styled via CSS classes. The data is loaded from a CSV file using `d3.csv`, and the rendering is done with SVG rectangles.

LLonwabo11
89% match
Loading thumbnail…

Customizing Axes

This example visualizes the temperature in San Francisco over time using a bar chart, with a custom-styled y-axis and x-axis. The bars represent temperature values, and the axes are configured with D3 v5’s `scaleBand` and `scaleLinear`, alongside `axisLeft` and `axisBottom`. Tick text and lines are styled via CSS classes. The data is loaded from a CSV file using `d3.csv`, and the rendering is done with SVG rectangles.

LLonwabo11
89% match
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.

Ttheaddies
83% match
Loading thumbnail…

Temperature[line chart]

This line chart displays temperature readings in San Francisco over time, with a smooth curve and labeled axes. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the SVG path. Data comes from a CSV file loaded via `d3.csv`, where timestamps are parsed as dates and temperatures as numbers. The chart includes a title, rotated y-axis label, and grid lines styled through CSS classes on the SVG elements.

Kkaviya-ds
82% match
Loading thumbnail…

Scatter Plot Template

This scatter plot displays temperature readings over time for San Francisco, with each circle representing a data point. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures to positions, while d3.axisLeft and d3.axisBottom generate the labeled axes with grid lines. Data is loaded as CSV via d3.csv and converted to Date and numeric types before rendering as semi-transparent steelblue circles. The chart includes custom axis labels and a title, all drawn as SVG elements within a fixed-width container.

LLex
82% match
Loading thumbnail…

Temperature Line Chart

This line chart visualizes temperature readings over time, with a smooth curved line and circular markers at each data point. The visualization uses D3’s `scaleTime` and `scaleLinear` for axes, `line()` with `curveBasis` for the path, and `axisBottom`/`axisLeft` for ticks. Data from a CSV of San Francisco temperatures is loaded via `csv` and parsed into dates and numbers. The SVG rendering includes gridlines, axis labels, and a title, with the line styled in steelblue.

DdeafMother
82% match
Loading thumbnail…

Line Chart

This line chart displays temperature measurements in San Francisco over time, with the timestamp on the x-axis and temperature on the y-axis. The visualization uses D3 v5 scales, axes, and a line generator with curveBasis smoothing to create a curved path. SVG rendering handles the display, while data is loaded as CSV from an external source. The chart includes labeled axes, grid lines, and a title, with styling applied via external CSS.

Jjeelong
82% match