Skip to main content
SimilarExport ZIP
100%

Fork of Re-doing Reusable Scatterplot 101 with my data with Line

✓ Published0🌍 Public
AAlex
Last edited Apr 11, 2023
Created on Apr 11, 2023

This example visualizes a time series of percentage values from 1986 to 2021 as a scatterplot with a connecting line. A D3 reusable chart module creates a time-scaled x-axis and linear y-axis, using `scaleTime()` and `scaleLinear()` to position circles and a line path generated with `line()` from the d3 library. The data is manually defined as arrays of years and percentages, converted into date objects, and rendered as SVG with axes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Re-doing Reusable Scatterplot 101 with my data

This example re-implements a reusable scatterplot using D3’s `scaleLinear` and `scaleTime` for axes, with data points rendered as SVG circles via `select` and `join`. It plots hard-coded yearly percentages against dates, showing a decreasing trend from 1986 to 2021. The visualization uses a simple layout with left and bottom axes, generated through `axisLeft` and `axisBottom`, within a full-window SVG. The data is local, not from the referenced Iris CSV.

AAlex
86% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This example demonstrates an animated, reusable D3 scatter plot built with the reusable chart pattern. It visualizes country-level time series data, plotting each country's values for two different years on the x and y axes, with circles positioned using linear and band scales. The chart updates every two seconds by randomizing one country's data, triggering a re-render to illustrate dynamic data binding and transitions. Rendered as SVG with axes and circles, it emphasizes the modularity of D3's data-join and the flexibility of reusable chart components.

Mmukundakrishna.r@gmail.com
78% match
Loading thumbnail…

Fork of Scatter Plot(test_data)

This fork of a scatter plot displays how a data point’s value changes over time, with a black line connecting sequential points overlaid on teal circles. It uses React to render an SVG, with axes and marks built from custom components. The code leverages d3.scaleLinear for scaling, d3.extent for domains, d3.format for tick labels, and d3.csv to load data from a remote testData.csv. The chart includes axis labels for “Time” and “Value,” and each circle shows a tooltip on hover.

NNYY
77% match
Loading thumbnail…

Fork of Line Chart

This example visualizes annual sales data as a red line chart, with a time-scaled x-axis for years and a linear y-axis for sales values. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG inside a React project, reading CSV data from a GitHub gist. The chart includes labeled axes, gridlines via tick sizing, and a rotated y-axis label, with styling defined in an external CSS file.

TTharun2022
77% match
Loading thumbnail…

Line practice

This example shows a time series of percentage values plotted as a connected scatter plot, where each point is color-coded (green, amber, or red) based on its value’s threshold against 50% and 75% reference lines. The React-based visualization uses d3’s `scaleTime` and `scaleLinear` for axes, `line` to draw the main trend and dashed threshold lines, and CSV data loaded via `d3.csv`. Point colors are assigned with a custom `colorDot` function, and interactivity is limited to a native SVG `<title>` tooltip showing the raw percentage value.

333Bambam33
77% match
Loading thumbnail…

Fork of Line Chart

This example displays a line chart of U.S. population percentages over time, using red strokes on an SVG canvas with labeled axes for Year and Percentage. The code loads CSV data via `d3.csv`, formats dates with `new Date()`, and scales the axes using `d3.scaleTime` and `d3.scaleLinear`. It renders the line with the `d3.line` generator and adds gridlines through `d3.axisBottom` and `d3.axisLeft` with tick sizes. The visualization is built with D3 v5 and styled through external CSS.

TTejucmandava
77% match
Loading thumbnail…

Fork of Fork of Line Chart

This example shows a line chart of sales over time, with axes labeled "Year" and "Sales," rendered as an SVG inside an HTML page. The visualization uses d3.scaleTime and d3.scaleLinear to map data to pixel coordinates, d3.axisBottom and d3.axisLeft for tick marks and labels, and d3.line to generate the red path. Data is loaded as CSV from a GitHub gist, with years parsed via d3.timeParse. The code also references a React starter, though the displayed version runs with vanilla JavaScript and D3 v5.

MMar-99
76% match
Loading thumbnail…

Fork of Fork of Scatter Plot(test_data)

This scatter plot visualizes a dataset with Time on the x-axis and Value on the y-axis, using a connected line and circular marks to show the relationship between the variables. The visualization is built with React and D3 v5, using scaleLinear for both axes and the d3.line generator in the Marks component to draw the path. Data is loaded asynchronously from a CSV file via d3.csv, and the rendered SVG includes reusable AxisBottom and AxisLeft components for tick marks and labels.

Kkalyanikotha
76% match