Fork of Bowl of Fruit

100%

Fork of Bowl of Fruit

✓ Published0🌍 Public

Last edited Mar 16, 2021

Created on Mar 16, 2021

A minimal line chart displays temperature readings from the `data.csv` file, showing a time series of temperature fluctuations across several days. The visualization uses a linear scale to map the data values to pixel positions along the x-axis, with an axis generated by `d3.axisBottom`. The SVG is created and appended using D3's selection methods, and the chart is rendered without any additional styling or tooltips.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Line chart

This fork of a line chart displays daily temperature readings across multiple districts over time, with each district assigned a distinct color from a categorical scale and identified via a custom color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by district, while parsing dates with Day.js and reading CSV input from a GitHub repository. Axes include grid lines and rotated labels, and the chart is rendered as an SVG with styled paths using mix-blend-mode for overlapping lines.

Vvidhyanamini

79% match

Loading thumbnail…

Fork of Fork of third

A line chart displays average monthly temperatures from 2021 to 2024, with time on the x-axis and degrees Celsius on the y-axis. The code loads a local CSV file using `d3.csv`, parses dates with `d3.timeParse`, and builds the visualization with D3 v7. The chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.curveMonotoneX` for a smooth line, and `d3.axisBottom` and `d3.axisLeft` for tick labels. Orange circles mark each data point with a hover tooltip.

Mmsahithipatel@gmail.com

78% match

Loading thumbnail…

Fork of Working with Time

This visualization plots temperature over time as a smooth line chart using React and D3 v5. The temperature data is loaded from a CSV file via `d3.csv` and rendered with SVG paths using D3’s `line` and `curveNatural` generators. Axes are built with `scaleLinear` for both dimensions, with custom React components for the bottom and left ticks. The chart includes labeled axes for "Time" and "Temperature," and while circle marks are defined in the code, they are currently commented out, so only the dark grey curved line is displayed. The styling applies custom fonts and bold axis labels via an external stylesheet.

李李文韬

77% match

Loading thumbnail…

Fork of Bowl of Fruit

A fork of the Bowl of Fruit example demonstrates dynamic data updates with D3’s enter, update, and exit selections. It shows a row of fruit shapes in a rounded bowl, where apples are red circles and lemons are yellow circles of different sizes, with each fruit labeled by type. The visualization uses `d3.scaleOrdinal` for color and radius mapping, and updates the SVG via `fruitBowl` over timed intervals that remove fruits, change an apple to a lemon, and filter out another apple. The rendering relies on SVG groups containing `circle` and `text` elements, with transitions triggered by JavaScript `setTimeout` calls.

AAndrewRiceMGW

76% match

Loading thumbnail…

Fork of dataset

This example displays a time-series line chart of temperature readings from San Francisco, using an SVG rendering with D3.js v5. It demonstrates data loading via `d3.csv`, scales with `scaleTime` and `scaleLinear`, and axes created with `axisBottom` and `axisLeft`. The chart shows a single path generated by `d3.line`, with a grid of tick lines and labeled axes. The code also imports local ES6 modules and uses `d3.select` to manage the SVG, illustrating key D3 workflows in a VizHub environment.

RRomersims

76% match

Loading thumbnail…

Fork of Working with time

This visualization displays temperature readings over time, rendered as a smooth line chart in an SVG canvas. The React app loads CSV data from a GitHub-hosted weather dataset and uses D3 v5 utilities like `scaleTime`, `scaleLinear`, and `extent` to map timestamps and temperatures to coordinates. The `line` and `curveNatural` functions from D3 draw the path, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle axes and marks. Axis labels and tick styling are defined in CSS with the Poppins font.

SSamirAhma

76% match

Loading thumbnail…

Fork of third

A line chart displays average monthly temperatures from 2021 to 2024, with the x-axis encoding month-year and the y-axis temperature in degrees Celsius. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes, and `d3.line` with `curveMonotoneX` to draw the smoothed path. Orange circles mark individual data points, and tooltips appear via SVG `title` elements, all sourced from an external CSV file.

Mmsahithipatel@gmail.com

76% match

Loading thumbnail…

Fork of Fork of line plot 3d

A line plot shows the temperature in San Francisco over a week, with time on the x-axis and temperature in degrees on the y-axis, using a smoothed curve. The visualization is rendered as an SVG using D3 v7, employing `scaleTime` and `scaleLinear` for axes and `line` with `curveBasis` for the path. The data comes from a CSV file, with axis labels and a title added via SVG text elements.

Ssumanthsomu1

76% match