achintyatripathi

@achintyatripathi·12 public vizzes

Untitled

This interactive bar chart displays road accident statistics across eight police stations in the Ropar district, using data from a CSV file. A dropdown menu lets the user select different variables, such as fatalities by severity, day of the week, vehicle type, or collision type, and the bars update with smooth transitions. The visualization uses D3 v3 with an ordinal x-scale and linear y-scale to map police stations and case counts, while hovering over a rectangle highlights it and shows a tooltip with the station name and value.

Oct 31, 2020

Loading thumbnail…

Untitled

This interactive bar chart displays road accident statistics across police stations, with a dropdown menu to switch between different data columns such as fatalities, injury severity, collision types, and day of the week. Built with D3 v3 and React, the visualization uses `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and SVG rectangles that smoothly animate via `transition().ease()` when the selected metric changes. Data is loaded from a CSV file, and hover tooltips reveal exact values per station.

Oct 31, 2020

Loading thumbnail…

D3.js Sortable & Responsive Table

This interactive table displays police station accident data from a CSV file, allowing users to sort rows by clicking any column header. Built with D3.js v3, the visualization loads data via `d3.csv` and dynamically creates an HTML table. Clicking a header toggles ascending and descending sort order, updating arrow indicators on the active column. The table is responsive, using CSS media queries to transform from a standard layout on desktop to a card-style display on mobile devices, where each cell is labeled with its corresponding column name.

Oct 24, 2020

Loading thumbnail…

Axes with React & D3

A bar chart displays the ten most populous countries for 2020, loading data from a CSV file via D3’s `csv` utility and rendering with React’s `useState` and `useEffect` hooks. D3’s `scaleBand` positions the categorical y-axis, while `scaleLinear` maps population values to the x-axis, with ticks generated by `xScale.ticks()`. The chart draws SVG `<rect>` bars and axis labels, using React’s `transform` attribute for positioning, all within a 960×500 viewport.

Oct 12, 2020

Loading thumbnail…

leaflet-map-csv

This example displays crime locations on an interactive map of Rupnagar, India, using a CSV file containing latitude, longitude, police station, and place of occurrence. The map reads the CSV with PapaParse and jQuery, then plots each row as a Leaflet marker whose popup shows the police station name. Users can toggle between two base layers—Carto Light and Stamen Terrain—via a control panel in the top-right corner.

Oct 12, 2020

Loading thumbnail…

New Start

A bare-bones HTML page demonstrates basic web development concepts, rendering a static SVG scene of two circles (one red) and a rectangle on a 900x200 canvas. The page uses a `style.css` file with a large monospace font and an orange `.highlight` class, and displays a test case list of HTML, CSS, and JavaScript. The raw SVG shapes are drawn directly inline without any JavaScript libraries or data sources.

Oct 12, 2020

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations greater than 50,000 as sized circles, using a square-root scale to map population values to circle radii up to 15 pixels. The map is rendered in SVG with React, using D3’s geoNaturalEarth1 projection and geoPath to draw landmasses, country boundaries, and graticules. City coordinates and populations come from a Simplemaps dataset, loaded via d3.csv, while country geometries derive from World Atlas TopoJSON.

Oct 12, 2020

Loading thumbnail…

Land use statistics map

This example displays a land use statistics map of Switzerland, rendering municipal boundaries as black vector paths on a light background. It loads GeoJSON data from `ch_municipalities.geojson` and projects them using `d3.geo.mercator()` with a fixed scale and center point, then translates the projection to fit a 900 by 600 pixel SVG container. The code uses `d3.geo.path()` to generate the path data for each feature, appending `path` elements to the SVG via a data join. The map is static, with no interaction or additional styling beyond the basic class assignment.

Oct 11, 2020

Loading thumbnail…

Untitled

Two time series line charts display closing values over date ranges from two CSV datasets. Each chart uses a separate SVG canvas, with the x-axis as a time scale and the y-axis as a linear scale, both with five ticks. The code employs d3.time.format for date parsing, d3.time.scale and d3.scale.linear for axis ranges, and d3.svg.axis for axis rendering. Each dataset’s path is drawn with d3.svg.line, styled with a steelblue stroke via CSS.

Oct 3, 2020

Loading thumbnail…

New Start towards js by making a Bar chart

This bar chart displays the population of the ten most populous countries, using a horizontal layout with countries on the y-axis and population on the x-axis. The visualization loads data from a CSV file and renders it as SVG rectangles. It uses D3 v6 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with a custom tick formatter that abbreviates large numbers using the `format` function. The chart includes axis labels and a title, with margins and a steelblue fill for the bars.

Oct 2, 2020

Loading thumbnail…

New Start towards js by making a face

This example shows a simple face built from two SVG circles using D3.js version 6. The first circle is centered in an 960x500 SVG and has a radius of 20. A second, chained circle is positioned using the height and width attributes, styled with a yellow fill and black stroke. The code demonstrates basic D3 selection and attribute chaining with `svg.append('circle')` and `.attr()`, while converting SVG attributes to numbers using the unary plus operator. A highlighted text banner below the title indicates a new beginning with D3.js.

Oct 1, 2020

Loading thumbnail…

New Start

Oct 1, 2020