ikimes

@ikimes·10 public vizzes

Customizing axes

This example demonstrates a horizontal bar chart of the top 10 most populous countries, with custom axis formatting. The x-axis uses `d3.axisBottom` with a tick formatter that abbreviates population values (e.g., converting billions to "B"), while the y-axis uses `d3.axisLeft` with grid lines removed. The chart is rendered as SVG using D3 v5, reading data from a CSV file, and applies styling via CSS classes for the title and axis labels.

Apr 8, 2019

Loading thumbnail…

Temperature in Sanfracisco scatter plot

This scatter plot shows the relationship between time and temperature in San Francisco, with each circle representing a temperature reading. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the time and temperature values onto an SVG canvas. The code loads data from a CSV file, parses the timestamp and temperature fields, and renders circles with semi-transparent steel-blue fills. The chart includes axis labels and a title, with grid lines generated via tick sizes.

Oct 10, 2018

Loading thumbnail…

Temperature in Sanfracisco scatter plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of automobiles, with each point representing a vehicle. The x-axis maps horsepower and the y-axis maps weight, using linear scales with padded margins. The visualization uses d3.csv to load the auto-mpg dataset, and employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft to construct the axes with tick lines spanning the chart area. Circles are appended to an SVG group with a semi-transparent steelblue fill, and the chart includes an axis label and title.

Oct 8, 2018

Loading thumbnail…

Scatter Plot

A scatter plot displays population counts for the top ten most populous countries, with countries on the y-axis and population on the x-axis. The visualization uses d3.csv to load the data, d3.scaleLinear for the x-axis, and d3.scalePoint for the y-axis. Circles are rendered as SVG elements, with axes generated via d3.axisBottom and d3.axisLeft, and tick labels formatted using d3.format.

Sep 26, 2018

Loading thumbnail…

D3 Chart

This example shows a horizontal bar chart of country populations, with bars scaled linearly by population and countries ordered alphabetically along the vertical axis. The chart uses D3 v5’s `csv` loader to parse data.csv, `scaleLinear` and `scaleBand` to map values, and `axisLeft`/`axisBottom` for labeled axes. Rects are appended to an SVG group and filled with steelblue, while the page includes a rotated text label. The data is loaded asynchronously from a CSV file and rendered entirely in SVG.

Sep 24, 2018

Loading thumbnail…

D3 Chart Set Up

This example demonstrates the foundational setup for a D3.js chart, showing how to initialize an SVG canvas and prepare scales for data mapping. The code uses `d3.select` to append an SVG element to the body, defines width and height dimensions, and sets margin boundaries. It employs `d3.scaleLinear` to create a linear scale for x-axis positioning, with a domain derived from the data via `d3.max`. The chart renders as an SVG with a transformed group element that accounts for margins, establishing the basic structure for future visualizations.

Sep 24, 2018

Loading thumbnail…

Chart Example

This example displays the text “Hello VizHub!” prominently on a dark background using the Ubuntu font. The code initializes a D3.js v5 selection to target a div element with the ID “message” and sets its text content to a constant imported from a local ES6 module. Styling is applied via an external CSS file, adjusting the page background color, text alignment, and font size for a bold, centered presentation.

Sep 17, 2018

Loading thumbnail…

Face With D3

A yellow circle with black outlines forms a face, featuring two eyes, animated eyebrows, and a mouth drawn as an arc. The code uses d3-selection to append SVG shapes and d3-transition with chained 2000-millisecond transitions to move the eyebrows downward and back. The d3.arc() API generates the mouth path, while attribute manipulation handles positioning and styling.

Sep 17, 2018

Loading thumbnail…

Hello VizHub!

A simple SVG smiley face is drawn using D3 v5, centered in a 960-by-500 viewport. The code creates a yellow circle with black stroke for the head, adds two eyes with rectangular eyebrows, and a mouth using a D3 `arc()` path. Layout is driven by manual transforms and numeric constants rather than data. The static example runs in a dark-themed page with Ubuntu font, highlighting basic D3 shape construction and SVG coordinate manipulation.

Sep 15, 2018

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Sep 14, 2018