jacobs-splunk

@jacobs-splunk·6 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for various car models, using data from the UCI Machine Learning Repository's Auto MPG Data Set. The visualization employs D3 v5's `scaleLinear` and `extent` functions to map data values to the SVG canvas, with axes generated by `axisLeft` and `axisBottom`. Red circles, rendered with 30% opacity to show overlap, represent individual cars, while axis labels and a title are added via SVG text elements. The chart is created using an SVG rendering approach, with the data loaded asynchronously from a CSV file.

Jun 9, 2019

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population for the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes by removing domain lines, adjusting tick sizes and formats (using d3.format to abbreviate large numbers), and adding axis labels. The visualization uses D3 v5 with d3.scaleBand and d3.scaleLinear for scales, and d3.axisLeft and d3.axisBottom for rendering axes as SVG elements, with custom styling applied via CSS.

Jun 9, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, and axes are generated with `d3.axisLeft` and `d3.axisBottom`. Rectangles are appended and sized to represent each country’s population in thousands.

Jun 9, 2019

Loading thumbnail…

Making a Bar Chart

This example presents a horizontal bar chart of the population of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization encodes population with bar length and country names along the y-axis, rendered as SVG rectangles. Built with d3.v5, it loads data from a CSV file and uses d3.scaleLinear and d3.scaleBand for axes, with d3.axisLeft and d3.axisBottom for labels. The code applies a steelblue fill to the bars via CSS.

Jun 9, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red, semi-transparent circles encode each car, with axes labeled and tick marks extending across the plot. The visualization uses D3 v5’s `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load data and render an SVG. Data is fetched from a hosted VizHub CSV file, with values parsed and mapped to positions via the scales.

Jun 9, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates how to customize D3 axes, including tick formatting that abbreviates large numbers with a "B" suffix, axis line removal, and customized tick and label styling. The code uses D3 v5 modules like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart, with SVG rendering for the output. Styling is applied via external CSS, affecting font sizes and colors for text and grid lines.

Jun 9, 2019