Fork of Stylized Line Chart

100%

Fork of Stylized Line Chart

✓ Published0🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

This visualization displays heart disease data across age categories as a smooth, stylized line chart. The curve is drawn using d3.line with curveNatural, connecting data points from the Data Canvas Sense Your City dataset. The React-based implementation uses d3.scaleTime and d3.scaleLinear for axes, with a Poppins font and blue stroke styling. Tooltip circles are commented out, leaving only the line visible in the SVG rendering.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Selecting a Year on a Line Chart

A line chart visualizing heart disease rates across age categories, with each line colored by a category and selectable by hovering over the chart. The vertical year line updates as the mouse moves, and the chart uses D3 v5 with d3.line, d3.scaleTime, d3.scaleOrdinal, d3.nest, and SVG rendering. Data is loaded from a CSV file, and the chart includes axes, a legend from colorLegend.js, and a title.

Cchandanagandla

85% match

Loading thumbnail…

Fork of Stylized Line Chart

This example visualizes insurance charges against age, mapping the records from Data Canvas Sense Your City and insurance datasets into a single line chart. The React application loads CSV data with d3.csv, then scales the x and y axes with d3.scaleLinear and extent, while applying a natural curve via d3.line’s curveNatural to render the path as an SVG stroke. Axis components generate tick marks and labels using d3’s scale methods, and the chart is styled with Poppins font and muted grays and blues.

SSrividya Panchagnula

85% match

Loading thumbnail…

Fork of Stylized Line Chart

This interactive line chart visualizes time-series data from the Data Canvas Sense Your City dataset, plotting time against measured values across a week. The visualization is built with React and D3 v5, using SVG for rendering. It employs D3's scaleTime function for the x-axis to handle temporal data, while the line path is drawn using the `line` and `curveNatural` functions from D3 to create a smooth, stylized curve. Though circle marks are defined in the code, they are commented out, leaving only the line and axes visible. The chart features a clean design with a Poppins font and muted color scheme for a professional appearance.

SSrividya Panchagnula

83% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart displays COVID-19 biweekly case counts for the United States over time, using a smooth curved path rendered with d3.line and curveNatural. The chart is built with React functional components and d3.v5 scales, including scaleTime for the x-axis and scaleLinear for the y-axis, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded asynchronously from a CSV URL using d3.csv within a useData hook. The visualization uses SVG rendering with a Poppins font and muted teal styling for the line and axes, but omits data point circles.

Aamanoakane

83% match

Loading thumbnail…

Fork of Stylized Line Chart

This interactive chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, using a stylized line chart with rotated axis labels and a clean, minimalist aesthetic. The visualization is built in React with D3 v5's scale functions and line generator, using `curveNatural` for smooth path interpolation. SVG rendering, tick marks with custom colors, and a Poppins font create a polished, lightweight presentation. Axis components are separate, re-used modules, showing a modular approach to the chart’s construction.

AAmmar Ehab

83% match

Loading thumbnail…

Fork of Curran's Stylized Line Chart

A line chart plots temperature over time from the Data Canvas Sense Your City Dataset, rendered as an SVG via React. The visualization uses d3’s `scaleTime` and `scaleLinear` for axes, a `line` mark with `curveNatural` for the smooth path, and custom axis components for ticks and labels. Styling uses the Poppins font and muted gray and teal colors.

Aamiteshwarr

83% match

Loading thumbnail…

Fork of Stylized Line Chart

This chart displays temperature changes over time using a stylized line chart rendered with SVG in a React application. The line employs d3.line with curveNatural to create a smooth path, while d3.scaleTime and d3.scaleLinear map data to the axes. The visualization uses data from the Data Canvas Sense Your City dataset, with React hooks managing the data loading state and timestamp formatting via d3.timeFormat. Axis components generate ticks and labels using d3 scales, and the code uses the Poppins font for styling.

Fflamont

83% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset, rendered as an SVG with React. The chart uses D3 v5's `scaleTime` and `scaleLinear` to map timestamps and temperature values, while the `line` and `curveNatural` functions from D3 draw the smooth path. Axis ticks and labels are generated with D3's `timeFormat`, and the Poppins font styles the text. The code is structured into reusable components for axes, marks, and data loading via `csv`.

MMarvin

83% match