Fork of Practic 05 | Line Chart

100%

Fork of Practic 05 | Line Chart

✓ Published1🌍 Public

Hhimanshucse2012

Last edited Nov 5, 2021

Created on Nov 5, 2021

This line chart displays dry air temperature (T) against date over time from the provided CSV dataset, with each data point marked as a blue circle connected by a steelblue line. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for the date and temperature axes, along with `axisBottom` and `axisLeft` to render gridlines and tick labels. Chart title and axis labels are added as SVG text elements, while the data is loaded via `csv()` and parsed into JavaScript `Date` objects before rendering.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Practic04 | Scatter Plot Chart Formatting

This scatter plot visualizes the relationship between dry air temperature (T) and date/UTC time, using data from a CSV file loaded via d3.csv. The visualization uses d3.scaleLinear for the x-axis and d3.scalePoint for the y-axis, with d3.axisBottom and d3.axisLeft generating gridlines and tick labels. Red semi-transparent circles mark each data point, while axis labels and a title are added via SVG text elements. The chart formats axes with tick sizes and padding, and removes default domain lines for a cleaner presentation.

Hhimanshucse2012

89% match

Loading thumbnail…

Practic 05 | Line Chart

This line chart displays dry and air temperature readings (T and Tw) against date and UTC time, plotted as circles connected by a line. The visualization uses D3 v5 with `d3.csv` for data loading, `scaleTime` and `scaleLinear` for axes, and `axisBottom` and `axisLeft` for gridlines. SVG circles mark each data point, while the line rendering is prepared through the `g` selection. The chart includes labeled axes, a title, and a clean margin-based layout, with styling handled via an external CSS file.

Hhimanshucse2012

87% match

Loading thumbnail…

Fork of Practic04 | Bar Chart Formatting

A horizontal bar chart displays dry-air temperature samples from the data.csv file, with each bar labeled by date and UTC hour. The visualization uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom with custom tick formatting. SVG rectangles render the bars in steelblue, while axis labels and a title annotate the chart. The y-axis is stripped of its domain line and ticks, and the x-axis includes a custom temperature label.

Hhimanshucse2012

85% match

Loading thumbnail…

Fork of Practic05 | Bar Chart Vertical

This bar chart displays temperature readings (T and Tw) from a CSV file, plotted against time-related categories created by concatenating date and UTC hour. Using D3 v5, the visualization applies a linear scale for the x-axis and a band scale for the y-axis, rendering vertical bars with steelblue fill. The chart includes axes labels and a legend, with a simple SVG-based rendering approach.

Hhimanshucse2012

84% match

Loading thumbnail…

Practic04 | Bar Chart

This example displays temperature readings (T and Tw) across dates and times as a bar chart. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis temperature range and `scaleBand` for the categorical y-axis combining date and time values. The chart includes `axisLeft` and `axisBottom` to display the scales, while bars are drawn as SVG rectangles colored steelblue. Data is loaded from a local CSV file and processed by converting temperature values to numbers before binding to the visualization.

Hhimanshucse2012

78% match

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

77% match

Loading thumbnail…

Fork of Time Series: Part 2 - Line Chart

A line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, drawing a smooth, natural curve through the data points using D3's `line` and `curveNatural` generators. Time is mapped to the x-axis via `scaleTime` and temperature to the y-axis via `scaleLinear`, with custom `AxisBottom` and `AxisLeft` components rendering tick marks and labels. The React component loads the CSV asynchronously with `useEffect` and `csv`, applying a `timeFormat` for weekday labels. The SVG output is styled with CSS, including colored axes, grid lines, and a curved stroke for the temperature trend.

Ppravalika.thogaru10@gmail.com

76% 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.

李李文韬

76% match