D

DanzeOnn

@DanzeOnn·17 public vizzes

Loading thumbnail…

Temperature San Fransisco Line Chart

This line chart displays a week of temperature data from multiple cities around the world, with each city represented by a colored line plotted over time. The visualization uses D3 v5 to load CSV data, scales time and temperature with `scaleTime` and `scaleLinear`, and renders the lines with `line`, `curveBasis`, and `nest` for grouping. A color legend, built with a custom `colorLegend` function, maps city names to ordinal colors, while axes and labels are added using `axisLeft` and `axisBottom`.

Loading thumbnail…

Ball of Fruit

Animated SVG circles represent apples and lemons in a fruit bowl, with hover events selecting a fruit and triggering a black outline. The visualization uses d3’s `scaleOrdinal` for color and radius mapping, and `transition` for smooth resizing and repositioning. Written in React with D3 v5, the data is a JavaScript array whose length and fruit types change over time, demonstrating enter, update, and exit transitions as fruits are added, removed, or substituted.

Loading thumbnail…

Ball of Fruit

Five apples rendered as red circles transition into a bowl, with one apple transforming into a yellow lemon while another disappears. The D3.js v5 example uses `scaleOrdinal` for color and radius mapping, `transition()` for animated duration changes, and React-style selection merging. The `fruitBowl` component handles enter, merge, and exit states with click-driven stroke highlighting. Data is stored as an in-memory array of fruit objects with random IDs, and the SVG output uses a 960x500 canvas with animation over three timed steps.

Loading thumbnail…

Ball of Fruit

Fruit appears in a row of apples inside a brown bowl, with each fruit labeled by type. A series of timeouts demonstrates data updates: one apple is removed, another becomes a lemon, and a third is filtered out. The code uses D3 v5 selections and the ordinal scales `scaleOrdinal` for mapping fruit types to colors and radii, with SVG rendering. The `fruitBowl` function manages enter, update, and exit selections for grouped circles and text, updating transforms and attributes via `merge`.

Loading thumbnail…

Ball of Fruit

Five apples sit in a row on a baseline, rendered as red circles in an SVG with D3 transitions. When a fruit is removed at one-second intervals, the circle shrinks to a radius of zero and disappears. One apple changes type to a lemon, turning yellow and shrinking its radius through an ordinal scale. The React-based example uses the D3 selection API and transition methods to animate enter, update, and exit states.

Loading thumbnail…

Ball of Fruit

Five apples sit in a row on a baseline, rendered as red circles in an SVG with D3 transitions. When a fruit is removed at one-second intervals, the circle shrinks to a radius of zero and disappears. One apple changes type to a lemon, turning yellow and shrinking its radius through an ordinal scale. The React-based example uses the D3 selection API and transition methods to animate enter, update, and exit states.

Loading thumbnail…

Ball of Fruit

Five apples sit in a row on a baseline, rendered as red circles in an SVG with D3 transitions. When a fruit is removed at one-second intervals, the circle shrinks to a radius of zero and disappears. One apple changes type to a lemon, turning yellow and shrinking its radius through an ordinal scale. The React-based example uses the D3 selection API and transition methods to animate enter, update, and exit states.

Loading thumbnail…

HTML Starter

This gallery example draws a smiling face in a 960x500 SVG canvas. It renders a yellow circle with eyes, eyebrows, and an arc-shaped mouth, all positioned relative to the canvas center, and animates the eyebrows upward and back down over two seconds. The code uses D3 v5's `select`, `arc`, and the `transition` API to build and animate the SVG elements within a React framework.

Loading thumbnail…

World Population Line Chart

This visualization shows the growth of world population over time, with a filled area chart that uses a smooth curve to represent population values. The chart displays time on the x-axis and population on the y-axis, with gridlines and labels for both axes. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the path, along with `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file via `csv`, with population values converted from thousands to raw numbers.

Loading thumbnail…

Temperature San Fransisco Line Chart

This line chart shows temperature readings across a week in San Francisco, with a smooth area fill rendered in maroon beneath the temperature curve. The visualization uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.curveBasis` to generate the SVG path, while `d3.axisLeft` and `d3.axisBottom` add labeled axes with gridlines. Data is loaded as CSV from a remote dataset, and each timestamp is parsed into a JavaScript Date object before rendering.

Loading thumbnail…

Temperature San Fransisco Line Chart

This visualization displays a week of temperature data for San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The SVG is rendered using D3 v5, with scales and axes generated via `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The line is drawn using `d3.line` with `curveBasis` for smoothing. Data is loaded from a CSV file using `d3.csv`, and the chart includes a tilted y-axis label and a title.

Loading thumbnail…

Temperature San Fransisco Line Chart

This line chart visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The data is loaded from a remote CSV file and plotted as a smooth curve using d3.line with curveBasis, while d3.scaleTime and d3.scaleLinear map the data to SVG coordinates. Axis labels and gridlines are generated via d3.axisLeft and d3.axisBottom, and the chart is rendered entirely as SVG with custom styling for the path and ticks.

Loading thumbnail…

Temperature San Fransisco

This chart displays a week of temperature readings in San Francisco as a scatter plot, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the axes and SVG circles for each data point. Data is loaded asynchronously via `csv` from a remote file, with timestamps parsed as `Date` objects and values converted to numbers before rendering.

Loading thumbnail…

HTML Starter

This example displays a scatterplot of automobile horsepower and weight from the auto-mpg dataset, with each point representing a vehicle. The visualization uses D3 v5’s `scaleLinear` and `extent` to map data to SVG coordinates, while `axisLeft` and `axisBottom` generate gridlines and tick marks. Circles are appended to the SVG via data joins, styled with opacity, and sized at a fixed radius of 10 pixels. The axis labels and title are added as SVG text elements.

Loading thumbnail…

HTML Starter

A bar-less scatterplot of the 10 most populous countries uses circles scaled by population on the x-axis and categorical country names on the y-axis. It renders with D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` within an SVG. Data comes from a local `data.csv` file, parsed via `csv`. Axis grids use tick lines, and the chart includes a title and formatted population labels using `format('.3s')`.

Loading thumbnail…

HTML Starter

This example displays a horizontal bar chart of the world's ten most populous countries, ranking them from China to Ethiopia using population data loaded from a CSV file. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with grid lines and formatted tick labels (e.g., converting millions to billions) rendered as SVG. The bar lengths represent each country's population, with a title above the plot and an x-axis label below.

Loading thumbnail…

HTML Starter

This example uses D3 v5 to render a horizontal bar chart of population data from a CSV file, with each country’s population shown as a steel-blue rectangle. The code loads `data.csv` using `d3.csv`, parses populations with `map`, and builds linear and band scales via `d3.scaleLinear` and `d3.scaleBand`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and all shapes are drawn as SVG elements within a fixed 960×500 viewport.