N

NoWizards

@NoWizards·16 public vizzes

Loading thumbnail…

Bowl of Fruit - General Update Pattern nested elements

A bowl of fruit demonstrates D3’s general update pattern with nested SVG elements, animating apples and lemons as data changes. Circles and labels enter, update, and exit via chained transitions, using `selection.merge()` to combine enter and update sets. The code applies `scaleOrdinal` for color and radius, keying elements by `d.id`, and shrinks exiting circles to zero before removing them.

Loading thumbnail…

operations graph

This visualization compares planned versus actual oil well operations using two connected line charts. The top chart tracks operation timelines against dates, while the bottom chart displays cumulative costs over time. Using D3.js v5 with SVG rendering, the code employs d3.scaleBand, d3.scaleTime, and d3.scaleLinear to map operations, dates, and costs. Data comes from a hardcoded JavaScript array containing operation names, planned/real dates, and costs.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

A bowl of five apples is drawn as SVG circles; over time, apples are eaten and one is replaced by a lemon, demonstrating D3’s general update pattern special cases. The code uses `selection.selectAll`, `.enter().append`, `.merge`, and `.exit().transition()` to animate radius and fill changes, while employing ordinal scales for color and size. The coordinates are computed via an `xPosition` helper that spaces circles horizontally.

Loading thumbnail…

chart.js

A line chart displays seven monthly data points with a single dataset, rendered onto a canvas element. The example uses the Chart.js library (version 2.8.0) via its CDN, constructing a `Chart` instance with `type: 'line'`. The dataset defines a red background and border color, with `lineTension: 0.0` to create straight segments between points. The chart is embedded in a minimal HTML page, with the canvas retrieved by ID and styled via CSS to fill the viewport without margins or scrollbars.

Loading thumbnail…

operations graph

This visualization compares two data series on a shared timeline: one series plots numeric x/y values with stepped and natural curves, while a second set overlays planned versus real operation dates and costs for drilling activities. The chart uses two linear scales for the primary data, a time scale for the right axis, and a band scale for rotated operation labels along the bottom. It is built with D3 v5, rendering SVG circles and paths via `d3.line` and curves, with data loaded from a TSV file and a hardcoded JavaScript array.

Loading thumbnail…

multiple lines better func

Two line charts compare the y1 and y2 series against a shared x-axis, with green step curves and red natural curves drawn via d3.line and distinct curve interpolators. Each series has its own left and right y-axis scales created with d3.scaleLinear and d3.axisLeft/axisRight, while a third band axis lists operation labels from example.tsv, rotated for readability. The visualization uses d3.tsv to load the tab-separated data and renders SVG circles and paths for each point. Axis ticks for operations are staggered using the scaleBand step.

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population data for the ten most populous countries, sourced from United Nations world population prospects 2017. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with custom tick formatting that converts G to B for billions. d3.axisLeft removes domain and tick lines for a cleaner look, while d3.axisBottom applies tick marks and a custom title label.

Loading thumbnail…

Making a Barchart

A bar chart displays the frequency of each letter in the English alphabet. The chart uses D3 v5’s `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with data loaded via `d3.csv`. Two additional axes show the same data with different scales: a right y-axis uses a scale from 0 to 100, while the primary left y-axis displays percentages with ten ticks. Bars are rendered as SVG rectangles, styled with the CSS class `bar`, and turn brown on hover. Data comes from the letters’ frequency in the CSV file.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the world's ten most populous countries, sourced from United Nations world population prospects 2017 data. D3 v5 renders the visualization as SVG, using `scaleLinear` and `scalePoint` to map population values and country names. The chart includes axes with custom tick formatting, a title, and colored circles representing each country, with data loaded via `d3.csv`.

Loading thumbnail…

Basic Chart, simple dataset

This example displays two overlaid line charts, each plotting a distinct series from a tab-separated dataset against the same x-axis. The visualization uses D3 v5 to load data via `d3.tsv`, applies linear scales (`d3.scaleLinear`) to map x and y values, and renders the series as both green and steel-blue circles and connected paths using `d3.line`. The SVG output is transformed by a 25-pixel offset, while the dataset contains paired y-values across nine x-points.

Loading thumbnail…

Basic Chart, simple dataset

This example shows five red circles positioned in a linear diagonal pattern with x values from 100 to 500 and y values from 50 to 250, loaded from a two-column TSV dataset. The visualization uses D3 v5’s `d3.tsv` function to asynchronously fetch the data, then binds it to SVG `circle` elements through the `data()`, `enter()`, and `append()` chain. Each circle’s `cx` and `cy` attributes are mapped directly from the data columns, while the SVG canvas has a light gray background. The dataset mimics simple population-related coordinates, though it contains no actual population figures.

Loading thumbnail…

Making a Barchart reusable code

This example demonstrates a reusable bar chart built with D3.js v5, displaying the frequency of letters in a dataset from the United Nations world population prospects. It uses `d3.scaleBand` and `d3.scaleLinear` to position bars, `d3.axisBottom` and `d3.axisLeft` for axes, and renders SVG elements. The chart exposes configurable width, height, and margin via accessor functions, and broadcasts a custom mouseover event through a `d3.dispatch` object. Data is loaded asynchronously from a CSV file using `d3.csv`.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It plots temperature in degrees Celsius over time, with multiple lines representing different cities. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with d3.curveBasis to generate smooth paths. d3.nest groups data by city, and d3.axisLeft and d3.axisBottom render axes with custom labels.

Loading thumbnail…

Making a bowl of fruit

Five apples appear in a row, then one exits and another becomes a lemon. This D3.js example demonstrates the general update pattern through chained `selection.join` methods without using `join`, instead applying `enter`, `merge`, and `exit` to handle data changes. It uses `scaleOrdinal` for fruit colors and radii, and `setTimeout` to trigger pop and type-change mutations. The SVG circles are positioned with fixed `cx` values and a static `cy`, with the exiting fruit turning black before removal.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset. Each red circle represents a vehicle, with its position determined by d3.scaleLinear functions mapping the data to SVG coordinates. The visualization includes labeled axes with tick marks, a custom x-axis title, and gridlines created using d3.axisBottom and d3.axisLeft. The data is loaded via d3.csv and parsed to numeric values before rendering.

Loading thumbnail…

Using SVG and D3

A yellow circle with black outline forms a face, featuring two dark eyes and animated eyebrows that raise and lower over time, alongside a curved mouth drawn as an arc. The SVG is centered within a 960 by 500 viewport, built entirely with D3 v5’s `select`, `append`, and `arc` APIs, using chained `transition` calls to animate the right eyebrow’s vertical position over two-second intervals.