W

wieswies

@wieswies·16 public vizzes

Loading thumbnail…

Bowl of Fruit

A bowl of fruit starts with five apples, then changes over time as apples are eaten and one apple is replaced by a lemon. The visualization shows how D3.js handles dynamic data updates by animating circle positions, radii, and colors. The code uses `d3.select`, `d3.range`, and custom scale functions like `d3.scaleOrdinal` to map fruit types to colors and sizes. The D3 `transition` API animates the removal, addition, and modification of circles as the dataset shifts through timed `setTimeout` events.

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length on the x-axis against sepal length on the y-axis. Each flower is drawn as a fixed-radius circle in SVG. The code uses d3.csv to load and parse data, d3.scaleLinear with d3.extent for scales, and d3.axisLeft plus d3.axisBottom to render axes with large tick labels. The visualization fills the browser window, with margins applied, and data points are appended via selection joins.

Loading thumbnail…

Fruit bowl to be

Five apples appear in a row, then one disappears after a second, and one apple turns yellow to become a lemon. The example demonstrates basic D3.js data joins with `selection.selectAll`, `enter`, and `exit` methods, using `scaleOrdinal` for color mapping. It renders SVG circles sized by a fixed radius, with transitions triggered by `setTimeout` calls that modify the underlying `fruits` array before re-rendering.

Loading thumbnail…

Fork of World Population Area Chart

This area chart visualizes world population growth over time, using a filled path to show the increasing trend. The SVG rendering relies on D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth curve, with `axisLeft` and `axisBottom` providing labeled axes. Population data is loaded from a CSV file via `d3.csv`, parsed into numbers and Date objects, and styled with custom CSS classes. The chart includes a title, axis labels, and a custom tick formatter that abbreviates billions as "B".

Loading thumbnail…

Fork of SF temp area chart

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart displays temperature in degrees Celsius over time, with a maroon-filled area beneath a line path. The code uses D3 v5's `area` generator with `curveBasis` for smooth rendering, alongside `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` for axes. SVG output is styled with CSS, including large tick labels and an axis label rotated -90 degrees. Data is loaded as CSV and parsed into timestamps and numeric temperatures before rendering.

Loading thumbnail…

SF temp line chart

This line chart visualizes one week of temperature data in San Francisco, using a filled area under the curve to emphasize temperature variation over time. The chart includes labeled axes for time and temperature, with grid lines and a title. It loads CSV data from an external URL, parses timestamps and numeric temperatures, and renders the visualization using D3 v5’s `scaleTime`, `scaleLinear`, `area`, `axisBottom`, and `axisLeft` APIs. The SVG output displays a maroon area path over a clean white background.

Loading thumbnail…

Fork of Temperature in San Francisco

This line chart visualizes weekly temperature measurements in San Francisco, with a line connecting each hourly data point and orange circles marking individual readings. The visualization uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, with axis labels for "Time" and "Temperature." Data is loaded asynchronously from a CSV file using d3.csv, then parsed and rendered through a data join with d3.line and SVG circles. The chart includes gridlines, axis labels, and a title, all styled via CSS.

Loading thumbnail…

Temperature in San Francisco

This scatterplot displays the temperature in San Francisco over one week, with time on the x-axis and temperature on the y-axis. Each orange circle represents an hourly measurement, and axis labels clarify the variables. The visualization uses D3 v5 with `scaleTime` and `scaleLinear` to map data to SVG coordinates, while `axisBottom` and `axisLeft` generate the gridlines and ticks. Data is loaded from a CSV file and parsed before rendering. Styling is applied via CSS, including circle fill and font sizes.

Loading thumbnail…

Cars scatterplot

This scatterplot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The chart uses D3.js’s `scaleLinear` to map data values to pixel coordinates, `axisBottom` and `axisLeft` for the axes, and SVG circles for the data points. The data is loaded from a CSV file via `d3.csv`, and tick labels are formatted using `format('.3s')`. Styling is applied via CSS, including semi-transparent steelblue circles.

Loading thumbnail…

barchart populous countries.d3

This visualization shows the population of the ten most populous countries as circles arranged on a chart, with country names on the y-axis and population values on the x-axis. It uses D3 v5’s `scaleLinear` for the horizontal axis and `scalePoint` for the vertical layout, while `axisBottom` and `axisLeft` render gridlines and ticks. Population data from a CSV file is parsed and multiplied by 1,000, with circles styled orange and labeled via `format('.3s')` to abbreviate values in billions.

Loading thumbnail…

Fork of Fork of Fork of Barchart with D3.js

A horizontal bar chart displays the population of ten countries from a CSV file, with orange bars sized proportionally to population values. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to render axes, while loading data via `d3.csv`. SVG elements are manipulated through selections, with margins and tick formatting customized in the code.

Loading thumbnail…

Fork of Fork of Barchart with D3.js

This visualization displays the population of the top 10 most populous countries as horizontal bars, sorted by descending value. It uses D3 v5 with SVG rendering, loading data from a CSV file and scaling populations (normalized by thousands) via `scaleLinear` and `scaleBand`. Axes are generated with `axisBottom` and `axisLeft`, with the y-axis stripped of its domain line and ticks. The code formats tick labels using D3's `format` function, converting billions to ‘B’ suffix.

Loading thumbnail…

Fork of Barchart with D3.js

This example shows a horizontal bar chart of population data for the ten most populous countries, with each bar’s length proportional to population and country names on the y-axis. Using D3 v5, the code loads `data.csv`, parses populations, and maps values via `scaleLinear` for the x-axis and `scaleBand` for the y-axis. It renders an SVG with `axisLeft` and `axisBottom` for labeling, while rectangles are sized using the computed scales. Orange bars and styled text come from `styles.css`.

Loading thumbnail…

Barchart with D3.js

This bar chart displays the populations of ten countries, from China’s 1.4 billion to Mexico’s 131 million. The data, loaded from a CSV file, is rendered as horizontal bars using D3.js v5. The visualization uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to draw the axes. Each bar’s width is proportional to its population value, with steel-blue rectangles drawn in an SVG container.

Loading thumbnail…

Fork of D3 face

This demo builds a cartoon face from basic SVG shapes—a yellow circle for the head, black circles for eyes, and an arc for the mouth—using D3 v7’s `select` and `arc` helpers. The eyebrows are rectangles that animate up and down via chained `transition().duration(2000)` calls. All elements are grouped and centered within an SVG using static transform attributes, with no external data source.

Loading thumbnail…

D3 face

A yellow circle with black outlines forms a face, featuring two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows continuously bounce up and down through repeated `transition().duration()` calls, creating a simple animation. Built with D3 v7, the visualization uses `select`, `append`, and the `arc` generator to construct SVG elements, with all facial features positioned relative to the center of an SVG canvas.