Skip to main content
SimilarExport ZIP
100%

Anitha Shivaramiah (11537410) ICE6

✓ Published0🌍 Public
AAnitha Shivaramaiah
Last edited Mar 24, 2023
Created on Mar 23, 2023
Forked from HTML Starter

This bar chart displays the total crime rates in Ukraine for each year, sorted in descending order. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map years and crime totals to SVG rectangles. Data is loaded from a CSV via `d3.csv`, with axes rendered using `axisLeft` and `axisBottom` equivalents manually drawn through tick elements, and all marks styled with light blue fills.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This horizontal bar chart displays the crime index for fifteen countries in 2020, with bars sorted by country name. Using the React framework, the example integrates D3’s `scaleBand` and `scaleLinear` to map categorical and quantitative data, while rendering SVG rectangles for bars and axes via `axisLeft` and `axisBottom` logic. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and the visualization updates upon fetching the top 15 entries.

Bbhanuprasadk19
77% match
Loading thumbnail…

India-Map-react-app-1

This example presents a horizontal bar chart visualizing crime rates against women across Indian states and union territories in 2021, using data from a CSV file loaded via d3.csv. The React application renders SVG bars with d3.scaleLinear and d3.scaleBand, sorting states by descending crime rate. Bars are colored steel blue with adjustable opacity and stroke width on selection. The chart includes axes generated by d3.axisLeft and d3.axisBottom, plus value labels and hover-triggered text showing state names and rates.

NNita
75% match
Loading thumbnail…

Anitha Shivaramaiah (11537410) ICE-7, Area chart

This area chart displays earnings data from 2012 to 2023, using a pink filled area with a dark blue line to emphasize trends over time. The visualization loads CSV data via `d3.csv`, parses dates with `scaleTime`, and maps costs using `scaleLinear`. It renders axes with `axisLeft` and `axisBottom`, applies `curveBasis` smoothing to both the `line` and `area` generators, and includes gridlines via tick sizing. The SVG output uses custom CSS classes for styling and labeled axes.

AAnitha Shivaramaiah
74% match
Loading thumbnail…

Fork of Fork of Fork of Iterate my work - bar chart of crime in India_VER1.3

This bar chart visualizes crimes against women across Indian states for a selected year, with dropdown menus to filter by year and crime type. The data is loaded from a CSV file and aggregated by state, then displayed in descending order of case counts. The visualization uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.rollups to group the dataset. Bars transition smoothly when filters change, and a mouseover effect adjusts bar opacity to provide hover feedback.

JJonathan Taylor
73% match
Loading thumbnail…

ICE 7

A combined line and area chart displays CrimeRate from 2010 to 2019, with the line emphasizing the trend and the area filling beneath it. The visualization uses D3 v5 with SVG rendering, employing `d3.line`, `d3.area`, and `curveBasis` for smooth interpolation, alongside `scaleLinear`, `axisBottom`, and `axisLeft`. The data is loaded via `d3.csv` from a GitHub gist, with the year and crime rate parsed as numeric values. Axis labels and gridlines are styled through CSS, and the chart is centered within a fixed-width SVG container.

Kkakumanusreya
73% match
Loading thumbnail…

Fork of Fork of Fork of Iterate my work - bar chart of crime in India_VER1.3

This visualization displays crime data across Indian states, showing the number of cases for various offense types on a horizontal bar chart. Users can filter by year and crime category through dropdown menus. The chart sorts states in descending order and includes hover effects that adjust bar opacity. The code uses D3 v7 with `rollups` for data aggregation, `scaleLinear` and `scaleBand` for axes, and `transition` with `easeLinear` for animated updates. Data comes from a CSV file of crimes against women in India.

TTakashi-KK
73% match
Loading thumbnail…

Fork of D3.js Line Chart

This bar chart displays the Crime Index for various countries, ordered alphabetically along the x-axis with the index value on the y-axis. The visualization uses an SVG rendering approach within the D3.js framework, employing `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the numerical axis. The code creates a single bar per country, colored steelblue, with axis labels generated via `d3.axisBottom` and `d3.axisLeft`. The data originates from a CSV file loaded using `d3.csv`.

NNikitha123171
73% 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
73% match