noelmiranda

@noelmiranda·12 public vizzes

Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing one vehicle. The SVG rendering uses D3 v5 scales, axes, and selections to map data values to screen positions. Axes are customized with tick lines and labels using `axisBottom`, `axisLeft`, and `scaleLinear`, while styling via CSS sets circle opacity and typography. The data originates from an external CSV file, processed by coercing numeric fields before rendering.

Jul 24, 2019

Loading thumbnail…

Scatter plot testing

This scatter plot visualizes automotive data from the UCI Machine Learning Repository’s Auto MPG dataset, mapping horsepower on the x-axis and miles per gallon on the y-axis. Each circle’s radius encodes vehicle weight, with semi-transparent tomato-colored points revealing density patterns. The visualization is built with D3 v5 using `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` for data loading. The SVG rendering includes labeled axes, grid lines via tick sizes, and a rotated y-axis label, all styled with custom CSS for typography and fill colors.

Jul 24, 2019

Loading thumbnail…

Making a Bar chart

This example shows a horizontal bar chart of population data for ten countries, using bars colored steelblue on an SVG canvas. The chart is built with D3 v5, using `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes. The data is loaded from a CSV file and multiplied by 1000 to display full population counts.

Jul 22, 2019

Loading thumbnail…

Making a Bar Chart - 072019

A horizontal bar chart displays population figures for ten countries, with bars sorted alphabetically by country name along the y-axis. The chart uses D3 v5’s `scaleLinear` for the x-axis population scale, `scaleBand` for categorical y-axis positioning, and `axisLeft`/`axisBottom` to render tick marks. Population values from a CSV file are multiplied by 1000 before being passed to the render function. SVG rectangles are appended and sized via `xScale` and `yScale.bandwidth`, with the chart’s main group translated by specified margins.

Jul 22, 2019

Loading thumbnail…

Vertical bar chart

This vertical bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3.js v5 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the population values. Customized axes include rotated country labels, tick marks formatted with abbreviated units (e.g., "1.3B"), and a labeled y-axis emphasizing the population metric. The chart styles rectangles and text elements via CSS for a clean presentation.

Jul 22, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries from a 2018 United Nations estimate, with each circle positioned by country on the y-axis and population on the x-axis. The code uses d3.csv to load the data, d3.scaleLinear for the x-axis, d3.scalePoint for the categorical y-axis, and d3.axisLeft and d3.axisBottom for the ticks. It renders the visualization as SVG, customizing grid lines and axis labels through CSS classes.

Jul 19, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries as circles positioned along a linear population scale and a categorical country scale. The data, sourced from the 2018 United Nations World Population Prospects, is loaded via d3.csv and rendered as SVG. The visualization uses d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom with custom tick formatting and grid lines. Circle styling and axis labels are controlled through external CSS, demonstrating customization of D3 axes and scales.

Jul 19, 2019

Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes by removing domain lines, adjusting tick sizes, and formatting tick labels with `d3.format` to abbreviate large numbers. The chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, with custom tick text and label styling applied via CSS. Data is loaded from a CSV file using `d3.csv`.

Jul 19, 2019

Loading thumbnail…

Let's make a face with D3.js!

A face built from SVG primitives is drawn on a 960 by 500 canvas, with yellow circle head, black-outlined eyes, eyebrows, and a smile-shaped arc. The animation sequentially shifts the entire eyebrow group downward and then back upward over two seconds each using chained D3 transitions. The example demonstrates basic DOM manipulation via `d3.select` and `append`, constructing shapes with attributes, and moving elements with `transition().duration().attr()`, where the mouth is generated with the `d3.arc` generator.

Jul 19, 2019

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the world's most populous countries, using a horizontal layout where bar length encodes population. The code demonstrates custom axis styling with D3 v5, applying tick formatting that converts large numbers to abbreviated forms and removing default axis lines. It uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.format` to customize tick labels. The chart is rendered as SVG, with data loaded from a CSV file.

Jul 18, 2019

Loading thumbnail…

Making a Bar chart

This example shows a D3 bar chart that loads population data for ten countries. It uses D3 version 5.9.2 via the `d3` library, reading data from `data.csv` with the `csv` function. The SVG canvas is defined in `index.html` with fixed dimensions, and styling comes from `styles.css`. The current code only logs the parsed data to the console; it does not yet render any bars, leaving the chart visualization incomplete.

Jul 18, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using data from the 2017 UN World Population Prospects. It demonstrates how to customize D3 axes by removing tick lines and domains, applying a custom tick formatter that converts large numbers to abbreviated labels, and adding axis and chart titles. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with all elements rendered as SVG.

Jul 18, 2019