Fork of Area Death's

100%

Fork of Area Death's

✓ Published1🌍 Public

Last edited Mar 26, 2023

Created on Mar 26, 2023

This visualization displays the Crime Index across different countries using an area chart, with countries on the x-axis and crime index values on the y-axis. The code uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.area` with `curveBasis` to render the smooth filled path in SVG. Data is loaded from a CSV via `d3.csv` and converted from strings to numbers and dates. The chart includes labeled axes, grid lines, and a red title, with orange fill styling applied through CSS.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

Made in this video:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Area Death's

This visualization shows the crime index across different countries, with the x-axis displaying countries as time-scaled values and the y-axis representing the crime index. The chart uses a filled orange area path rendered with d3.area and a basis curve, while axes are created using d3.axisBottom and d3.axisLeft. Data is loaded as CSV from a GitHub gist, with country values parsed as dates and crime index as numbers. The SVG rendering includes a red title and purple axis labels, with d3.scaleTime and d3.scaleLinear mapping the data ranges.

NNikitha123171

97% match

Loading thumbnail…

Fork of Area Death's

This example shows the crime index across different countries over time, with the data plotted as a smooth, orange area chart. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `area` with `curveBasis` to create the filled curve. It is rendered as an SVG inside an HTML page, and the data is loaded from a CSV hosted on GitHub, with axis labels and a title styled via CSS.

NNikitha123171

94% match

Loading thumbnail…

Fork of Line_Stroke_Death

This line chart displays the Crime Index for various countries using an orange, curved line. The visualization is built with D3 v5, using `scaleLinear`, `scaleTime`, and `line` with `curveBasis` to generate the path. Axes are rendered with `axisBottom` and `axisLeft`, and data is loaded via `csv` from a GitHub gist linked in the code. The chart includes labeled axes for Country and Crime_Index, with a title, and uses an SVG rendering approach within a fixed 960x500 viewport.

NNikitha123171

88% match

Loading thumbnail…

Fork of D3.js Line Chart

This chart visualizes the Crime Index across 22 countries, using a line to connect each country’s index value along a categorical x-axis. Built with D3.js v7, it loads data from a CSV file using `d3.csv` and renders an SVG line chart with band-scaled x positions and linear y scaling. The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct axes, while drawing the line via `d3.line` and styling it with steelblue stroke attributes from CSS. Axis labels are added as SVG text elements.

NNikitha123171

84% match

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart displays crime indices across different countries, with each country plotted along the x-axis based on a date-converted value and crime index on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to render an SVG path with gridlines, axis labels, and a title. Data is loaded as CSV from a GitHub gist, parsed, and converted so country names become date objects, while crime indices are parsed as numbers. The chart is drawn with red strokes and styled via an external stylesheet.

NNikitha123171

84% match

Loading thumbnail…

Fork of Fork of Area Death's

This area chart displays the number of deaths per year, with the x-axis representing years and the y-axis representing the death count. The chart uses a smooth curve to connect data points, rendered as an SVG with a yellow fill. Built with D3 v5, it employs `scaleTime` and `scaleLinear` for axes, `area` with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for labeled ticks. The data, sourced from a CSV file, is loaded via `csv` and parsed into date and numeric values.

GGogineni44

84% match

Loading thumbnail…

Fork of Fork of Fork of D3.js Line Chart

This line chart displays the Crime Index for ten countries, using a categorical x-axis and a linear y-axis scaled to the maximum value in the dataset. The visualization is built with D3.js v7, employing `d3.csv` for data loading and `d3.scaleBand` and `d3.scaleLinear` for coordinate mappings. A single SVG path is drawn with `d3.line`, with the line rendered in steel blue and a stroke width of six pixels. The chart includes labeled axes, with the data sourced from the embedded CSV file.

Bbhanuprasadk19

83% match

Loading thumbnail…

Fork of Fork of D3.js Line Chart

This line chart visualizes crime indices for ten countries, with each country plotted along a categorical x-axis and its index value on a linear y-axis. The visualization uses D3.js v7, loading data from a local CSV file via `d3.csv`. The chart is rendered as an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` path with a thick steelblue stroke. Axis labels and ticks are generated with `d3.axisBottom` and `d3.axisLeft`, while custom CSS styles the axes and line.

Bbhanuprasadk19

83% match