INFO 3300 - HW5

100%

INFO 3300 - HW5

✓ Published0🌍 Public

Last edited Mar 7, 2020

Created on Mar 4, 2020

Two D3.js line-area charts visualize weekly tweet volume from a JSON dataset through SVG paths. The first chart plots three tweet categories over time using shared axes and scales. The second chart displays total tweet volume as an orange area with yellow stroke. Both use `d3.json` for data loading, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisLeft`/`d3.axisBottom` for axes. The time axis uses custom parsing with `d3.timeParse` and tick formatting with `d3.timeFormat`. Data is rendered via area generation, showing trend patterns across weekly dates.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js in action - Section 1 - Ch 1 and 2

This example visualizes Twitter engagement by plotting tweets as circles on an SVG canvas, with x-position determined by tweet time using `d3.scaleTime`, y-position by impact score (favorites plus retweets) via `d3.scaleLinear`, and circle radius and fill color mapped from the same metric with additional scales. It loads data from a local `tweets.json` file using `d3.json`, demonstrates data joins with `enter()` and `exit()` selections to update circles based on filtered data, and uses `d3.group` for data manipulation alongside CSV parsing of `cities.csv` that is fetched but unused.

AAlbert

74% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

73% match

Loading thumbnail…

D3 Chart

This example displays six D3.js charts—horizontal and vertical bar charts, a line chart, an area chart, a pie chart, and a donut chart—all rendered as SVG elements. Each visualization uses the d3.csv function to load population data by country from a local CSV file. The code applies d3.scaleLinear and d3.scaleBand for axes, d3.line and d3.area with curveBasis for path generation, and d3.scaleOrdinal with schemeSet2 for categorical colors, while d3.axisLeft and d3.axisBottom create the tick marks.

Sshadreza

72% match

Loading thumbnail…

Fork of Hello VizHub

A line chart displays weekly message totals across four service categories, with individual data points for sent messages overlaid as circles and text labels. The visualization uses D3 v5 with SVG rendering, constructing scales via `d3.scaleTime` and `d3.scaleLinear`, drawing the line with `d3.line` and `d3.curveMonotoneX`, and generating axes through `d3.axisBottom` and `d3.axisLeft`. Data is randomly generated from predefined category ranges in the `useData.js` module.

MMarcelo

72% match

Loading thumbnail…

Twitter - Area Chart ICE-7

This visualization displays Twitter share prices over the past week using a smooth area chart. The chart plots timestamps on the x-axis and share price on the y-axis, with axis labels and a title. Created with React and D3 v5, the code uses `d3.select`, `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and the `d3.area` generator with `curveBasis` to render the filled curve as an SVG path. Data is loaded from a GitHub gist CSV file.

Mmanojgne

72% match

Loading thumbnail…

d3.js v5 line chart with dates

This example shows a line chart of weekly Net Promoter Scores over several months, with each data point highlighted by a circle and labeled with its numeric value. The chart uses a time-scaled x-axis for dates and a linear y-axis for scores, with the line smoothed using `d3.curveMonotoneX`. The code builds the visualization with D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`, while rendering the marks as SVG circles and text labels. The data are hardcoded as an array of date-and-score pairs, and the y-axis range is fixed to start slightly below the minimum score.

GGerardoFurtado

72% match

Loading thumbnail…

DataViz_TP2

This example visualizes a simple line chart of monthly values using D3.js v4, rendering an SVG with a time-scaled x-axis and linear y-axis. It displays labeled data points as light grey circles connected by a black line, with the final value annotated at the end. Hovering over a circle highlights it in red, reveals the corresponding value label, and draws a dashed vertical guide line to the bottom of the chart. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.json` for loading `dataset.json`, and transitions via `transition().style()` for interactive feedback.

BBkilian971

72% match

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`.

VVvgupta

72% match