Swathi Chittani

@swathisaathvi·5 public vizzes

Customizing Axes

This bar chart displays the population of the top 10 most populous countries using data from the United Nations World Population Prospects 2017. It demonstrates D3 axis customization, including axis labels, orientation, and spacing alongside hover tooltips showing country names and values. The visualization uses d3.csv for data loading, d3-scale and d3-axis APIs for layout and tick generation, and SVG circles for rendering. Animated transitions on mouseover enhance interactivity, built with d3 v5.

Aug 15, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates customized axes, including larger tick labels, styled tick lines, and a prominent title, building upon a basic bar chart example. The code uses D3 v3 with SVG rendering and animations, leveraging `d3.svg.axis()` to construct the axes and custom CSS classes to style them. Population data is loaded from a CSV file using `d3.csv`.

Aug 15, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The chart uses a smooth curved line to connect the temperature readings, with labeled axes and a title. Built with D3 v5, the visualization employs `scaleTime` and `scaleLinear` for scaling, `axisBottom` and `axisLeft` for axes, and `line` with `curveBasis` for the smooth path. Data is loaded from a CSV file provided by Data Canvas - Sense Your City, and the chart renders as SVG with styled tick marks, labels, and a maroon line.

Aug 15, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to create D3.js visualizations by rendering a horizontal bar chart of country populations from a CSV data file, using `d3.csv`, `scaleLinear`, and `scaleBand`. The chart applies `axisBottom` and `axisLeft` for axes, removes default domain lines, and formats tick labels with `.3s` and a replace function. Bars are appended as SVG `rect` elements, with margins and an axis label added. The included README references a YouTube video about making a smiley face with animated eyebrows, though the primary code shown focuses solely on the population bar chart, not the face.

Aug 14, 2019

Loading thumbnail…

Bar Chart!

This example uses a bar chart to display the population of ten countries, ordered along the y-axis. The chart uses a linear scale for the population values on the x-axis and a band scale for the categorical country names. The visualization is rendered using D3 v5 with SVG, and the bars are drawn from data loaded from a CSV file. Axis labels and tick marks are generated using D3's `axisBottom` and `axisLeft` functions.

Aug 14, 2019