Skip to main content
Log in
V

Vvgupta

@Vvgupta·17 public vizzes

Loading thumbnail…

line chart ordinal data

This line chart maps ordinal letter categories (a–m) from a CSV file to their corresponding numeric values. The visualization uses D3 v5’s `scalePoint` for the x-axis and `scaleLinear` for the y-axis, rendering a smooth curve via `line()` with `curveBasis`. Circles mark each data point, while axes are generated with `axisBottom` and `axisLeft`. The SVG output includes a black stroked path and teal circular markers, with data loaded asynchronously through `csv()`.

Apr 21, 2020
Loading thumbnail…

faltu fork

This example displays a line chart showing the total pills counted per year, using a dataset loaded from a remote CSV. The visualization employs D3 v5’s `scalePoint` and `scaleLinear` to map years and values, while an SVG path is generated with `line()` and `curveBasis` for the curve. Axes are added via `axisLeft` and `axisBottom`, with a black stroke styled through the `.line-path` class. The chart is rendered entirely in SVG within a fixed 460x400 canvas.

Mar 19, 2020
Loading thumbnail…

line chart time_tooltip koshish

This line chart displays daily values over a week in April 2018, with a red curve plotted against time on the x-axis and a linear scale for the y-axis. Hovering over the chart reveals a tooltip with a circle marker that follows the mouse position, displaying the date and value of the nearest data point. Built with D3 v5, the visualization uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the SVG path, and implements the tooltip via a bisector and mouse event handlers. The data comes from a CSV file parsed with `d3.csv`.

Mar 17, 2020
Loading thumbnail…

area Chart FCC

This area chart displays temperature measurements in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 to load CSV data, scales time and linear values with `scaleTime` and `scaleLinear`, and renders the area path using the `area` generator with a `curveBasis` interpolation. Axis labels and a title are added via SVG text elements, while grid lines are drawn through tick marks. The chart applies a maroon fill with a red stroke to the area path, and includes axis labels for “Time” and “Temperature”.

Mar 17, 2020
Loading thumbnail…

?

This example shows a line chart of population values from 2005 to 2015, drawn as an SVG path using D3 v4’s `d3.line` and `d3.scaleTime`/`d3.scaleLinear` scales. The data is loaded from `data.json` with `d3.json` and parsed via `d3.timeParse`. A hover interaction uses a transparent overlay rectangle, `d3.mouse`, and `d3.bisector` to find the nearest year, then updates a focus circle, dashed hover lines, and a value label via direct SVG attribute manipulation. The y-axis labels are formatted in thousands with a custom tick format.

Mar 13, 2020
Loading thumbnail…

Line Chart FCC

This line chart displays temperature readings in San Francisco over a week, using time on the x-axis and temperature on the y-axis. The visualization is rendered as an SVG with D3 v5, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a line generator with `curveBasis`. Data comes from a CSV file loaded via `d3.csv`. The chart includes labeled axes, a title, and a red smoothed line path, with grid lines created through tick sizing.

Mar 12, 2020
Loading thumbnail…

line chart time data

This line chart visualizes daily values over a two-week period, with a red path connecting data points plotted by date and value. The y-axis starts at 8000 to emphasize variation, while each data point is marked with a circle. Using D3 v5, the code loads a CSV file, parses dates with `new Date()`, and applies `scaleTime` and `scaleLinear` for axes. The `line` generator with `curveBasis` creates the smoothed path, and SVG circles are appended for points, with axes rendered via `axisLeft` and `axisBottom`.

Mar 12, 2020
Loading thumbnail…

hbc + codegap + heading

This example displays a horizontal bar chart of letters from 'a' to 'm' against their corresponding numeric values, using a green fill for each bar with an overall title. The visualization loads data from a CSV file and renders with D3 v5, using `d3.csv`, `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to draw the axes. Bars are generated through a data join, with height determined by the band scale's bandwidth and width scaled to each value.

Mar 12, 2020
Loading thumbnail…

Temp in San Francisco Scatter Plot

This scatter plot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Each circle represents a data point from the temperature-in-san-francisco.csv dataset. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for the axes, `extent` for domain calculation, and `axisBottom` and `axisLeft` to generate gridlines and tick marks. The design includes labeled axes and a title, with semi-transparent steelblue circles.

Mar 12, 2020
Loading thumbnail…

Cars scatterPlot

This scatterplot compares vehicle weight and horsepower using a dataset of car models. Each circle represents a car, positioned by its weight on the x-axis and horsepower on the y-axis, with gridlines and labeled axes. The visualization is built with D3 v5, using `d3.csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG. Data is loaded from a remote CSV file and parsed into numeric values before being plotted.

Mar 12, 2020
Loading thumbnail…

scatterPlot

A scatter plot displays letters from a CSV file against their corresponding numeric values as circles. The chart uses D3 v5 with an SVG rendering, loading data via `d3.csv` and scaling positions with `scaleLinear` for the x-axis and `scalePoint` for the y-axis. Axes are generated using `axisBottom` and `axisLeft`, with tick lines spanning the plot area.

Mar 12, 2020
Loading thumbnail…

hbc +labels+axis

This horizontal bar chart displays the frequency of letters a–m, with each bar's length proportional to its value. The visualization maps values to bar widths using a linear scale and letters to row positions with a band scale. The SVG rendering uses d3.scaleLinear, d3.scaleBand, axisBottom, and axisLeft to generate the axes, with tick lines showing gridlines. Data loads from a CSV file via d3.csv, and the y-axis labels are cleaned by removing the domain and tick lines.

Mar 12, 2020
Loading thumbnail…

making a horizontal bar chart

A horizontal bar chart displays the distribution of values across letters, with green bars drawn in an SVG canvas. The visualization uses d3-scale's scaleLinear and scaleBand to map data values and letter categories to pixel positions, while d3-axis renders the left and bottom tick marks. Data loads from a local CSV file, and the bars are appended as SVG rect elements, with widths proportional to each letter's value.

Mar 12, 2020
Loading thumbnail…

saloni

This visualization displays the relationship between letters and their associated numerical values using a scatter plot. Each circle is positioned along the x-axis by letter and y-axis by value, with a line connecting the points to show trends. The example uses D3 v5 APIs including `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG. Data is loaded from a CSV file and drawn as circles with a connected path overlay.

Mar 12, 2020
Loading thumbnail…

making a vertical bar chart

This example shows a vertical bar chart of lettered categories (a–m) and their corresponding numerical values, with red bars and labeled axes. The chart uses D3 v5 to load comma-separated data via `d3.csv`, then applies `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, and the bars are appended as SVG `<rect>` elements. The layout uses a fixed margin and inner dimensions, with the y-axis range inverted to align zero at the bottom.

Mar 11, 2020
Loading thumbnail…

vizhub Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime and d3.scaleLinear to map temporal and temperature values, with d3.axisBottom and d3.axisLeft for labeled axes. The line is generated with d3.line and a curveBasis interpolation. Data is loaded via d3.csv from a remote CSV file, and the SVG is rendered with D3 selections, including axis grid lines and a custom title.

Mar 11, 2020
Loading thumbnail…

Shapes and Colors with SVG CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped using SVG’s `<g>` element. It demonstrates how fill colors, stroke widths, and transforms like translation and scaling affect shape rendering. The code uses raw SVG markup within an HTML file, linked to an external stylesheet that applies classes to set stroke properties. No JavaScript libraries are used; rendering relies entirely on the browser’s native SVG support.

Mar 10, 2020