Skip to main content
Log in
K

Kishen Patel

@KishenPatel97·16 public vizzes

Loading thumbnail…

World Map

This example displays a static world map rendered in SVG, with countries filled in green against a light blue ocean background. It uses D3 v4 with a Mercator projection via `d3.geoPath` and `d3.geoMercator` to trace country boundaries. Geographic data comes from the world-atlas TopoJSON file, processed with `topojson.feature`. The map is centered within an SVG canvas using explicit margins, and the overall color scheme includes a light beige page background.

Apr 5, 2022
Loading thumbnail…

Social Network

This social network visualization uses a force-directed graph to display connections between nodes, with dashed lines representing links and labeled red circles for members. The layout is computed using d3.forceSimulation with forceLink, forceManyBody, and forceCenter forces, updating positions each tick. Data loads from a remote JSON via d3.json, and the SVG renders nodes, links, and text labels with D3 v6.

Apr 5, 2022
Loading thumbnail…

Family Tree

This example displays a family tree as a hierarchical node-link diagram, with circles representing individuals and curved paths showing parent-child relationships. The color of each node indicates its generation depth, using red, blue, and green for successive levels. The code builds the structure from an array of parent-child pairs via `d3.stratify()`, then lays it out with `d3.tree()` and renders the result as SVG circles, paths, and text labels.

Apr 5, 2022
Loading thumbnail…

Country Map

This example shows a choropleth map of the United States, with each state rendered as a green SVG path on a light blue background. It loads US state boundaries from the us-atlas TopoJSON file and uses the `d3.geoPath` projection with `d3.geoAlbersUsa` to create the map. The code relies on `d3.json` to fetch the data and the `topojson-client` library to convert TopoJSON features into GeoJSON paths for rendering.

Apr 4, 2022
Loading thumbnail…

Line chart

This line chart visualizes daily mean temperature changes over time, with the x-axis representing days and the y-axis showing mean temperature in degrees. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render an SVG path with red strokes. Data is loaded from a CSV file via `d3.csv`, and dates are parsed with `d3.timeParse`. Grid lines are drawn using tick sizes, and axis labels are added manually within the SVG.

Mar 29, 2022
Loading thumbnail…

Line Area

This line area chart shows daily mean temperatures in San Francisco over one week, with the area under the curve filled in green. The x-axis displays dates while the y-axis represents temperature in degrees Celsius, with a title and axis labels included. Built with D3 v6, the visualization uses `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisLeft`, and `axisBottom` to render the SVG. Data is loaded from a CSV file and parsed using `timeParse`.

Mar 29, 2022
Loading thumbnail…

Fork of line chart section 3

This line chart visualizes car sales totals from 2013 to 2021, using a single red path to show the trend over time. The x-axis represents years and the y-axis represents total sales, with both axes labeled clearly. The visualization uses D3 v5, specifically the `scaleTime` and `scaleLinear` functions for scaling, `axisLeft` and `axisBottom` for axis generation, and the `line` generator to create the path. Data is loaded from an external CSV file retrieved via `csv()` and rendered as an SVG element.

Mar 29, 2022
Loading thumbnail…

Pie Chart

This pie chart visualizes the top 10 car selling prices from a CSV dataset. The chart displays each car model as a colored slice using `d3.pie` and `d3.arc`, with a legend showing the car name and its corresponding price. The visualization uses `d3.scaleOrdinal` with `schemeCategory10` to assign distinct colors, and SVG rendering for all graphical elements. The data is sorted by selling price, with only the highest ten entries selected for display.

Mar 28, 2022
Loading thumbnail…

Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, cycling through different sepal and petal measurements on the x-axis while plotting sepal length on the y-axis. Points are color-coded by species, with a legend and axis labels updating dynamically. Built with D3 v6, it uses a reusable `scatterPlot` module with `scaleLinear` and SVG rendering. A `setInterval` timer triggers transitions between axes, showcasing the chart’s adaptability to different data dimensions.

Mar 28, 2022
Loading thumbnail…

3D Scatter Plot with Iris Dataset

This 3D scatter plot visualizes the Iris dataset, plotting sepal length, sepal width, and petal length for one trace, and sepal length, sepal width, and petal width for another, with markers colored and styled distinctly. The visualization uses Plotly’s `scatter3d` type via `Plotly.newPlot` to render the interactive chart inside a DIV. Data is loaded asynchronously with D3’s `d3.csv`, fetching the Iris dataset from a GitHub gist, and then unpacking the relevant columns for each trace.

Mar 11, 2022
Loading thumbnail…

3D Bar chart with D3.js

This example visualizes the highest selling prices for various car models using a 3D bar chart. Built with D3.js v5, it renders an SVG with animated interactions. The chart maps car brand names to a categorical x-axis and selling price to a linear y-axis. Hovering over a bar triggers a mouseenter event, which fades the bar, draws a dashed horizontal limit line, and displays the price difference between the hovered car and all others. A mouseleave event restores the original opacity and removes these annotations. The data, loaded from a local CSV file, is encoded using `d3.scaleBand` and `d3.scaleLinear`, with axes and gridlines generated via `d3.axisBottom` and `d3.axisLeft`.

Mar 11, 2022
Loading thumbnail…

Untitled

This example visualizes a grid of colorful cubes whose heights represent random negative values, rendered as an interactive 3D bar chart. Users can drag to rotate the entire scene, which triggers smooth transitions as the cube faces and numeric text labels update. The visualization uses the d3-3d plugin with d3.v4 to project cube vertices, while SVG paths and text elements render each face and height value. A button triggers regeneration of the data, and drag events control rotation angles through d3.drag.

Mar 11, 2022
Loading thumbnail…

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

This visualization displays the top 10 vehicle selling prices as a horizontal bar chart, with car names on the y-axis and price on the x-axis. Built using React and D3 v5, it loads CSV data via d3.csv, then uses d3.scaleBand and d3.scaleLinear to position bars and axis ticks rendered as SVG elements. The chart includes custom grid lines and tick labels, with all marks generated declaratively through React components.

Mar 8, 2022
Loading thumbnail…

Kishen Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width to the x- and y-axes while encoding species with color: red for setosa, limegreen for versicolor, and orange for virginica. Built with D3 v6 and rendered as SVG, the code uses `d3.csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data, scale coordinates, and draw axes. It also assigns circle radii based on sepal dimensions, though these remain constant in the visible output.

Mar 8, 2022
Loading thumbnail…

ICE-5: Loading and Parsing CSV Data with D3

This example demonstrates how to load and parse a remote CSV file using D3 version 7. The code uses `d3.csv()` to fetch data from a GitHub Gist URL, then `d3.csvFormat()` to calculate its size in kilobytes, and displays the row and column counts. The page also includes an inline SVG illustration of a car. The body background and text styles are defined in a separate stylesheet.

Feb 26, 2022
Loading thumbnail…

Kishen face with D3.js!

This example demonstrates DOM manipulation with D3.js by constructing a yellow smiley face from basic SVG shapes. The static face includes a circle head, two eyes, a mouth drawn with an arc path, and rectangular eyebrows. An animation sequence then runs continuously, using chained `transition().duration()` calls to move the eyebrows upward and back down repeatedly. The code uses D3 v5 methods like `select`, `append`, and `attr`, building the scene inside an SVG canvas.

Feb 18, 2022