José

@jmquintana·7 public vizzes

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius across multiple world cities, with each city represented by a distinct colored line. The visualization uses D3 v5’s scaleTime, scaleLinear, scaleOrdinal, and nest to group data by city, while a line generator with curveBasis smooths each temperature trend. A color legend, rendered via a custom colorLegend module, identifies the cities. The data comes from the Data Canvas - Sense Your City dataset, loaded as CSV, and the chart is drawn as SVG with gridlines and axis labels.

Jul 18, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository's Auto MPG Data Set. Each red semi-transparent circle represents a car, with its x-position mapped to horsepower and y-position to weight. The visualization is rendered as an SVG using D3 v5, employing `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while CSS styles the circles and text elements. The data is loaded via D3's `csv` function from a remote URL.

Jul 18, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data from the 2018 United Nations World Population Prospects estimate. The chart customizes D3 axes by removing tick lines and the axis domain, applying a tick format that abbreviates large numbers (e.g., G to B), and adding an axis label and title. It uses d3.scaleLinear for the x-axis, d3.scalePoint for the y-axis, and d3.axisBottom and d3.axisLeft to render the axes in SVG.

Jul 18, 2020

Loading thumbnail…

Customizing Axes

This visualization displays the top 10 most populous countries using a circle-based bar chart with customized D3 axes. The data derives from the 2018 United Nations World Population Prospects, with population values scaled by 1000 for readability. The code uses `d3.csv`, `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render the SVG chart. Axis customizations include a tick formatter that converts billions (G) to billions (B), removed domain lines, left-aligned country labels, and a custom y-axis label positioned below the x-axis.

Jul 18, 2020

Loading thumbnail…

Customizing Axes

This bar chart shows the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. It highlights how D3 axes can be customized, including rotated tick labels, a formatted population scale that abbreviates values like "1.4B", and removed axis lines. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with SVG rendering. A custom tick format function converts G to B for billions, and grid lines extend across the chart.

Jul 18, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js v5 SVG visualization can respond to browser resizing. The chart container fills the page using CSS, and the `redraw()` function extracts its `clientWidth` and `clientHeight` to set the SVG’s dimensions. It then draws a dynamic X shape—two green lines with 100-pixel stroke width—that always spans the full viewport. A `window` resize event listener triggers `redraw()` on every size change, ensuring the visualization stays responsive without recalculating scales. The rendering relies on SVG elements and direct attribute updates.

Jul 18, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

The example demonstrates how SVG shapes—circles, rectangles, lines, and paths—are styled with inline attributes and CSS classes to create a colorful, layered composition. It shows grouped elements inheriting fill and stroke properties, while a dedicated `.lines` class applies thicker stroke styling to line and path elements. The code uses plain SVG markup within an HTML document, with CSS rules controlling the body margin and line appearance, and applies a scaling transform to the entire group for visual emphasis.

Jul 17, 2020