Skip to main content
SimilarExport ZIP
100%

CITY ATTRIBUTES

✓ Published0🌍 Public
CChaturyaAkhilaPallem@my.unt.edu
Last edited Mar 24, 2024
Created on Mar 23, 2024

This visualization uses a city attributes dataset to display the geographic distribution of cities in a scatter plot, plotting longitude against latitude as steelblue circles. It then presents a bar chart that aggregates the data by country, showing the count of cities per nation using D3.js’s `d3.rollup` for grouping and `scaleBand`/`scaleLinear` for axes. The SVG rendering relies on D3 v7, with both charts generated from a CSV file fetched via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, while the bar heights reflect the computed country counts.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of several global cities, with each bar’s length representing a city’s population. The visualization uses D3 v7 to load a CSV file, then applies `scaleLinear` for the x-axis population scale and `scaleBand` for the y-axis city categories. SVG rectangles are appended and sized using these scales, with `axisLeft` and `axisBottom` rendering the labeled axes. The chart is styled with steelblue fills and a fixed 960×500 SVG canvas.

Ssheafallick
79% match
Loading thumbnail…

Several City Chart

This chart displays a week of temperature readings from multiple cities, with each city drawn as a colored line over time. The data is loaded from a CSV, parsed, and rendered as smoothed SVG paths using d3.line with curveBasis. Axes are generated with d3.axisBottom and d3.axisLeft, and a color legend is built using d3.scaleOrdinal with schemeCategory10. React manages the app shell, while d3.nest groups records by city for sorting.

Ssuperstark02
78% match
Loading thumbnail…

Several City Chart

This visualization displays a week of temperature readings from multiple cities, using a multi-line chart to compare trends over time. Each city is represented by a colored path, with a categorical color scale and a legend identifying each location. The chart is built with React and D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveBasis` for smooth paths. Data is loaded via `d3.csv` from a remote dataset, and the rendering uses SVG with nested groups for axes and a custom color legend function.

Jjeelong
78% match
Loading thumbnail…

Basic Scatter Plot

This basic scatter plot maps the longitude and latitude of cities from a CSV sample dataset, showing their geographic positions. Each circle represents a city, plotted with D3's `d3.scaleLinear()` for the x and y axes. The visualization uses the D3 v4 library alongside `d3.legendColor` to generate a color legend, though the color encoding is disabled in this version. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, with grid lines and labels for clarity. The data is loaded using `d3.csv`, parsing the lat and lng values for each point.

CCurran Kelleher
77% match
Loading thumbnail…

Countries Population Visualization

This visualization shows the population of various cities using a horizontal bar chart, with each bar’s length proportional to the city’s population. The data is loaded from a CSV file and rendered as SVG rectangles using D3 v5’s `scaleLinear`, `scaleBand`, and `csv` methods. The chart displays the city names on the y-axis and population values on the x-axis, with bars styled without axis labels or gridlines.

Jjohnni2
77% match
Loading thumbnail…

D3 in depth

This example shows horizontal bar charts for the populations of five cities, with city names positioned to the right of each bar. A hover effect changes the bar color from steelblue to orange. The visualization is built with D3 v7, using selections, data binding, and the `join` method to create SVG `rect` and `text` elements. The data is hard-coded in an array of city objects, and bar widths are scaled by multiplying population values by a constant factor.

SSubhendu Karmakar
77% match
Loading thumbnail…

Scatter plot

This scatter plot displays city areas in square meters along the x-axis with city names on the y-axis, using a linear scale for area and a point scale for cities. The visualization renders purple circles with hover effects, and includes axis tick lines and labels for readability. The code uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a CSV file, with the chart drawn as an SVG.

Vvladvaculin
77% match
Loading thumbnail…

D3 Example

This D3 example visualizes the populations of three cities—Shanghai, Buenos Aires, and Mumbai—as a horizontal bar chart. It shows population magnitudes through bar lengths along a linear x-axis, with city names on the ordinal y-axis. The visualization uses D3.js (v3) to load a CSV file, scale data, and render SVG elements. The code employs `d3.scale.linear`, `d3.scale.ordinal`, and `d3.svg.axis` to construct axes, while formatting tick labels with `d3.format("s")` for compact notation. Data comes from the included `geonames_cities_top3.csv` file.

CCurran Kelleher
76% match