avesh1998

@avesh1998·10 public vizzes

Untitled

This example shows how to connect pairs of points with lines using D3.js version 3 within a React framework, rendering the result as SVG. It defines a dataset of three line segments, each containing two coordinate pairs, and plots them on a Cartesian grid with linear scales for the x and y axes. The code uses `d3.svg.line()` to generate the path data for each segment and applies it to SVG path elements via `.datum()` and the `d` attribute, while axis generation relies on `d3.svg.axis()`.

Jun 3, 2020

Loading thumbnail…

Untitled

This example demonstrates how to connect multiple pairs of points with straight lines in a Cartesian coordinate system using D3.js v3. The visualization renders three separate line segments, each defined by two endpoints, on an SVG canvas with labeled x and y axes. The code uses d3.svg.line() to generate the path data, d3.scale.linear() for coordinate mapping, and d3.svg.axis() to draw the axes. Data is stored as an array of coordinate pairs in JavaScript, and each line is appended as an SVG path element with a distinct stroke color.

Jun 3, 2020

Loading thumbnail…

Untitled

This example visualizes three separate line segments, each connecting two points on a scatterplot-like coordinate system. The data is defined as an array of coordinate pairs, and D3.js v3 scales map these values to pixel positions. Using `d3.svg.line()` and `d3.svg.axis()`, the code generates SVG paths and axes within a React-rendered HTML page. The rendering approach relies on SVG elements appended to a container, with margins applied via a translation transform.

Jun 3, 2020

Loading thumbnail…

Scatter Chart

This example demonstrates a scatter chart using Chart.js, with the scatter plot drawn on an HTML canvas element. The chart is configured with `responsive: true` to adapt to its container’s width, which is set to 50% of the page. The code initializes the chart inside `window.onload` by accessing the canvas context via `getContext("2d")` and creating a new `Chart(ctx).Scatter()` instance. A `randomScalingFactor` function generates random integer data points scaled to 100, but the chart is initialized with empty `scatterData`, so no visible points render until data is provided.

Jun 3, 2020

Loading thumbnail…

The d3 test

A basic scatterplot maps four pairs of numbers from the `xdata` and `ydata` arrays onto a two-dimensional chart. The visualization uses the D3 v2 library to create linear scales for both axes and draws circular points with a fixed radius and partial opacity. The chart renders axes via `d3.svg.axis()` and updates the points through `g.selectAll("scatter-dots")` in a `redraw()` function, though the code does not invoke this function, so only the axes and empty plotting area are visible on load.

Jun 3, 2020

Loading thumbnail…

Untitled

This example displays two Google Charts visualizations side by side: a pie chart and a bar chart, both titled “How Much Pizza I Ate Last Night.” The charts present the same categorical dataset of pizza toppings with corresponding slice counts. The code uses the Google Charts loader and the `corechart` package to create a `DataTable`, then instantiates a `google.visualization.ScatterChart` (mislabeled as pie) and a `google.visualization.BarChart`. Each chart is drawn into a separate `div` element with predefined width and height options.

Jun 3, 2020

Loading thumbnail…

Untitled

This example shows a scatter plot of income versus savings, with each data point representing one person. It uses Google Charts’ `google.visualization.ScatterChart` with `arrayToDataTable` in two different chart sizes, and additionally uses CanvasJS’s `CanvasJS.Chart` to render a scatter chart with triangular markers and custom axes, a legend, and a title. The CanvasJS version includes 50 manually specified data points and axis formatting.

Jun 3, 2020

Loading thumbnail…

Untitled

This example presents two scatter plots, one large and one small, using Google Charts. Both plots display six data points with x and y coordinates, rendered as an interactive scatter chart titled "Scatter Plot." The code loads the Google Charts library through a script tag and initializes the chart with the `google.visualization.arrayToDataTable` and `ScatterChart` APIs. A third scatter plot uses CanvasJS to visualize income versus savings data for 50 individuals, with custom axes and triangle markers.

Jun 3, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG data set. Using D3 v5, the code loads the CSV data, applies linear scales via `d3.scaleLinear`, and renders red, semi-transparent circles as SVG elements. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, complete with tick marks, labels, and a title, all styled through CSS.

Jun 3, 2020

Loading thumbnail…

Untitled

A multi-line chart tracks annual influenza-like illness (ILI) totals per week, with one line per year from 2015 to 2019. Each line uses a categorical color scale for the year, visually distinguishing seasons for direct comparison. The visualization is built with the vega-lite-api library, which compiles specifications to SVG via vega-lite, and it aggregates the raw CDC ILINet surveillance data by year, region, and week. The data is loaded as CSV, and the chart encodes the summed ILI totals along the y-axis against week numbers.

Jun 2, 2020